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.Geometry();

var top0 = new THREE.Vector3(aqua_ground_geo_x_NEG, user_data['aqua_soil_calc_b_y'], aqua_ground_geo_z_NEG);
var top1 = new THREE.Vector3(aqua_ground_geo_x_POS, user_data['aqua_soil_calc_b_y'], aqua_ground_geo_z_NEG);
var top2 = new THREE.Vector3(aqua_ground_geo_x_NEG, user_data['aqua_soil_calc_f_y'], aqua_ground_geo_z_POS);

aqua_ground_geo.vertices.push(top0);
aqua_ground_geo.vertices.push(top1);
aqua_ground_geo.vertices.push(top2);

aqua_ground_geo.faces.push( new THREE.Face3(0,1,2) );

aqua_ground_geo.computeFaceNormals();
aqua_ground_geo.computeVertexNormals();

var textureUrl = "http://www.lifeguider.de/wp-content/uploads/aquag/bodengrund/dennerle_kies_naturweiss_1-2mm.jpg";
var aqua_bodengrund_tex = new THREE.TextureLoader().load( textureUrl );
var aqua_bodengrund_mat = new THREE.MeshLambertMaterial( {
    map: aqua_bodengrund_tex,
    color: 0xffffff,
} );
aqua_bodengrund_mat.shading = THREE.FlatShading;
aqua_bodengrund_mat.side = THREE.DoubleSide;

var aqua_bodengrund = new THREE.Mesh( aqua_ground_geo,aqua_bodengrund_mat);

On a simple THREE.BoxGeometry all works as expected with the same material (it represents the cube in the picture above):

var lala = new THREE.BoxGeometry( 100, 100, 100 );
var lala2 = new THREE.Mesh( lala,aqua_bodengrund_mat);

I'm not an expert in 3D, what is missing in my code that the image texture will be shown correctly?

score 1 · Accepted Answer · edited Aug 10 '18 at 10:29

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...

edited Aug 10 '18 at 10:29

xxx

1,153
1
11
23

answered Jun 15 '16 at 08:41

Wilt

41,477
12
152
203

Thanks for reply. I've just set up a duplicate of the fiddle. I've just replaced `THREE.BoxGeometry();` with `THREE.Geometry();` and added my already used sample code and the texture map stops working again. **[fiddle](https://jsfiddle.net/Qashi/vs284Lna/)** – Marc R. Jun 15 '16 at 20:29
Ok the idea with the need of UV coordinates was the last sentence in my initial question, which was removed for some typo tuning ... Finaly you got me the answer to success. So, many many thanks, Wilt! – Marc R. Jun 17 '16 at 22:36

THREE.js Geometry map does not appear

1 Answers1

UPDATE

Linked