Figuring out basic React-Three-Fiber functionality

[rasmusfredrik]

Hello all,

I am working on a Next JS based app that includes Three and React-Three-Fiber. I am having a few issues that I would like to discuss with someone who has a little bit of experience.

I am using this beautiful effect as the inspiration source and I wanted to make a component in React that looks similar.
https://redstapler.co/cool-nebula-background-effect-three-js/

The first issue I am experiencing is this weird overlapping effect of my meshes. It seems that the transparency is not working fully. I read somewhere that you may have to order your meshes appropriately but not sure if that's the case or how it's done.

I have created a sandbox with the code: https://codesandbox.io/s/jolly-hooks-k7qf3?file=/pages/index.js

[khoneychurch]

There's a few solutions here: https://stackoverflow.com/questions/31037195/three-js-custom-shader-and-png-texture-with-transparency

Looks like if you add depthTest={false} to the meshLambertMaterial on the codesandbox, it should fix the clipping for you