In the previous chapter we showed you all the basic geometries provided by Three.js. Besides these basic geometries, Three.js also offers a set of more advanced and specialized objects. In this chapter we'll show you these advanced geometries and cover the following subjects:
• You'll learn how to use advanced geometries such as ConvexGeometry, LatheGeometry, and TubeGeometry.
• We'll show you how to create 3D shapes from 2D shapes using the ExtrudeGeometry. We'll do this based on a 2D shape drawn using Three.js provided functionality, and we'll show an example where we created a 3D shape based on an externally loaded SVG image.
• If you want to create custom shapes yourself, you can append the ones we discuss in this and in the previous section. Three.js, however, also offers a ParamtericGeometry object. With this object, you can create a geometry based on a set of equations.
• Finally, we'll look at how you can create 3D text effects using the TextGeometry.
• Additionally, we'll show you how you can create new geometries from existing ones using binary operations provided by the Three.js extension: THREEBSP.
Using Advanced Geometries and Binary Operations
[ 154 ]
ConvexGeometry
With ConvexGeometry we can create a convex hull around a set of points. A convex hull is the minimal shape that encompasses all these points. The easiest way to understand this is by looking at an example. If you open up example 01-advanced- 3d-geometries-convex.html, you'll see the convex hull for a random set of points:
In this example we generate a random set of points and based on these points we create a ConvexGeometry. In the example you can click on redraw, which will generate 20 new points and draw the convex hull. We've also added each of these points as a small SphereGeometry to make it more clear how a convex hull works. The following piece of code shows how these points were created and added to the scene:
function generatePoints() { // add 10 random spheres var points = [];
for (var i = 0; i < 20; i++) {
var randomX = -15 + Math.round(Math.random() * 30); var randomY = -15 + Math.round(Math.random() * 30); var randomZ = -15 + Math.round(Math.random() * 30);
Chapter 6
[ 155 ]
}
spGroup = new THREE.Object3D();
var material = new THREE.MeshBasicMaterial( {color: 0xff0000, transparent: false}); points.forEach(function (point) {
var spGeom = new THREE.SphereGeometry(0.2); var spMesh = new THREE.Mesh(spGeom, material); spMesh.position = point;
spGroup.add(spMesh); });
// add the points as a group to the scene scene.add(spGroup);
}
As you can see in these couple of lines of code, we create 20 random points (THREE. Vector3), which we push into an array. Next we iterate over this array and create a SphereGeometry whose position we set to one of these points. All the points are added to a group (more on this in Chapter 7, Particles and the Particle System), so we can rotate them easily.
Creating a ConvexGeometry object from these points is very easy:
// use the same points to create a convexgeometry var convexGeometry = new THREE.ConvexGeometry(points); convexMesh = createMesh(convexGeometry);
scene.add(convexMesh);
An array containing vertices (of the type THREE.Vector3) is the only argument the ConvexGeometry constructor takes. One final note on the createMesh() function we call here. In the previous examples we've used this method to create a mesh using MeshNormalMaterial. For this example we changed this to a translucent green MeshBasicMaterial, to better show the convex hull we've created.
The next complex geometry is the LatheGeometry, which can be used to create vase-like objects.
Using Advanced Geometries and Binary Operations
[ 156 ]
LatheGeometry
A LatheGeometry allows you to create shapes from a smooth curve. This curve is
defined by a number of points (also called knots) and is most often called a spline. This spline is rotated around a fixed point and results in vase- and bell-like shapes. Once
again, the easiest way to understand what a LatheGeometry does is by looking at an example. This geometry is shown in 02-advanced-3d-geometries-lathe.html:
In this screenshot you can see the spline as a set of small red spheres. The positions of these spheres are passed into the LatheGeometry constructor, together with a couple of other arguments. In this example we rotate this spline for half a circle and based on this spline we extract the shape you can see. Before we look at all the arguments, let's look at the code used to create the spline, and how the LatheGeometry uses this spline:
function generatePoints(segments, phiStart, phiLength) { // add 10 random spheres
var points = []; var height = 5; var count = 30;
for (var i = 0; i < count; i++) {
points.push(new THREE.Vector3((Math.sin(i * 0.2) + Math.cos(i * 0.3)) * height + 12,
Chapter 6
[ 157 ]
}
...
// use the same points to create a convexgeometry var latheGeometry = new THREE.LatheGeometry (points, segments, phiStart, phiLength); latheMesh = createMesh(latheGeometry); scene.add(latheMesh);
}
In this piece of JavaScript, you can see that we generate 30 points whose x coordinate is based on a combination of a sinus and cosinus function, while the z -coordinate is based on the i and count variables. This creates the spline visualized by the red dots in the screenshot we saw earlier.
Based on these points we can create the LatheGeometry. The LatheGeometry takes a couple of other arguments besides the array of vertices. The following table lists all the arguments:
Property Mandatory Description
points Yes This property specifies the points that make up the spline used to generate the bell/vase shape from. segments No This property specifies the number of segments to use
when creating the shape. The higher this number, the more round the resulting shape will be. The default value for this is 12.
phiStart No This property specifies where to start, on a circle, when generating the shape. This can range from 0 to 2*Pi.
The default value is 0.
phiLength No This property defines how fully generated the shape is. For instance a quarter shape will be 0.5*Pi. The default is the full 360 degrees or 2*Pi.
In the beginning of this chapter we showed you a couple of two-dimensional shapes. In the next section we'll look at how we can create three-dimensional shapes from these two-dimensional shapes by something called extruding.
Using Advanced Geometries and Binary Operations
[ 158 ]