如何在three.js中优化多个sphereGeometry的渲染？

Question

我想在three.js中优化sphereGeometry的渲染,因为它在我的程序中成为瓶颈.javascript程序如下所示:

var sphereThree = [];
for(var idSphere = 0; idSphere < numSphere; idSphere++){
    var sphereGeometry = new THREE.SphereGeometry(1.0);
    var sphereMaterial = new THREE.MeshLambertMaterial({color: 'rgb(255, 0, 0)'});

    sphereThree[idSphere] = new THREE.Mesh(sphereGeometry, sphereMaterial);

    sphereThree[idSphere].position.x = x[idSphere];
    sphereThree[idSphere].position.y = y[idSphere];
    sphereThree[idSphere].position.z = z[idSphere];

    scene.add(sphereThree[idSphere]);
}

如下面的链接中所述:
- 使用Three.js动画百万个字母
- 优化Three.js性能:模拟数以千计的独立移动对象,
他们指出我们不应单独添加对象,更好地添加相同类型的对象同时,进行优化.但是,由于我是这个领域的新手,因此在使用SphereGeometry时我不知道如何编写此优化代码.

如果有人知道如何使用SphereGeometry编写这些代码,或者知道一种有效方法来渲染许多(10,000或更多)球体的人,你会教我们吗？

谢谢!

Answer 1

你可以像这样重用几何和材料:

var sphereGeometry = new THREE.SphereGeometry(1.0);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 'rgb(255, 0, 0)'});

var sphereThree = [];
for(var idSphere = 0; idSphere < numSphere; idSphere++){
    sphereThree[idSphere] = new THREE.Mesh(sphereGeometry, sphereMaterial);

    sphereThree[idSphere].position.x = x[idSphere];
    sphereThree[idSphere].position.y = y[idSphere];
    sphereThree[idSphere].position.z = z[idSphere];

    scene.add(sphereThree[idSphere]);
}