A帧相机与three.js摄像机在大元素场景中的性能

Question

以下代码压力测试3种方案：https://codepen.io/ubermario/pen/QqWQPa

...
    this.el.setObject3D(objName, cubeObj);  //register to A-Frame; accessible with this.el.getObject3D(objName)
...

1. 滚动浏览多达60,000立方体在一个场景中使用的默认相机与WASD控制。用.setObject3D方法生成多维数据集，该方法将动态生成的元素注册到A帧.
2. 滚动浏览多达60,000立方体在一个场景中使用的默认相机与WASD控制。多维数据集是使用three.js object3D.add方法生成的，该方法不将动态生成的元素注册到A帧。
3. 在使用three.js轨道控制摄像头的场景中滚动浏览多达60000个立方体。用three.js object3D.add方法生成多维数据集。这个场景类似于场景#2。

问题：虽然所有3种场景都加载得非常快。场景3在滚动时始终表现良好。场景1和2有时会出现“锯齿”图像刷新。

有什么建议可以达到场景3和场景1的性能吗？

Answer 1

您所看到的是，在示例3中，OrbitControls管理render()循环。因此，只有当滚动轮实际移动时，它才会决定渲染，并且可以使事情变得更流畅。您可以通过在render函数中添加console.log('render')来测试这一点，并看到它只在滚动时打印。

这一策略在虚拟现实中没有帮助，无论发生什么，你都需要在90 FPS重新渲染(因为HMD总是在移动)。所以不幸的是，在A帧中没有办法做同样的事情。

如果呈现大量相似的对象是一个目标，那么您可以做的是使用例举或合并几何来减少抽签调用。