0

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

Epiczzor
  • 377
  • 2
  • 13
  • 1
    Alpha blending is _very_ sensitive to render order, and won't work well for the scene shown here – particularly with instancing, since three.js doesn't sort instanced objects on the fly. You should get much better results with alpha masking instead of alpha blending here though. If exporting from blender that's an "alpha clip" mode, or `material.alphaTest > 0` in three.js – Don McCurdy Feb 12 '22 at 22:28
  • Using Alpha clip on blender worked! thanks for that! – Epiczzor Feb 15 '22 at 15:44

1 Answers1

0

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

Epiczzor
  • 377
  • 2
  • 13