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.
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