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

Question

我正在阅读有关WebGL（link）的教程。在本教程中，我们在本地加载纹理。但是，由于WebGL纹理的跨域问题，我们必须添加img.crossOrigin="anonymous"。

很不幸，它会调用onerror事件。

代码如下：

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;

我错过了什么？

Answer 1

要在本地加载图像you need to run a server and NOT set image.crossOrigin

我建议您以this one或众多here之一开始