React-spring 仅适用于 react-three-fiber 中的 Canvas答案

【问题标题】：React-spring only works with Canvas in react-three-fiberReact-spring 仅适用于 react-three-fiber 中的 Canvas
【发布时间】：2021-12-18 01:38:37
【问题描述】：

我不知道为什么，但我的 react-spring 仅在有来自 react-three-fiber 的 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，它就不起作用。我不知道这是否与其他 react-router-dom 页面有关。（我在“主页”页面中使用了一些 react-three-fiber Canvas，这将是“博客”页面）

救命！

【问题讨论】：

标签： javascript reactjs three.js react-spring react-three-fiber

【解决方案1】：

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

但是，正如问题描述的那样，解决方法是这样的：

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

【讨论】：