javascript - 如何优化 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]);
}

如以下链接所述:
- Animateing a Million Letters Using Three.js
- Optimizing Three.js Performance: Simulating Tens of Thousands of Independent Moving Objects
他们指出我们不应该单独添加对象，最好同时添加同类对象，以进行优化。但是，由于我是这个领域的新手，所以在使用 SphereGeometry 时，我不知道如何编写这种优化代码。

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

谢谢!

Answer 1

您可以像这样重用几何体和 Material :

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]);
}