我想优化 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 个或更多)球体的有效方法,您会教我们吗?
谢谢!
最佳答案
您可以像这样重用几何体和 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]);
}
关于javascript - 如何优化 three.js 中多个 sphereGeometry 的渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22028288/