How do I add wireframes to instanced meshes in Three.js

Question

I am implementing a custom cityscape scene in Three.js. I need to render a lot of the same geometries and to increase speed I have implemented InstanceMesh.

For normal meshes, I have used this code to add wireframes to all meshes:

// 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 ); 

This also seemed to work:

mesh.add(wire) 

Unfortunately, this does not work for instanced meshes since there does not seem to be an instanced version of LineSegments? How would I approach this problem?

Any help appreciated. Thanks.

Answer 1

To achieve the same thing as EdgesGeometry, you would have to manually create the line segments (instanced) and align them with the boxes. You'd have to align 12 instanced lines per box.

So if you have 10 boxes that are all under the same InstancedMesh, then you'd have a second InstancedMesh which has all lines, and you'd need 10 * 12 or 120 lines in the second InstancedMesh.

While you iterate on each box of the first InstancedMesh, you'd iterate over 12 lines of the second InstancedMesh.