仅当元素在视口上时调用 UseFrame

Question

我正在使用来自 react-three-fiber 的 react hook“UseFrame”。然而，这个函数在每一帧都被调用。只有当反应元素在视口内时，有没有办法调用这个回调函数？我应该使用不同的钩子吗？我不希望在每一帧都为那些没有显示在屏幕上的反应元素调用这个“UseFrame”挂钩。

Answer 1

您可以将 useFrame 挂钩包裹在它自己的组件中，然后仅在 canvas 位于视口内时才渲染该组件，如下所示：

import { Canvas, useFrame } from "@react-three/fiber";
import { useInView } from "react-intersection-observer";

function DisableRender() {
  useFrame(() => null, 1000);
}

function App() {
  const { ref, inView } = useInView();
  return (
    <div ref={ref} className="canvasContainer">
      <Canvas>{!inView && <DisableRender />}</Canvas>
    </div>
  );
}