Custom shader stops when using useState hook (r3f + drei)

[drcmda]

@aitor

      <planetMaterial
        ref={planetMaterial}
        vertexShader={planetVertexShader}
        fragmentShader={planetFragmentShader}
        uniforms={{
          uTime: {value: 0},
          uColorStart: {value: new THREE.Color('#ff7400')},
          uColorEnd: {value: new THREE.Color('#451439')},
        }}

uniforms are only applied once, by doing what you do there you would apply them every render, they would become stale. but drei/shaderMaterial is a helper that creates setter/getters, no need to grab into uniforms-foo-value. you also already gave it vertex and fragment shaders, you’re just overwriting stuff that shouldn’t be overwritten.

your animation stops because useFrame is incrementing a stale uTime, which you have overwritten, the new uTime (and the other uniforms) is not actually linked into the gpu shader uniform no more because uniforms are linked in the constructor only.

it is just this:

<planetMaterial ref={ref} uColorStart="red" uColorEnd="#dead00" />

here’s an example of how you should handle shaders:
ThreeJS Journey Portal - CodeSandbox (hint: the exact same as in vanilla threejs)