Tengo un cubo giratorio básico que hice con react-three-fiber, y onPointerOver (también probé onPointerEnter ) Quiero rotarlo suavemente a su posición inicial a través useSpring . Sin embargo, no solo no lo hace cuando me desplazo, sino que solo lo hará al hacer onClick . Tengo una función totalmente diferente que se ejecuta al onClick , y si deshabilité esa función, el restablecimiento de la rotación falla por completo.

Tengo una configuración bastante simple en mi componente Box :

 export const Box = () => { const [active, setActive] = useState(false); const boxRef = useRef<Mesh>(); const starterRotation = [0, 1, 1]; useFrame(() => { if (boxRef.current) { boxRef.current.rotation.x += 0.01; boxRef.current.rotation.y -= 0.01; } }); const [resetRotation, setSpring] = useSpring(() => ({ rotation: starterRotation })); // trying to use the `set` syntax to call the useSpring and smoothly animate to a certain rotation. const springs = useSpring({ scale: active ? 1.5 : 1, config: config.wobbly }); return ( <animated.mesh // @ts-ignore rotation={resetRotation.rotation} scale={springs.scale} onClick={() => setActive(!active)} onPointerOver={() => setSpring.start()} ref={boxRef} > <boxGeometry args={[2, 1, 2]} /> <meshStandardMaterial color="royalblue" /> </animated.mesh> ); };

Aquí hay un ejemplo en vivo: https://codesandbox.io/s/react-spring-rotating-cube-np4v6

Por lo que puedo decir en sus documentos , esta es la forma correcta. También vi algunas discusiones sobre problemas de github al respecto, y parecía haber cierta preocupación acerca de que el segundo argumento de la deconstrucción useSpring no funcionaba correctamente, pero la rotación funciona para mí: es solo el evento desencadenante que no funcionará.