Easiest way to set rendering order for transparent objects


I have a node.js app that generates a three object and passes it to the frontend as a json. Initially this object has no transparency.

I use threejs to visualize this json, which I can successfully load. However, I change the opacity of the object dynamically, and this causes a problem with my rendering as the rendering order is not correct.

I know I should change the rendering order in order to visualize the scene correctly. I should use the scene and the position of my perspective camera. Probably I can achieve this using raycasting.

My question is: what is the easiest way to achieve this rendering order, given the scene and the position of the camera? I cannot find an easy way to achieve a solution for, what looks to me, a very common problem. I would be thankful for an example on the recommended way to solve this problem.


three.js sorts transparent objects automatically for alpha compositing. If you want to define the rendering order manually, consider to use Object3D.renderOrder.

Keep in mind that solving transparency issues can be very tricky. And three.js does not have yet a transparency implementation like OIT that avoids common artifacts resulting from sorting objects.