我可以自定义react-three-fiber全局渲染循环吗？

Question

我想在渲染循环中添加延迟，以减少 CPU 负载

在常见的 threejs 中，我可以这样做：

//.ts
    startTime = performance.now()
    ...
    requestAnimationFrame(function render(time: number) {
        if (time - this.startTime > 10) { // 10ms render delay
            this.renderer.render(...)
            this.startTime = performance.now()
        }
        requestAnimationFrame(render)
    })

但是在 react-three-fiber 中，我发现唯一的选择是设置“渲染模式”，比如

//.tsx
<Canvas frameloop="<'always' | 'demand' | 'never'>" ></Canvas>

我需要这样做来减少电池热量。此外，“需求”状态不适合我，因为我需要始终渲染场景。我也知道渐进式 dpr 缩放，这不是我要找的

我试图查看文档和源代码，但没有找到解决方案。也许有人有同样的问题并成功了？

Answer 1

我认为你不应该搞乱毫秒和所有那些时间计算，因为你可能会在意想不到的时间随机丢帧。相反，您应该将框架减半。人们设备上的大多数帧速率是 60FPS。因此，您可以通过仅渲染每隔一帧将其降低到 30FPS：

let skipFrame = false;

function render() {
    // Alternate between true/false
    skipFrame = !skipFrame;

    // Render if not skipping
    if (!skipFrame) {
        this.renderer.render(scene, camera);
    }

    requestAnimationFrame(render);
}