Hey All,
I am trying to have a 360° 3D viewer, but there is this blending issue.
Tha frame has semi transparent elements, so the material has a lower alpha value and Alpha Blending ON in Blender. After export to a GLB file.
I understand that the rendering happen based on the pivot of each mesh. With this it looks good from front, but then it breaks from side and back.
Is there any way to make it work? Or as long as it is alpha blend sorted the problem will exist.
Is there an alternative? Like z buffer?
Thanks a lot!
Have you tried adjusting the draw order of your model’s parts to have the transparent elements rendered from back to front relative to the camera? Sometimes that works. You could also split the model into opaque and transparent sections. Render opaque parts first, followed by transparent ones to minimize sorting issues.
1 Like
(yes… and by default threejs does break .transparent=true and .transparent=false into 2 passes…) .transparent = false is sorted front to back, and .transparent=true is sorted back to front… but in this example it looks like everything is .transparent=true, so as @VictorHurtado indicated, perhaps manually sorting them into 2 passes via renderOrder could fix things up.
so the frames themselves could be set to .renderOrder = 5; and the lenses .renderOrder = 6; to ensure lenses are always drawn second.
Thanks both of you. Sorry I am just a 3D designer. Is it something you set in Blender (I save GLB) and other 3D programs or more related to how threeJS handles materials and mesh therefore it is in code?
