Javascript Three.js，上传图像并用作纹理

我试图通过url上传图像，但当我上传它时，我无法将其设置为纹理。我有此错误

THREE.WebGLState:DomeException:未能在“WebGLRenderingContext”上执行“texImage2D”：可能无法加载受污染的画布。

但已加载图像。但是当我使用本地图像时，例如“/static/images/image.png”都很好用

这是我的密码

initPlate() {
    const loaderImage = new THREE.ImageLoader();
    loaderImage.load(
        // resource URL
        'http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgposem2LFZfwOP3ZTxS6eOlnI-Zg8j-JrXWmm5u5cB1g_zMu46m3Qy2-RBqYG-lIY6SdVI7ZVHT-la8xuvn0MPttJSby3pqvyIg5XfD30vgSYELDI8',
        // Function when resource is loaded
        (image) => {
            const geometry = new THREE.PlaneGeometry(plateHeight, plateWidth, 1, 1);
            const geometryBackground = new THREE.PlaneGeometry(plateHeight + 20, plateWidth + 20, 1, 1);

            const texture = new THREE.Texture(image);
            texture.needsUpdate = true;


            const material = new THREE.MeshBasicMaterial({
                map: texture,
                transparent: true,
                opacity: plateOpacity + 0.2
            });
            const materialBackGround = new THREE.MeshBasicMaterial({
                color: 0xffffff,
                transparent: true,
                opacity: plateOpacity
            });
            material.map.needsUpdate = true;

            const mesh = new THREE.Mesh(geometry, material);
            const meshBackground = new THREE.Mesh(geometryBackground, materialBackGround);

            const group = new THREE.Group();
            group.add(meshBackground);
            group.add(mesh);
            console.log(meshBackground.position.z -= 1);

            group.position.x = positionX;
            group.position.y = positionY;
            group.position.z = positionZ;

            group.animationRuleX = !!this.randomInteger(0, 1);
            group.animationRuleY = !!this.randomInteger(0, 1);
            group.animationRuleZ = !!this.randomInteger(0, 1);
            group.animationSpeedX = this.randomInteger(1, radiusSpeedX);
            group.animationSpeedY = this.randomInteger(1, radiusSpeedY);
            group.animationSpeedZ = this.randomInteger(1, 1000);

            scene.add(group);

            this.plates.push(group);
        },
        function (xhr) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },
        function (xhr) {
            console.log('An error happened');
        }
    );
}

animate() {
    this.plates.forEach(mesh => {

        if (mesh.position.x > radiusX || mesh.position.x < -radiusX) {
            mesh.animationRuleX = !mesh.animationRuleX;
        }

        mesh.position.x += 0.001 * (mesh.animationRuleX ? 1 : -1) * mesh.animationSpeedX;

        if (mesh.position.y > radiusY || mesh.position.y < -radiusY) {
            mesh.animationRuleY = !mesh.animationRuleY;
        }

        mesh.position.y += 0.001 * (mesh.animationRuleY ? 1 : -1) * mesh.animationSpeedY;
    })
}

loop = () => {
        // mesh.rotation.x +=0.01;
        this.animate();
        renderer.render(this.scene, this.camera);
        requestAnimationFrame(loop);
    };

    loop();

initPlate（）{
const loaderImage=new THREE.ImageLoader（）；
loaderImage.load(
//资源URL
'http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgposem2LFZfwOP3ZTxS6eOlnI-Zg8j-JrXWmm5u5cB1g_zMu46m3Qy2-RBqYG-lIY6SdVI7ZVHT-la8xuvn0MPttJSby3pqvyIg5XfD30vgSYELDI8',
//加载资源时的函数
（图片）=>{
常数几何=新的三个平面几何（板材高度、板材宽度、1、1）；
const geometryBackground=新的三个平面几何图形（板材高度+20，板材宽度+20,1,1）；
常量纹理=新的三个纹理（图像）；
texture.needsUpdate=true；
常量材质=新的三网格基本材质({
贴图：纹理，
透明：是的，
不透明度：不透明度+0.2
});
const materialBackGround=新的三网格基本材质({
颜色：0xffffff，
透明：是的，
不透明度：平板不透明度
});
material.map.needsUpdate=true；
常量网格=新的三个网格（几何体、材质）；
const meshBackground=新的三个网格（geometryBackground、materialBackGround）；
const group=new THREE.group（）；
添加组（背景）；
组。添加（网格）；
console.log（meshBackground.position.z-=1）；
组位置x=位置x；
组位置y=位置y；
组位置z=位置z；
group.animationRuleX=！！this.randomInteger（0,1）；
group.animationRuleY=！！this.randomInteger（0,1）；
group.animationRuleZ=！！this.randomInteger（0,1）；
group.animationSpeedX=this.randomInteger（1，radiusSpeedX）；
group.animationSpeedY=this.randomInteger（1，radiusSpeedY）；
group.animationSpeedZ=this.randomInteger（11000）；
场景。添加（组）；
本.板.推（组）；
},
函数（xhr）{
log（（xhr.loaded/xhr.total*100）+'%loaded'）；
},
函数（xhr）{
log（“发生错误”）；
}
);
}
制作动画（）{
此.plates.forEach（网格=>{
if（网格位置x>半径x | |网格位置x<-半径x）{
mesh.animationRuleX=！mesh.animationRuleX；
}
mesh.position.x+=0.001*（mesh.animationRuleX？1:-1）*mesh.animationSpeedX；
if（mesh.position.y>radiusY | | mesh.position.y<-radiusY）{
mesh.animationRuleY=！mesh.animationRuleY；
}
mesh.position.y+=0.001*（mesh.animationRuleY？1:-1）*mesh.animationSpeedY；
})
}
循环=（）=>{
//网格旋转.x+=0.01；
这个。动画（）；
renderer.render（this.scene，this.camera）；
请求动画帧（循环）；
};
loop（）；

尝试在加载前设置加载图像的交叉原点：

loaderImage.setCrossOrigin("anonymous");

---

现在我有这个错误

在'http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtz…cB1g_zMu46m3Qy2-RBqYG-LIY6SDVI7ZVT-LA8xUVN0MPTTJSBY3QVYIG5xFD30VGSYLEDI8“从原产地”http://localhost:3000'已被CORS策略阻止：请求的服务器上不存在'Access Control Allow Origin'标头资源。起源'http://localhost:3000因此，不允许访问。

您可以尝试将映像的协议http更改为https。或者尝试使用此Chrome扩展：Chrome扩展可以工作，但无法解决我的问题，用户不会安装此扩展以使用应用程序（））如何修复它？此扩展用于在localhost中对您的站点进行测试。您在在线服务器上试用过该应用程序吗？应该是工作。也许这有帮助：