CODEWITHSUNDEEP
html3dthree.jswebgl
Ludovic Toinel
Ludovic Toinel

Reputation: 38

WebGL Three.js : Texture alingment on a geometry face

I would like to write text on each faces of an IcosahedronGeometry

I'm able to generate the textures and apply the textures to all the faces : 

for ( var i = 0; i < geometry.faces.length; i ++ ) {
geometry.faces[i].materialIndex = i;
materials.push( new THREE.MeshBasicMaterial( { overdraw: true, map:  getTexture(i), wireframe: true, wireframeLinewidth: 1} ) );
 }

// 3D element   
element = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials) );

However each textures are overwriting the other ... And I can't align them correctly

http://jsfiddle.net/jzbf7/

Any idea ?

Upvotes: 1

Views: 1710

Answers (1)

WestLangley
WestLangley

Reputation: 104833

You need to understand how the UVs are set up for IcosahedronGeometry -- they are very similar to the UVs for SphereGeometry, in which a map of the world will cover the entire sphere.

This is very different from the UVs for CubeGeometry, where the texture maps to each face.

Experiment with the updated fiddle to see for yourself: http://jsfiddle.net/jzbf7/2/ (If the sphere renders too dark, render it again -- the colors are random.)

Also, there is a bug in the IcosahedronGeometry UV map. This can be seen at the "seam".

three.js r.56

Upvotes: 1

Related Questions