如何自定义react-three-fiber全局渲染循环？添加延迟降低CPU负载

要在react-three-fiber中实现类似原生Three.js的渲染间隔控制，你可以通过useFrame钩子结合时间戳判断来手动控制渲染时机，具体实现如下：

实现步骤 #

1. 将Canvas的frameloop设为'always'，保证循环持续运行；
2. 使用useRef存储上次渲染的时间戳，避免组件重渲染时重置状态；
3. 在useFrame中对比当前时间与上次渲染时间，达到设定间隔后才执行场景更新与渲染操作。

代码示例 #

import { Canvas, useFrame, useThree } from '@react-three/fiber';
import { useRef } from 'react';

function ControlledRenderScene() {
  // 存储上次渲染的时间戳
  const lastRenderTime = useRef(performance.now());
  // 获取Three.js渲染器实例
  const { gl } = useThree();

  useFrame((state) => {
    const currentTime = performance.now();
    // 设定10ms的渲染间隔，可根据需求调整
    if (currentTime - lastRenderTime.current > 10) {
      // 在这里执行你的场景更新逻辑（比如物体动画、相机控制等）
      // 示例：让立方体旋转
      state.scene.children[0].rotation.x += 0.01;
      state.scene.children[0].rotation.y += 0.01;

      // 手动触发渲染
      gl.render(state.scene, state.camera);
      // 更新上次渲染时间
      lastRenderTime.current = currentTime;
    }
  });

  return (
    <>
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="hotpink" />
      </mesh>
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} />
    </>
  );
}

export default function App() {
  return (
    <Canvas frameloop="always">
      <ControlledRenderScene />
    </Canvas>
  );
}

方案说明 #

• 相比原生Three.js的实现，这里利用react-three-fiber的useFrame钩子接入渲染循环，同时通过useThree获取渲染器实例手动触发渲染；
• frameloop="always"确保循环持续运行，但我们通过时间判断跳过了大部分不必要的渲染帧，有效降低CPU占用和电池消耗；
• 如果你不需要在间隔内执行任何场景更新逻辑，也可以直接跳过更新步骤，只在满足条件时调用gl.render。

内容的提问来源于stack exchange，提问作者Den Kravchu