Three.js 性能问题

Question

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

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

任何帮助将不胜感激！

Answer 1

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

大多数 Macbook 的视网膜显示器的像素比为 2，但有些设备可以 go 高达 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。

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

var skipFrame = false;

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

    skipFrame = !skipFrame;
    requestAnimationFrame(animate);
}