I am currently in the process of learning Three.js and have found the documentation to be a bit challenging to navigate due to the abundance of "todos" scattered throughout.
My goal is to showcase anywhere from 50,000 to 500,000 red spheres on the screen. I have taken inspiration from Mr. Doob's city example (), but my code tends to run very slowly, sometimes even causing Chrome to freeze on my 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()
Any suggestions on how to optimize this? The duration between the 'start merging' alert and 'finished merging' alerts is quite long, and sometimes the process even hangs.
Potential solutions could involve:
Preallocating an array of vertices for the geometry. Each time the sphere is merged into the overall geometry, it may be allocating more memory.
Implementing a technique of merging sets of two spheres at a time, then merging two of those sets at a time, and repeating this process until the entire "scene" is merged. Although this may seem excessive, 90,000 merges should not be a bottleneck for a modern computer.
Thank you