为 WebGL 纹理加载图像，但由于 CORS 而失败

Question

I'm reading a tutorial on WebGL ( link ). In this tutorial, we load a texture locally. However, because of cross-origin issue for WebGL texture, we must add img.crossOrigin="anonymous" .

Unfortunatly for me, it invokes onerror event.

Here's the code:

const image = new Image();
image.onload = () => {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
    gl.generateMipmap(gl.TEXTURE_2D);
    console.log("Texture loaded.");
};
image.onerror = () => {
    console.log("Texture error!");
}
image.crossOrigin = "anonymous";
image.src = url;

What did I missed?

Answer 1

To load images locally you need to run a server and NOT set image.crossOrigin

I recommend you start with this one or one of the many here