Describing my current issue.
I have generated a Terrain geometry using a DEM. I am now downloading OSM Tiles to use as textures for this geometry.
Every time a new Tile is downloaded, the callback function processMapImage is triggered:
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);
}
}
While waiting for all Tiles to load, they are stored in myImages array. Once all tiles are loaded, a canvas is created where all tiles are drawn onto it. A texture and material are created, along with the terrain geometry, to finally create a mesh that is added to the scene.
However, the model is only displaying a black surface for my terrain.
Things I have tested so far:
If I use a simple colored Phong texture, everything works fine. This suggests that lighting, geometry, and camera are functioning correctly. When I view my canvas in a browser, all tiles appear in correct order. So the canvas itself seems fine. When I draw different shapes (lines, rectangles) on my canvas, they display correctly as textures on my geometry. So the texturing process appears to be working. It's just the Images that are not displaying properly.
Any suggestions on what could be causing this issue?