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

Question

我正在尝试通过 url 上传图片，但是当我上传它时，我无法将其设置为纹理。我有这个错误THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded. 但图像已加载。但是当我使用本地图像时，例如 '/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();

Answer 1

在加载前尝试设置loaderImage的crossOrigin：

loaderImage.setCrossOrigin("anonymous");