three.js - blender cube opposite faces become transparent

1
votes

I am new to three.js. I followed the example which used JSONLoader to load model into webGLRenderer scene. The model built on Blender JS exporter is just a cube with different materials on sides. I rotate the cube in every animating scene but the materials blending is so strange when two of the opposite faces overlay. The front face become transparent and I can see the back face only.

I have searched here and here's the similar problem, however without a answer. https://stackguides.com/questions/8638850/three-js-z-sorting

1
3dthree.jsblender
Must be something with depth testing Post your code to jsfiddle.net – JAre
Sorry for late reply. I upload the code on to jsfiddle. Notice that the problem occurs more clearly on the "U" jsfiddle.net/AUjHn – ccouu

1 Answers

0
votes

For some reason one of your object has flipped faces so you can apply negative scale so it will flip them again like so http://jsfiddle.net/AUjHn/1/ I replaced zmesh.scale.set( 100, 100, 100); with zmesh.scale.set( -100, -100, -100); so now blue looks good but red is flipped you need to split models if you want to use this fix. But best way will be fixing faces of the blue object for this you need to change vertex order in the faces of this object http://www.opengl.org/wiki/Face_Culling .