Three.js, Uploading images and use as texture

Question

I am trying to upload image by url, but when i uploaded it, i can not set it as texture. I have this error THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded. But image is loaded. But when i use local images, for example '/static/images/image.png' all works good.

Here is my code

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();

Maybe this Help: https://stackoverflow.com/questions/20693405/user-uploaded-textures-in-three-js — Adson Cicilioti, Mar 31 '18 at 03:54

score 0 · Answer 1 · answered Jun 29 '17 at 10:51

0

Try to set the crossOrigin of the loaderImage before load:

loaderImage.setCrossOrigin("anonymous");

answered Jun 29 '17 at 10:51

Andros Guiradó

23
2
5

now i have this error `Access to Image at 'http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtz…cB1g_zMu46m3Qy2-RBqYG-lIY6SdVI7ZVHT-la8xuvn0MPttJSby3pqvyIg5XfD30vgSYELDI8' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.` – Dmitry Kotelewsky Jun 29 '17 at 13:14
You may be try to change the protocol http to https of the image. – Andros Guiradó Jun 29 '17 at 13:50
Or try with this Chrome extension: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en – Andros Guiradó Jun 29 '17 at 13:51
Chrome extension works, but it is no solution for my problem, users will not install this extension to use app))) how can i fix it? – Dmitry Kotelewsky Jun 29 '17 at 14:31
This extension is for test with your site in localhost. Have you try the app in online server? Should be work. – Andros Guiradó Jun 29 '17 at 15:04
Thanks!. It works if i use https on production server. – Dmitry Kotelewsky Jun 30 '17 at 12:19
I'm sorry, but it is not working. I don't know why it works in past (maybe i forgot switch off Chrome extension), but now i this error if i do not use Chrome extension : `Access to Image at 'https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVt…7cF4n-SP9o2gjQbhqRVla2GnJ46VIQA_ZlyD-VHvxuu808S7tc7NzXFm7iUh4mGdwULQPtyarQ' from origin 'https://d.dev.playersbid.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://d.*********.com' is therefore not allowed access.` – Dmitry Kotelewsky Jul 16 '17 at 14:11

Three.js, Uploading images and use as texture

1 Answers1