Three.js合并几何体非常缓慢。

Question

我正在学习Three.js，并发现文档有些难以理解（到处都是“待办事项”）。

我只是想在屏幕上显示50,000至500,000个红色球体。这段代码有点像Mr. Doob的城市示例（http://www.mrdoob.com/lab/javascript/webgl/city/01/）。唯一的区别是我的代码非常慢，甚至某些情况下会使Chrome死机（在MBP retina上）：

moleculeGeometry = new THREE.Geometry()
sphereGeometry = new THREE.SphereGeometry 0.7, 6, 6
sphereMaterial = new THREE.MeshLambertMaterial {color: 'red'}
sphere = new THREE.Mesh sphereGeometry, sphereMaterial

alert 'start merging'

for i in [0...90000]
    sphere.position.x = atoms.coords[i][0]
    sphere.position.y = atoms.coords[i][1]
    sphere.position.z = atoms.coords[i][2]
    THREE.GeometryUtils.merge moleculeGeometry, sphere

alert 'finished merging'

mesh = new THREE.Mesh moleculeGeometry, sphereMaterial
scene.add mesh

render()

有什么想法吗？“开始合并”警报与“完成合并”警报之间的时间非常长，如果根本没有完成而是挂起。

可能的想法包括：

• 为几何体预分配一个顶点数组。我想每次将球体合并到整个几何体中时都会分配更多内存。

• 一次合并两个球体集，并将两个这样的集合合并，然后重复此过程，直到整个“场景”合并为止。（这种技术有一个名称，但我记不起来它叫什么了。）但这似乎有点过度了。在现代计算机上，9万次合并不应该成为瓶颈。

谢谢

- Nick

---

也许你应该查看 Three.js 中附带的 BufferGeometry 示例。理论上，将所有球体内容上传到 GPU 中可以使渲染速度更快。请参考 three.js 中的示例了解如何实现。 - GuyGood

你似乎缺少了很多括号和分号。哦，咖啡。 - Alex Mund

这会打扰你吗？我可以用Javascript重写它。 - Nick

Answer 1

从球体中移除sphereMaterial。像这样：

sphere = new THREE.Mesh sphereGeometry

你不需要它，因为 sphereMaterial 已经在网格中了。

免责声明：我也正在学习 Three JS。 ;3

- Alex Mund