三、js canvasTexture的问题

Question

这是我的问题。

我从 DEM 制作了地形几何学。现在我下载了一些 OSM-Tiles 将它们用作我的几何体的纹理。

每次有新的Tile到来，我的回调processMapImage就会被调用：

function processMapImage( img, y, x)
{
myImages[y][x] = img;
myTilesToLoad--;
    
if( myTilesToLoad == 0)
    {
    var tilesy = myImages.length;
    var tilesx = myImages[0].length;
    canvas = document.createElement('canvas');
    canvas.width  = 256*tilesx;
    canvas.height = 256*tilesy;
    ctx = canvas.getContext('2d');
    for( y = 0; y < tilesy; y++)
        {
        for( x = 0; x < tilesx; x++)
            ctx.drawImage( myImages[y][x], 256*x, 256*y, 256, 256);
        }
    tex = new THREE.CanvasTexture( canvas);
    mat = new THREE.MeshPhongMaterial( { map: tex});
    var mesh = new THREE.Mesh( myTerrainGeometry, mat);
    mesh.rotateX( -Math.PI/2);
    scene.add( mesh);
    }
}

只要不是所有的 Tiles 都被加载，我就将它们存储在 myImages 中。加载所有图块后，我创建一个画布并将所有图块绘制到该画布上。然后我创建纹理、材质，最后与我的地形几何一起创建网格并将其添加到场景中。

但是模型只显示了我地形的黑色表面。

到目前为止我已经测试过：

当我使用简单的彩色 phong 纹理时，一切都很好，所以闪电、几何、相机都很好。 当我在浏览器中显示我的画布时，所有图块都在那里并且正确排序。所以画布没问题。 当我在画布上绘制其他东西（线条、矩形）时，它将正确显示为几何体上的纹理。所以纹理没问题。只有我的图片不起作用。

任何想法，可能有什么问题？

Answer 1

我找到了解决问题的方法。

我必须添加

            img.crossOrigin = "anonymous";

为了启用 CORS。