当HTML Canvas与drawImage结合使用时，将呈现空白纹理

Question

我正在尝试从URL加载图像并将其绘制到用作纹理输入的画布上。我已经在https://jsfiddle.net/9Louwn87/25/上实现了这一点。我已使用以下片段加载图像并创建纹理

var img = new Image();
    img.onload = function() {
      canvas.width = size;
      canvas.height = size;
      ctx.drawImage(this, 0, 0, size, size);
      if(texture)
      {
        texture.needsUpdate = true;          
      }
    };
    img.src = "https://threejsfundamentals.org/threejs/resources/images/wall.jpg";
    texture = new THREE.Texture(canvas);

[任何人都可以指出我的错误。

Answer 1

问题可能是，由于您是自己加载图像，并且是从另一个域加载图像，因此您需要请求权限才能使用该图像。

    var img = new Image();
    img.onload = function() {
      canvas.width = size;
      canvas.height = size;
      ctx.drawImage(this, 0, 0, size, size);
      if(texture)
      {
        texture.needsUpdate = true;          
      }
    };
    img.crossOrigin = 'anonymous'; // ----------- Add this line
    img.src = "https://threejsfundamentals.org/threejs/resources/images/wall.jpg";
    texture = new THREE.Texture(canvas);