在 Three.js 中加载大量对象的最快方法？答案

【问题标题】：Fastest method to load a large number of objects in Three.js?在 Three.js 中加载大量对象的最快方法？
【发布时间】：2013-04-08 21:36:58
【问题描述】：

我目前正在探索在 Three.js 中优化加载/生成大量对象的时间的方法。这些对象的输入是构成 2D 足迹的各个顶点。

我使用的初始方法是从各个顶点创建THREE.Shape 对象，然后使用THREE.ExtrudeGeometry 将2D 形状拉成3D 对象。对所有对象执行此操作大约需要 3500 毫秒。

我探索的第二种方法是使用JSON model format 将生成的 3D 对象（从前一种方法）预导出到 JSON 文件中，然后在需要时导入该 JSON 文件，而不是在运行时生成对象。仅此 JSON 表示的导入和加载大约需要 3800 毫秒，这比在运行时生成对象要长！

我想知道在 Three.js 中加载/生成对象的最快方法是什么。我不知道如何加快THREE.Shape 和挤压方法的速度，而且我不确定为什么 JSON 导入方法如此缓慢（我认为预先生成几何图形会节省很多时间）。

还有其他方法可以加快速度吗？

【问题讨论】：

自定义数组缓冲区下载到缓冲几何？ threejs.org/examples/webgl_buffergeometry.html
谢谢本。我以前见过缓冲几何的东西，但对它们的了解还不够，无法实际使用它们。你知道在这种情况下缓冲几何会更快吗（在我花费大量时间学习它/构建解决方案之前）？
它肯定是一个狡猾的野兽，因为它的原始顶点和索引而不是对象。不确定什么会更好地在客户端或通过网络构建 BufferedGeomerty，但 JSON 非常冗长，因此如果您发送 12.345679091 的浮点数，即 12 个字节加上逗号等。作为 Float32Array，将是 4 个字节。对于加载，它已经采用 gfx 卡的格式（忽略可能的字节顺序问题），因此在网络流量之后，您的加载或多或少已完成。而对象构造必须创建大量 js 对象，然后从中创建要加载的缓冲区。
没有说它是正确的方法，也不是一个快速的改变，这就是为什么我没有建议它作为答案:-)

标签： three.js webgl

【解决方案1】：

我对你的结果一点也不感到惊讶。我敢打赌，自定义几何图形也会占用更大的内存...

BufferedGeometry 肯定会加快加载自定义几何图形。但我不确定你会比动态生成几何图形更快。生成的好处是您可以为过程设置动画，以便用户看到场景在他们面前栩栩如生。您可以分解您的自定义几何体并执行类似于我们在 Verold Studio 中加载多部分对象时所做的操作，以提供类似的效果，但您将对生成的场景拥有更多控制权。

我还建议您在基准测试中查看内存、CPU 和网络速度。针对您的特定配置进行优化可能会导致您走上一条获得出色性能的道路，但对您的用户却不是。在方法上肯定存在权衡，您可以在服务器上进行更多的预计算以换取更多的网络流量等。确保您独立测量所有因素 - 而不仅仅是配置的速度。

【讨论】：