How to render a building using Three.js extrusion method?

Question

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.

Answer 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.