三.js性能问题答案

【问题标题】：Three.js performance issue三.js性能问题
【发布时间】：2020-04-23 03:47:46
【问题描述】：

我使用 react-three-fiber 进行了这个相当简单的场景设置，这让我的 macbook 像疯了一样旋转，我不确定它是否是实现，或者这是否应该是这样的资源密集型：

https://codesandbox.io/s/busy-feynman-gub0i?file=/src/Three.js

任何帮助将不胜感激！

【问题讨论】：

我经常注意到codesandbox分配了大量的资源。如果您在 Web 服务器上本地运行代码，是否也会发生过热？
是的，它在本地和codesandbox上发生的相同。

标签： javascript reactjs performance three.js

【解决方案1】：

我很确定设置 gl.setPixelRatio(window.devicePixelRatio) 是导致 Macbook 过热的原因。

大多数 Macbook 的视网膜显示器的像素比为 2，但 some devices can go up to 4！例如，假设您正在渲染一个 1024x768 的视口：

- Pixel ratio 1: 1024 x 768  = 786,432 pixels
- Pixel ratio 2: 2048 x 1536 = 3,145,728 pixels
- Pixel ratio 3: 3072 x 2304 = 7,077,888 pixels

比率 2 是每帧渲染像素数的四倍，比率 3 几乎是原始像素数的 10 倍。这在智能手机上也是一个大问题；访问具有如此多电池消耗的站点可以在几分钟内耗尽它。我建议保持像素比为默认值 1。

有时，如果我需要渲染微妙的背景动画，我喜欢跳过每隔一帧以 30 fps 而不是 60 帧的速度渲染，以节省访问者的电池寿命：

var skipFrame = false;

animate() {
    if (!skipFrame) {
        renderer.render(scene, camera);
    }

    skipFrame = !skipFrame;
    requestAnimationFrame(animate);
}

【讨论】：

谢谢，跳过每 2 帧可以显着减少负载，同时保持原生像素比。