如何在three.js中优化许多sphereGeometry的呈现? [英] How to optimize rendering of many sphereGeometry in three.js?

问题描述

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

I'd like to optimize the rendering of sphereGeometry in three.js, since it becomes bottleneck in my program. The javascript program is shown as follows:

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时如何编写此优化代码.

As mentioned in the folloing links:
- Animateing a Million Letters Using Three.js
- Optimizing Three.js Performance: Simulating Tens of Thousands of Independent Moving Objects
they pointed out that we should not add object individually, and better add same kind of objects at the same time, for the optimization. However, since I'm new in this field, I have no idea how to code this optimization, when using SphereGeometry.

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

If somebody knows how to code these with using SphereGeometry, or somebody who knows a efficient method to render many (10,000 or more) spheres, would you teach us?

谢谢！

推荐答案

您可以像这样重复使用几何图形和材质:

You can just reuse the geometry and material like this:

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

这篇关于如何在three.js中优化许多sphereGeometry的呈现?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！