Question

我把这个codepen做成了website。我的问题是，它在Nexus 5X手机上的Chrome浏览器上的运行速度非常慢，但是当我将屏幕旋转到水平视图或查看CodePen时，它又能平稳运行。

我尝试反转宽度和高度以查看是否为屏幕/窗口高度问题，并且尝试将高度降低很多，但仍然相同。

请问那些在Webgl或3方面有更丰富经验的人给我解释一下吗？

function init() {

    scene = new THREE.Scene();
    height = window.innerHeight;
    width = window.innerWidth;
    aspectRatio = width / height;

  // ...
 }

Answer 1

您可能需要在渲染循环中包含一些调整大小的逻辑，因为加载后（例如，旋转时）初始窗口大小可能会发生变化。如果窗口大小发生变化，但渲染器未调整大小，则渲染器将进行渲染到不直观的帧缓冲区大小，并且在尝试将输出缩放到实际显示时可能会导致问题。

编辑：

我只是在猜测。：D您会说好话...

我确实看到index.js的TODO第36行..这可能会导致问题..除此之外，其他所有内容在我看来都是合法的。

调整大小逻辑可能很棘手，因为根据CSS等设置渲染器大小，可能会导致病理级联调整大小，因为设置渲染器大小会更改相机大小，这可能会导致布局更改..在某些奇怪的情况下会导致不断发生小的调整大小。

检查这是否有问题的另一种方法是，只需将渲染器的init设置为固定大小的正方形，例如256x256之类的东西，然后注释掉window.resize监听器。看看性能是否在旋转中保持一致...顺便说一句，我想我在我的Galaxy S5上看到了这个问题。.在水平模式下，它的超级液体但是在垂直模式下..似乎有点毛病。

Answer 2

嘿，您在代码中完全使用PMREMGenerator吗？我已经注意到，使用它生成人像模式的手机上的环境地图确实很麻烦

在手机的垂直屏幕上Three.js变慢

2 个答案: