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的视网膜显示器，但有些设备的像素比可以达到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帧的速度渲染，而不是60帧，以节省访问者的电池寿命：

var skipFrame = false;
animate() {
if (!skipFrame) {
renderer.render(scene, camera);
}
skipFrame = !skipFrame;
requestAnimationFrame(animate);
}