Making customMaterial react to a light

[5ervant]

Please check the "/src/components/Text.js" file of this CodeSandbox:
https://codesandbox.io/embed/r3f-moksha-f1ixt

I'm using that on my 3D scene but with a higher height.

function Text({
  // ...
  color = 'black',
  height = 150,
  // ...
    <group {...props} scale={[size, size, 0.1]}> // Line 30
      <mesh geometry={geom} onUpdate={onUpdate} frustumCulled={false}>
        <customMaterial ref={ref} attach="material" color={color} transparent opacity={opacity} />
        <meshNormalMaterial attach="material" color={color} />
      </mesh>
    </group>

As you can see, I've added <meshNormalMaterial attach="material" color={color} />, unfortunately any color would not work, but it's reacting to lights.

If I remove meshNormalMaterial, color would work but without any highlighting reactions on the lights.

// Lights
<ambientLight intensity={2} />
<pointLight position={[40, 40, 40]} />

Any tips how can I make the "/src/components/Text.js" component of https://codesandbox.io/embed/r3f-moksha-f1ixt react to a light?

[drcmda]

you need shader-lib chunks for light. you will find it on stackoverflow or threejs discussion forums. same goes for shadows, fog, instancing, etc. everything that's more than a pixel color needs these chunks. you can also dig into threejs source for light responsive materials and copy it from there.

[5ervant]

I couldn't find an actual example.
It looks like custom shading is lower than my knowledge.

Do you think we can simply make the https://codesandbox.io/embed/r3f-gltf-fonts-c671i "/src/Text.js" component's color changeable because as you can see the parameter color have no use?

The only reason why I use the https://codesandbox.io/embed/r3f-moksha-f1ixt "/src/components/Text.js" component is because I thought it will also react to lights as the https://codesandbox.io/embed/r3f-gltf-fonts-c671i "/src/Text.js" component.