Material Transparency problem

Questions
1

I have been trying to make an app using phong material with some transparency, but when the mesh is rotated in certain angle the objects behind disappear, has anyone have had the same issue?, this is the material parameters that I am using:
…

 var mat = new THREE.MeshPhongMaterial();
if (color != undefined) mat.color = new THREE.Color(color);
if (texture != undefined &&  texture != "" && texture != null) mat.map = new THREE.TextureLoader().load(texture);
mat.opacity=.5;
mat.side = THREE.DoubleSide;
mat.transparent=true;

**I’m I missing something?

2

That’s because WebGL does not draw triangles that are hidden behind other objects. Right now, it thinks that they are occluded behind the large plane, so it’s hiding them.

In order to override this behavior, you must make sure your transparent plane doesn’t write to the depthMap, that way it doesn’t “hide” anything behind it. Just add this line:

mat.depthWrite = false;

Read more about depthWrite in the docs.

6 Likes
3

This is not true. WebGL would clip something if the draw order is incorrect. Three.js tries to sort objects and the geometry shapes prevent it from being sorted correctly.

4

Thanks for your time, I added “mat.depthWrite = false;” and now it disappear the “floor” and still the same issue.

Is there a way to fix this or is just how it works?

5

Three.js uses depth sorting to order shapes. If the origin of one shape is further from the camera than the origin of another shape, then the first shape is considered “behind” the second shape, even if its geometry is defined otherwise.

In the diagram below, Circle2’s origin is centered within its geometry, but Circle1’s geometry is offset from its origin, such that it appears closer to the camera than Circle2. But when three.js depth-sorts the scene, Circle2 will be evaluated as closer because its object origin (not its geometric center) is closer to the camera.

Untitled

5 Likes
6

Quite confusing to me, but make sense…

I’ll see what I can do with my project.Thanks a lot,

7

Hello guys, just wanted to pop in and say thanks. I’m a noob to three.js and programming in general, and setting depthWrite=false on materials used on 2d plane meshes made the transparent box around the texture “disappear”. Solved a number of visual bugs I was having. Thanks again!!!

1 Like
8

For me “renderOrder” order did the trick like this:

mesh_to_be_placed_at_the_back.renderOrder = 1;
mesh_to_be_placed_in_front.renderOrder = 2;

3 Likes