三、js canvasTexture 的问题

问题描述

这是我的问题。

我从 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 纹理时一切正常，所以闪电、几何、相机都很好。 当我在浏览器中显示我的画布时，所有图块都在那里并且顺序正确。所以画布没问题。 当我在画布上绘制其他东西（线条、矩形）时，它将正确显示为几何图形上的纹理。所以纹路没问题。只有我的图片不起作用。

任何想法，有什么问题？

解决方法

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

我必须添加

            img.crossOrigin = "anonymous";

到我创建的图像以启用 CORS。