Why the object above the transmission object?

I was working on a 3D presentation of glasses, with a lot of transparent materials. We used GLTF+PBR material. There is a problem, when the temple moves behind the lens, it actually shows up in front of the lens, but it doesn’t show up in front of the rims. I guess it has something to do with the transparent material of the lens. Does anyone have experience in this issue?

Attached is the GLTF file of glasses frame.zip (3.8 MB)

1 Like

Transparent objects are very sensitive to the order in which they’re rendered (for issues like this), and that is determined by the sorting distance from the camera to the origin of each mesh. Each mesh in this scene has its center at 0,0,0 and so the sorted order is arbitrary.

If you’re able to adjust the model in Blender or other software so that the origin of each mesh is at its geometric center (and each mesh then has non-zero xyz position) I think that would help.

Another option would be to try modifying three.js to sort by an object’s bounding box rather than it’s center, but that’s a bit more advanced.


Yes, Thank you very much for your advise. I change the origin of every mesh, it work well.

This is really clueless and I’m glad to get a valid clue in the community.