Three.js、画像をアップロードしてテクスチャとして使用する

Question

URLで画像をアップロードしようとしていますが、アップロードしたときにテクスチャとして設定できません。私はこのエラーがありますTHREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.しかし、イメージが読み込まれます。しかし、私がローカルイメージを使用すると、例えば '/static/images/image.png'のようにすべてうまくいきます。負荷前loaderImageのcrossOriginを設定するには、ここ

は私のコードは

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

で試してください：// steamcommunity：

loaderImage.setCrossOrigin("anonymous");