How to combine multiple lines with gaps in threejs

Question

I am successfully loading a dataset with polygon data that represents buildings in a city. Thus, each polygon represents one building. In Threejs, I can successfully represent them, but when I try to combine individual lines into one geometry, all the lines are connected (I understand why this makes sense, since all the vertices are added to the same collection).

But how to combine these separate building polygons into a single geometry without having the lines of separate polygons of the building connected to each other?

The code I have right now is:

var geometry = new THREE.Geometry(); for (var i = 0; i < data.length; i++) { var temp = new THREE.Geometry(); var polygon = data[i]; for (var j = 0; j < polygon.length; j++) { temp.vertices.push(new THREE.Vector3(polygon[j][0], polygon[j][1], 0)); } temp.vertices.push(new THREE.Vector3(polygon[0][0], polygon[0][1], 0)); THREE.GeometryUtils.merge(geometry, temp); } scene.add(new THREE.Line(geometry, buildingMaterial, THREE.LineStrip)); 

is a variable that contains all the polygon data for buildings.

Answer 1

It is decided:

  var cube = new THREE.Geometry(); for (var i = 0; i < data.length; i++) { var shape = new THREE.Shape(_.uniq(_.map(data[i], function(d) { return new THREE.Vector3(d[0], d[1], 100); }))); shape.extrude({amount: 100}) var points = shape.createPointsGeometry(); THREE.GeometryUtils.merge(cube, shape.extrude({amount: -1 - Math.random() * 1, bevelSegments: 0, steps: 1 , bevelSegments: 0, bevelSize: 0, bevelThickness: 0})); } var mesh = new THREE.Mesh(cube, new THREE.MeshBasicMaterial({color: 0x333333, wireframe: false})); scene.add(mesh);