如何在Three.js中将线框添加到实例化网格

Question

我正在用Three.js实现一个自定义的城市场景。我需要渲染很多相同的几何图形，为了提高速度，我实现了InstanceMesh。

对于普通网格，我已经使用此代码将线框添加到所有网格：

// material is created elsewhere
var geo = new THREE.CylinderGeometry(1, 1, item.height, 16, 16);
var mesh = new THREE.Mesh(geo, this.createMaterial(object.material));
scene.add( mesh );
// creating wireframes    
var edgegeo = new THREE.EdgesGeometry( geo ); 
var wire = new THREE.LineSegments( edgegeo, this.createMaterial("wire") );
scene.add( wire ); 

这似乎也很管用：

mesh.add(wire) 

不幸的是，这不适用于实例化网格，因为似乎没有实例化版本的LineSegments？我该如何处理这个问题？

感谢您的帮助。谢谢。

Answer 1

要实现与EdgesGeometry相同的功能，必须手动创建线段(实例化)并将其与长方体对齐。你必须在每个框中对齐12条实例线。

因此，如果您有所有在同一InstancedMesh下的10框，那么您将有第二个InstancedMesh，其中包含所有行，并且您需要在第二个InstancedMesh中包含10 * 12或120行。

在迭代第一个InstancedMesh的每个框时，需要迭代第二个InstancedMesh的12行以上。