javascript - 加载 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之一