Search code examples
three.js3dreact-three-fiber

Instancing - See Through 3D Objects

I have been trying to instance some tree meshes in react-three-fiber and threejs, this is what i have got so far: https://codesandbox.io/s/silly-sunset-74wmt?file=/src/App.js

The trees from one angle look see through, I am able to see the barks of ALL trees. enter image description here

but the behavior is normal from the opposite angle. enter image description here

To me it seems to be some issue with render order or meshes or the shader, not able to wrap my head around it. I need the see-through thing to not happen and the set should look like how it looks like in the second picture from all angles

Solution

  • As suggested in the comments byDon McCurdy. I needed to use AlphaClip property on blender while exporting my mesh.

    Found an answer here which was quite helpful in understanding the problems with threejs transparency at play

    Updated with the solution: https://codesandbox.io/s/silly-sunset-74wmt?file=/src/App.js