three.js draw geojson

[skypan]

Can the examples provides : draw buildings and loads with three.js and geojson, so that i can draw then with threejs's ability

i try to draw then by the ExtrudeBufferGeometry, but the result is bad , my code is

` addBuildings(data, info, height) {
height = height ? height : 1;

for (let i = 0; i < data.length; i++) {
  let el = data[i];

  // 二维的点
  let shape = this.genShape(el);
  let geometry = this.genGeometry(shape, {
    curveSegments: 1,
    depth:  0.5 * height,
    bevelEnabled: false,
  });
  let mesh = new THREE.Mesh(geometry, this.meshMaterial);
  
  let coords = getCenter(el);
  let cube = tb.Object3D({ obj: mesh}).setCoords([coords.longitude, coords.latitude, 1]);
  this.buildings.push(cube);
}

}

genShape(points) {
let shape = new THREE.Shape();

for (let i = 0; i < points.length; i++) {
  let elp = points[i];
  let pos = tb.projectToWorld([elp[0], elp[1], 0]);
  if (i == 0) {
    shape.moveTo(-pos.x, pos.y);
  } else {
    shape.lineTo(-pos.x, pos.y);
  }
}

return shape;

}

genGeometry(shape, settings) {
// 2d 拉伸到 3d
let geometry = new THREE.ExtrudeBufferGeometry(shape, settings);
geometry.computeBoundingBox();
return geometry;
}`

now the way of draw buildings is that mapbox's fill-extrusion, but i can not add the special effects, such as Sweep light

[jscastro76]

Can you share 1 or 2 items from your geoJson file?

[jscastro76]

Hi @skypan, I found what’s the problem you’re having... the buildings shake, aren’t they?
That’s an well known issue from Mapbox with the precision of long decimal numbers. I’m preparing an example on how to create Threebox extrusions with a geoJson standard file with solid buildings and not shaking at all. I’ll be back to you when it’s ready.

[jscastro76]

I have uploaded a new example with extrusions read from a geojson file with real complex features from the composite layer. I have created a new method tb.extrusion to demonstrate it's functionality in 2 ways, one passing an array of THREE.Vector(2) objects, and the other one reading from the geoJson. The result is very cool... Thanks for the question, it pushed me to create extrusions that it was a pending task.

[skypan]

@jscastro76 thanks your anwser, I try it and it works good, before that my local's case is shake indeed，after that I will try it with the shadermaterial and show the special effects

[jscastro76]

@jscastro76 thanks your anwser, I try it and it works good, before that my local's case is shake indeed，after that I will try it with the shadermaterial and show the special effects

@skypan glad to hear it worked well in your scenario. Don’t forget to share the result when you add the shader and those effects, I’d love to see it!