Three.js实例等价

Question

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

因此，这就引出了我的主要问题:是否有任何方法可以使用three.js来执行实例？我很确定性能的下降与调用有关，因此，如果通过three.js实现实例，它可以帮助支持性能。

我知道缓冲区，但在这一点上，我不可能创建一个几何缓冲区，它将赋予我在运行时修改单个对象的能力。如果有一个库来处理所有这些问题，这也可以算作解决方案。

很快，我将寻找一个等价的对象，在three.js中实例。如有任何建议，敬请见谅。

Answer 1

我知道实例可以用着色器模拟/重新实现。我不确定，也没有试过。

这个老的演示在GPU上有15万个单独的动画立方体，但是源代码被缩小了，所以很难看到发生了什么。也许不是一个合适的实例解决方案，可以适用于任何网格，我不确定，甚至可能是。cubes.html

我们也需要它，我想..(现在已经在演示中为vizicities添加了树)

Answer 2

我只是想出了一个解决办法，还没试过。我想要例子非常复杂的网格，并让他们使用骨骼动画。JSON加载程序似乎只作为几何加载。我希望转换为BufferGeometry BG1，而不是制作另一个BufferGeometry BG2。然后将顶点属性等的引用从BG2分配到BG1

//load mesh
...
var mesh = loadMesh();

//convert to buffer geometry
var BG1 = new BufferGeometry();
BG1.fromGeometry(mesh);

var BG2 = new BufferGeometry();
BG2.addAttribute('position', G1.attributes['position']);
BG2.addAttribute('normal', G1.attributes['normal']);
BG2.addAttribute('uv', G1.attributes['uv']);
BG2.addAttribute('color', G1.attributes['color']);

BG2.drawcalls = BG1.drawcalls;
BG2.boundingBox = BG1.boundingBox;
BG2.boundingSphere = BG1.boundingSphere;

我的理解是，webgl将共享这些缓冲区，而不是复制VRAM中使用的内存。欢迎任何意见。

Answer 3

当我试图画出几千个球体时，我也有过同样的经历。

经过一些研究，我使用PointCloud对象获得了更好的性能(多达一百万项)。基本上，您可以从几何图形创建PointCloud对象(本例中可以从raw创建它，也可以使用Three.js中现有的对象之一)和PointCloudMaterial，在这里您可以修改每个项的属性。

一个例子可以如下(增加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属性，或者加载纹理，以便每个点都得到所需的形状(在您的情况下类似立方体)。

如果您共享更多的细节(例如，您为什么需要多维数据集)或一些代码，也许我可以提供更多帮助。