0

first of all I am a newbie with three.js. I am making a 3D puzzle and need to create several objects that are made up from triangles. The problem is that from a certain angle those triangles appear to be transparent: example 1, example 2. Material for mesh is created like this:

 var materials = [
        new THREE.MeshLambertMaterial( { opacity:0.6, color: 0x44ff44, transparent:false } ),
        new THREE.MeshBasicMaterial( { color: 0x44ff44, wireframe: true } )

    ];

Is there any common cause for this "bug"? Or I should look into my code more because there is something wrong with it?

user435421
  • 859
  • 2
  • 13
  • 31
  • faces have sides - a front side and a back side, by default only front side is visible, you can change that in material by setting side parameter to something else ie `new THREE.MeshBasicMaterial( { color: 0x44ff44, side: THREE.DoubleSide} )` [link to relevant documentation](http://threejs.org/docs/#Reference/Materials/Material) – Derte Trdelnik Nov 28 '15 at 14:32
  • Thank you Derte Trdelnik! While your answer solved my problem @kaigorodov's answer gave me some extra info. Now if you could copy your answer and post it bellow I could mark it as correct. – user435421 Nov 28 '15 at 18:49
  • happy to help, just check that of kaigorodov i dont care that much about rep – Derte Trdelnik Nov 28 '15 at 22:27

1 Answers1

0

Every face (triangle) has a side that will be visible and the second one that will not be visible. To reverse the visibility you may change material's property side - THREE.BackSide - will display backward side instead of usual one. THREE.DoubleSide - will display both. BUT! The true issue is winding order. The visible side of triangle determined by a winding direction in which you have added vertices to your faces. Which means invisible triangles has backward direction from the one you need. In example (very primitive actually):

...
object.vertices.push(new THREE.Vector3(1,1,1)); // vertex index 0
object.vertices.push(new THREE.Vector3(2,2,2)); // vertex index 1
object.vertices.push(new THREE.Vector3(3,3,3)); // vertex index 2
object.faces.push( new THREE.Face3(0,1,2) );
...

to reverse visible side of triangle you need to change the following line to:

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

So you just need to find broken triangles and reverse vertices order.

kaigorodov
  • 877
  • 9
  • 15