React spring仅适用于React三纤维中的Canvas

Question

我不知道为什么，但我的react spring只有在react三纤维中有Canvas时才起作用。

import React from 'react';
import { Canvas } from "@react-three/fiber";
import { useSpring, animated } from "react-spring";
// These are from the react-spring website so It does work.
function LoopTrue() {
const styles = useSpring({
loop: true,
from: { rotateZ: 0 },
to: { rotateZ: 180 },
});
return (
<animated.div
style={{
width: 80,
height: 80,
backgroundColor: "#46e891",
borderRadius: 16,
...styles,
}}
/>
);
}
function Angle() {
const [flip, set] = useState(false);
const props = useSpring({
reset: true,
reverse: flip,
from: { transform: "rotateX(0deg)" },
transform: "rotateX(180deg)",
delay: 200,
onRest: () => set(!flip),
});
return <animated.h1 style={props}>angle</animated.h1>;
}
function Project() {
return (
<>
<Angle/>
<LoopTrue/>
{/* <Canvas></Canvas> */}
</>
);
}

如果我取消注释<Canvas></Canvas>，它可以工作，但如果我注释Canvas，它不工作。我不知道这是否与其他反应路由器dom页面有关。(我在"主页"页面上使用了一些react三纤维帆布，这将是"博客"页面(

救命！

Answer 1

这是react-spring的一个已知错误，请参阅此处

然而，正如问题所描述的那样，解决方法是：

Globals.assign({
frameLoop: 'always',
})

Answer 2

如果您的项目中已经安装了@react three/drei包，则无需单独安装@react spring/three包。