2

I'm trying to render a 3D building procedurally using Three.js. One of the ways this is done is by extruding a square/rectangle. See Fig. 19 here: http://www.gamesitb.com/SurveyProcedural.pdf

I've looked at the Three.js documentation for the ExtrudeGeometry API, but its usage isn't very clear. Have searched the web and this forum for possible examples/code snippets - in vain! Any pointers on this would be helpful. Thanks.

gman
  • 100,619
  • 31
  • 269
  • 393
Webgldev
  • 23
  • 1
  • 3

1 Answers1

1

The first place to look is in this example that is provided in the THREE.js zip.

examples/webgl_geometry_shapes.html

The next bits are for example purposes.

The key points are that you create a series of Vector2 (lines 144-165 in the file I've mentioned) that define the corners of the building. 

var californiaPts = [];
californiaPts.push( new THREE.Vector2 ( 610, 320 ) );
californiaPts.push( new THREE.Vector2 ( 450, 300 ) );
californiaPts.push( new THREE.Vector2 ( 392, 392 ) );
californiaPts.push( new THREE.Vector2 ( 266, 438 ) );

The next step is to convert those lines to a THREE.Shape (line 167)

var californiaShape = new THREE.Shape( californiaPts );

Then you want to extrude the shape.

var extrudeSettings = { amount: 20 }; // bevelSegments: 2, steps: 2 , bevelSegments: 5, bevelSize: 8, bevelThickness:5

var geometry = californiaShape.extrude(extrudeSettings);

At this point you'd have an extrusion of the shape that is a geometry object so it can be turned into a mesh and you can apply a material to it.

John McKnight
  • 684
  • 4
  • 9
  • Thanks for the reference and example snippet. This has certainly helped. Let me create a prototype using these and post the results. – Webgldev Feb 27 '13 at 08:31
  • I'm drawing mine as 4 separate shapes, one for each wall, then I extrude them. I do the 4 shapes so each wall can have its own textures. Then I merge the geometries into one building. I assume that based on the PDF you listed you may want to do it that way as well so you have since the buildings would not be fully symmetrical. – John McKnight Feb 27 '13 at 19:13
  • Yes, that's what I plan to do as well. That would give a more realistic rendering of the overall city. Thanks again. – Webgldev Mar 06 '13 at 16:01