react-spring/three not working for mesh color

Question

I am trying to add a color transition for my mesh but am unable to do so with react-spring

Scene.js

import { useSpring, animated } from '@react-spring/three'

const Cell = () => {
  const [hovered, hover] = useState(false);
  const springs = useSpring({ color: hovered ? 'hotpink' : 'orange'})

  <animated.mesh
   onPointerEnter={(e) => {
        e.stopPropagation();
        hover(true);
      }}
      onPointerLeave={(e) => {
        e.stopPropagation();
        hover(false);
      }}
   >
    <planeGeometry args={[1, 1, 1]} />
    <meshBasicMaterial color={springs.color} />
  </animated.mesh
}

This just leaves my mesh with a white/grey color.

In the example provided here they used it in a similar way and I am unsure why it does not work. I have tested this by changed scale on the mesh itself and it worked then.

Answer 1

SpringValues can only be applied to animated components. You have three components there, mesh , planeGeometry and meshBasicMaterial . You've animated mesh but you're not applying SpringValues to it so that's redundant.

Because you want the meshBasicMaterial to handle the SpringValue you should write it like so:

const Cell = () => {
  const [hovered, hover] = useState(false);
  const springs = useSpring({ color: hovered ? 'hotpink' : 'orange'})

  return <mesh
   onPointerEnter={(e) => {
        e.stopPropagation();
        hover(true);
      }}
      onPointerLeave={(e) => {
        e.stopPropagation();
        hover(false);
      }}
   >
    <planeGeometry args={[1, 1, 1]} />
    <animated.meshBasicMaterial color={springs.color} />
  </animated.mesh
}

You can see this working here – https://codesandbox.io/s/react-spring-forked-6qgre?file=/src/App.js