A-Frame相机与具有大量元素的场景中的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. 使用带有WASD控件的默认摄像头在场景中滚动多达60,000个立方体。使用.setObject3D方法生成多维数据集，该方法将动态生成的元素注册到A-Frame。
2. 使用带有WASD控件的默认摄像头在场景中滚动多达60,000个立方体。使用three.js object3D.add方法生成多维数据集，该方法不会将动态生成的元素注册到A-Frame。
3. 使用three.js轨道控制相机在场景中滚动多达60,000个立方体。使用three.js object3D.add方法生成多维数据集。此方案类似于方案＃2。

问题：虽然所有3个方案加载速度非常快。场景＃3在滚动时始终表现良好。场景＃1和＃2有时会出现“锯齿状”＃39;图像刷新。

有关使用方案＃1实现方案＃3的性能的任何建议吗？

Answer 1

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

这种策略对VR没有帮助，无论如何都需要以90 FPS重新渲染（因为HMD总是在移动）。所以不幸的是，在A-Frame中没有办法做同样的事情。

如果要渲染大量类似对象，您可以做的是instancing或merging geometry来减少绘制调用。