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 this chapter and used the ExtrudeGeometry to convert it to 3D. As you can see in this screenshot, the shape is extruded along the z-axis, which results in a 3D shape. The code to create this ExtrudeGeometry is very easy:
var options = { amount: 10,
bevelThickness: 2, bevelSize: 1, bevelSegments: 3,
Chapter 6 [ 159 ] bevelEnabled: true, curveSegments: 12, steps: 1 };
shape = createMesh(new THREE.ExtrudeGeometry(drawShape(), options));
In this code example we create the shape with the drawShape() function, just like we did earlier in the previous chapter. This shape is passed on to the THREE. ExtrudeGeometry constructor along with an options object. With the options you
can define exactly how the shape should be extruded. The following table explains
the options you can pass into the THREE.ExtrudeGeometry.
Property Mandatory Description
amount No This property specifies how far the shape should be extruded. Default is 100.
bevelThickness No This property specifies the depth of the bevel. The bevel is the rounded corner between the front and back faces and the extrusion. Default is 6.
bevelSize No This property specifies the height of the bevel. Default is bevelThickness-2.
bevelSegments No This property defines the number of segments that will be used by the bevel. The more that are used, the smoother the bevel will look. Default is 3.
bevelEnabled No If set to true, a bevel is added. Default is true.
curveSegments No This property specifies how many segments will be used when extruding the curves of shapes. The more that are used, the smoother the curves will look. Default is 12.
steps No This property defines into how many segments the extrusion will be divided. Default is 1.
extrudePath No This property specifies the path along which the shape should be extruded. If this isn't specified, the shape is extruded along the z-axis.
Using Advanced Geometries and Binary Operations
[ 160 ]
Property Mandatory Description
material No This property specifies the index of the material to use for the front and the back faces. Use the THREE.SceneUtils.
createMultiMaterialObject function to create
the mesh.
extrudeMaterial No This property specifies the index of the material to use for the bevel and the extrusion. Use the THREE.SceneUtils.
createMultiMaterialObject function to create the mesh.
You can experiment with these options using the menu from example 12-extrude-geometry.html.
In this example we extruded the shape along its z-axis. As you could have seen in the options, you can also extrude a shape along a path. In the following geometry, the TubeGeometry, we'll do just that.
TubeGeometry
A TubeGeometry creates a tube that extrudes along a 3D spline. You specify the path using a number of vertices, and the TubeGeometry will create the tube. An example you can experiment with can be found in the sources for this chapter: 13-extrude-tube.html. Refer to the following screenshot:
Chapter 6
[ 161 ]
As you can see in this example, we generate a number of random points, and use those points to draw the tube. With the controls in the upper-right corner, we can
define how the tube looks or generate a new tube by clicking on the newPoints
button. The code needed to create a tube is very simple:
var points = [];
for (var i = 0 ; i < controls.numberOfPoints ; i++) { var randomX = -20 + Math.round(Math.random() * 50); var randomY = -15 + Math.round(Math.random() * 40); var randomZ = -20 + Math.round(Math.random() * 40);
points.push(new THREE.Vector3(randomX, randomY, randomZ)); }
var tubeGeometry = new THREE.TubeGeometry( new THREE.SplineCurve3(points),
segments, radius, radiusSegments, closed);
var tubeMesh = createMesh(tubeGeometry); scene.add(tubeMesh);
What we need to do is, first get a set of vertices of the type THREE.Vector3. Just like we did for the THREE.ConvexGeometry class or the THREE.LatheGeometry class.
Before we can use these points, however, to create the tube, we first need to convert
these points to a THREE.SplineCurve3 class. In other words we need to define a smooth curve through the points we've defined. We can simply do this by passing
the array of vertices to the constructor of THREE.SplineCurve3. With this spline, and the other arguments (which we'll explain in a bit), we can create the tube and add it to the scene.
Besides the THREE.SplineCurve3 object, the TubeGeometry constructor takes some other arguments. The following table lists all the arguments for the TubeGeometry:
Property Mandatory Description
path Yes This property specifies the THREE.
SplineCurve3 object that describes the path this
tube should follow.
segments No This property specifies the segments used to build up the tube. Default value is 64. The longer the path, the more segments you should specify.
radius No This property specifies the radius of the tube. Default is 1.
Using Advanced Geometries and Binary Operations
[ 162 ]
Property Mandatory Description
radiusSegments No This property specifies the number of segments to use along the length of the tube. Default is 8. The more you use, the more round the tube will look.
closed No If set to true, the start of the tube and the end will
be connected together. Default is false. debug No If set to true, extra debug information will be
added to the tube.
The last extrude example we'll show in this chapter isn't really a different geometry. In the next section we'll show you how you can use the ExtrudeGeometry to create extrusions from existing SVG paths.