Estoy tratando de agregar una transición de color para mi malla pero no puedo hacerlo con 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 }Esto solo deja mi malla con un color blanco/gris.
En el ejemplo proporcionado aquí , lo usaron de manera similar y no estoy seguro de por qué no funciona. Probé esto cambiando la scale en la propia malla y funcionó.
SpringValues solo se puede aplicar a componentes animated . Tienes tres componentes allí, mesh , planeGeometry y meshBasicMaterial . Ha animado una mesh pero no le está aplicando SpringValues, por lo que es redundante.
Debido a que desea que meshBasicMaterial maneje SpringValue, debe escribirlo así:
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 }Puede ver esto funcionando aquí: https://codesandbox.io/s/react-spring-forked-6qgre?file=/src/App.js