Three.js 合并几何很慢答案

【问题标题】：Three.js merge geometry very slowThree.js 合并几何很慢
【发布时间】：2017-04-25 01:54:52
【问题描述】：

我刚刚学习 Three.js，发现文档有点难以使用（到处都是“待办事项”）。

我只是想在屏幕上显示 50,000 到 500,000 个红色球体。此代码有点模仿 Doob 先生的城市示例 (http://www.mrdoob.com/lab/javascript/webgl/city/01/)。唯一的区别是我的速度很慢，或者在某些情况下（在 MBP 视网膜上）实际上会挂起 Chrome：

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()

这里有什么想法吗？ '开始合并'警报和'完成合并'警报之间的时间很长，如果它甚至完全完成而不是挂起。

可能的想法包括

为几何图形预分配顶点数组。我想每次我将球体合并到整体几何体中时，都会分配更多内存
一次合并两个球体的集合，然后一次合并其中两个集合，然后重复此过程，直到合并整个“场景”。（这种技术有一个名字，但我不记得它叫什么了。）这似乎有点矫枉过正。 90,000 次合并不应该成为现代计算机上任何东西的瓶颈。

谢谢

【问题讨论】：

也许您应该检查 Three.js 附带的 BufferGeometry 示例。从理论上讲，您将所有球体内容上传到 GPU，从而使其渲染速度更快。查看示例如何在 three.js 中完成此操作。
您似乎缺少大量括号和分号。哦，咖啡。
??这会打扰你吗？我可以用 Javascript 重写它。

标签： javascript coffeescript three.js

【解决方案1】：

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

sphere = new THREE.Mesh sphereGeometry

您不需要它，因为 sphereMaterial 在网格中。

免责声明：我也只是在学习三个 JS。 ;3

【讨论】：