Three.js实例等效

Question

我最近开始玩three.js.注意到即使有几千个简单的立方体,性能也开始下降.

所以这带来了我的主要问题:有没有办法使用three.js？我很确定这种性能下降与drawcalls有关,因此如果以某种方式使用three.js进行实例化,它可以帮助支持性能.

我知道缓冲区但是在这一点上我不可能创建一个几何缓冲区,它可以让我在运行时修改单个对象.如果有一个库来处理所有这些,这也算作一个解决方案.

不久,我正在寻找一个相当于three.js中的对象实例.任何建议表示赞赏.

Answer 1

当我尝试绘制数千个球体时，我也有同样的经历。

经过一些研究，我使用点云对象获得了更好的性能（最多一百万个项目）。基本上，您可以从几何体（在本示例中可以从原始数据创建它或使用 Three.js 中现有的之一）和 PointCloudMaterial 创建 PointCloud 对象，您可以在其中修改每个项目的属性。

例子如下（加10分）

var geo = new THREE.Geometry();
var mat = new THREE.PointCloudMaterial({size: 1, color:0xff0000});

//assign different positions to the points
for (var i=0 ; i<10 ; i++){
  var point = new THREE.Vector3(3*i,0,0);
  geo.vertices.push(point);
}

system = new THREE.PointCloud(geo, mat);
scene.add(system);

要修改外观，您可以使用 PointCloudMaterial 属性，或加载纹理，以便每个点获得所需的形状（在您的情况下类似于立方体）。

如果您分享更多详细信息（例如，为什么需要多维数据集）或一些代码，也许我可以提供更多帮助