为 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 or one of the many here

开始

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

Load an image for WebGL texture but failed because of CORS

javascript

cross-domain

webgl