<shaderMaterial /> usage

[borisghidaglia]

Hello everyone 👋

Disclaimer: I'm new to Three.js, React Three Fiber, etc...

• three version: 0.151.3
• @react-three/fiber version: 8.12.0

Problem description:

I was trying to reproduce one of the example from this course, but couldn't.

Maybe I missed something, but I <shaderMaterial /> don't seem to work the same in my example and in the course example.

Relevant code:

Here is a sandbox with as little code as possible.

With <meshBasicMaterial /> the mesh is displayed, but with <shaderMaterial /> it is not.

Here is the simplest and closest sandbox from the course. <shaderMaterial /> works.

What I noticed:

My <shaderMaterial /> is typed ThreeElements.shaderMaterial whereas the <shaderMaterial /> from the cours is typed JSX.IntrinsicElements.shaderMaterial.

Thank you for your help 🙏

[borisghidaglia]

As @jrabramson suggested on discord (thanks 🙏), removing the mesh rotation makes it appear.

It's because three.js side prop default is THREE.FrontSide.

If you don't want to remove or tweak the mesh rotation because for some reason you want both sides rendered, you can set side to THREE.DoubleSide.