THREE.js Geometry map does not appear

Question

Following I\'m loading a image map on a custom geometry, it represents the brown colored geometry on the picture above:

var aqua_ground_geo = new THREE.         


        

Answer 1

You need to apply the texture in the callback of the THREE.TextureLoader. Check also the documentation here; the second argument (onLoad) is the callback.

var textureUrl = "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/crate.gif";
var aqua_bodengrund_mat = new THREE.MeshLambertMaterial( {
    color: 0xffffff
});
var onLoad = function( texture ){
    aqua_bodengrund_mat.map = texture;
    aqua_bodengrund_mat.needsUpdate = true;
}
var loader = new THREE.TextureLoader();
loader.load( textureUrl, onLoad );

See this fiddle for a demo.

---

UPDATE

In case you have a custom geometry you also need to calculate the UVs for showing the texture correctly. I used this answer here to calculate them in another fiddle here

Note. The UVs in my fiddle are calculated for faces in the XY plane, if your faces are in another plane you will have to update accordingly...