O'Reilly logo

Learning Three.js: The JavaScript 3D Library for WebGL by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Create a geometry by extruding

Three.js provides a couple of ways we can extrude a 2D shape to a 3D shape. With extruding we mean stretching out a 2D shape along its z-axis to convert it to 3D. For instance, if we extrude the THREE.CircleGeometry object, we get a shape that looks like a cylinder and if we extrude a THREE.PlaneGeometry object, we get a cube-like shape.

The most versatile way of extruding a shape is by using the THREE.ExtrudeGeometry object.

ExtrudeGeometry

With the ExtrudeGeometry you can create a 3D object from a 2D shape. Before we dive into the details of this geometry, let's first look at an example, 03-extrude-geometry.html, shown in the following screenshot:

In this example we've taken the 2D shape that we created earlier in ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required