DESCRIPCIÓN DE LOS DISPOSITIVOS UTILIZADOS PARA EL

new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);

In this example of PlaneGeometry, you can change these properties and directly see the effect it has on the resulting 3D object. An explanation of these properties is shown in the following table:

Property Mandatory Description

width Yes This property specifies the width of the rectangle.

height Yes This property specifies the height of the rectangle.

widthSegments No This property specifies the number of segments that the width should be divided in. Defaults to 1. heightSegments No This property specifies the number of segments that

Learn to Work with Geometries

[ 130 ]

As you can see this is not a very complex geometry. You just specify the size and you're done. If you want to create more faces (for example, for when you want to create a checkered pattern), you can use the widthSegments and heightSegments properties to divide the geometry in smaller faces.

Before we move on to the next geometry, a quick note on the material used for this example and that we also use for most of the other examples in this chapter. We use the following method to create a mesh based on the geometry:

function createMesh(geometry) {

// assign two materials

var meshMaterial = new THREE.MeshNormalMaterial(); meshMaterial.side = THREE.DoubleSide;

var wireFrameMaterial = new THREE.MeshBasicMaterial(); wireFrameMaterial.wireframe = true;

// create a multimaterial

var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [meshMaterial,wireFrameMaterial]);

return mesh; }

In this function we create a multi-material mesh based on the provided mesh. The

first material used is the MeshNormalMaterial. As you have learned in the previous chapter, the MeshNormalMaterial creates colored faces based on its normal vector (its orientation). We also set this material to be double-sided (THREE.DoubleSide). If we don't do this, we won't see this object when its back is turned towards the camera. We also add a MeshBasicMaterial, on which we enable the wireframe property. In this way, we can nicely see the 3D shape of the object and exactly see the

faces that a specific geometry creates.

CircleGeometry

You can probably already guess what the CircleGeometry object creates. With

this geometry you can create a very simple 2D circle (or a partial circle). Let's first

look at the example for this geometry: 02-basic-2d-geometries-circle.html.

In the following screenshot you can find an example where we've created a simple

Chapter 5

[ 131 ]

In this example you can see and control a mesh created from CircleGeometry. When you create a CircleGeometry object you can specify a couple of properties

that define what the circle looks like: Property Mandatory Description

radius Yes This property specifies the radius of a circle, which defines its size. The radius is the distance from the center of the circle to its side.

segments No This property defines the number of faces that are used to create the circle. The minimum is 3, and if not specified, it defaults to 8. The higher this value, the smoother the circle will look.

thetaStart No This property defines the position from where to start drawing the circle. This value can range from 0 to 2*Pi.

thetaLength No This property defines upto what extent the circle is completed. This defaults to 2*Pi (a full circle) when not specified. For instance, if you specify 0.5*Pi for this value, you'll get a quarter circle. Use this property together with the thetaStart property to define the shape of the circle.

Learn to Work with Geometries

[ 132 ]

When you look at this from code, you can create a full circle using the following snippet of code:

new THREE.CircleGeometry(3, 12);

If you wanted to create half a circle from this geometry, you'd use something like this:

new THREE.CircleGeometry(3, 12, 0, Math.PI);

Before moving on to the next geometry, a quick note on the orientation that Three.js uses when creating these two- dimensional shapes (PlaneGeometry, CircleGeometry and

ShapeGeometry). Three.js creates these objects "standing up" using only the x- and y-axes. Very logical, since they are two-dimensional shapes. Often, though, especially with the PlaneGeometry, you

want to have the mesh lying down to form some sort of a ground area on which you can position the rest of your objects. The easiest way to create a 2D object that is horizontally orientated instead of vertically is by rotating the mesh a quarter rotation backwards (-pi/2) around its x-axis.

mesh.rotation.x = -Math.PI/2;

That's all for the CircleGeometry; on to the last of the two-dimensional shapes: ShapeGeometry.

ShapeGeometry

The PlaneGeometry and CircleGeometry geometries have limited ways of customizing their appearance. If you want to create custom 2D shapes you can use the ShapeGeometry. With a ShapeGeometry you've got a couple of functions you can call to create your own shapes. You can compare this functionality with the path functionality that is also available for the HTML canvas element and for SVG. Let's start with an example, and after that we'll show you how you can use the various functions to draw your own shapes. The example can be found in the sources for this chapter, 03-basic-2d-geometries-shape.html:

Chapter 5

[ 133 ]

In this example you can see a custom created two-dimensional shape. Without going

into a description of the properties first, let's have a look at the code that is used to

create this shape:

function drawShape() {

// create a basic shape

var shape = new THREE.Shape();

// startpoint

shape.moveTo(10, 10);

// straight line upwards shape.lineTo(10, 40);

// the top of the figure, curve to the right shape.bezierCurveTo(15, 25, 25, 25, 30, 40);

// spline back down shape.splineThru(

[new THREE.Vector2(32, 30), new THREE.Vector2(28, 20), new THREE.Vector2(30, 10), ])

Learn to Work with Geometries

[ 134 ]

shape.quadraticCurveTo(20, 15, 10, 10);

// add 'eye' hole one

var hole1 = new THREE.Path();

hole1.absellipse(16, 24, 2, 3, 0, Math.PI * 2, true); shape.holes.push(hole1);

// add 'eye hole 2'

var hole2 = new THREE.Path();

hole2.absellipse(23, 24, 2, 3, 0, Math.PI * 2, true); shape.holes.push(hole2);

// add 'mouth'

var hole3 = new THREE.Path();

hole3.absarc(20, 16, 2, 0, Math.PI, true); shape.holes.push(hole3);

// return the shape return shape; }

In this piece of code, you can see that we've created the outline of this shape using lines, curves, and splines. After that we've punched a number of holes in this shape by using the holes property of the THREE.Shape class. In this section, though, we're talking about a THREE.ShapeGeometry object and not a THREE.Shape object. To create a geometry from the Shape we need to do the following:

new THREE.ShapeGeometry(drawShape());

The result from this function is a geometry that can be used to create a mesh. The ShapeGeometry class has no other options you can use to configure this shape. So let's look at the list of drawing functions that you can use to create a Shape instead:

Name Description

moveTo(x, y) This function moves the drawing position to the specified x and y coordinates.

lineTo(x, y) This function draws a line from the current position (for example, the position set by the moveTo function) to the provided x and y coordinates.

Chapter 5

[ 135 ]

Name Description

quadraticCurveTo(aCPx,

aCPy, x, y) You can use two different ways of specifying curves. You can use the quadraticCurveTo function or you can use

the bezierCurveTo function (see the next table row). The difference between these two functions is how you specify the curvature of the curve. The following diagram explains the differences between these two options:

Quadratic Bezier Cubic Bezier

For a quadratic curve we need to specify one additional point (using the aCPx and aCPy arguments) and the curve

is based solely on that point and of course the specified end point (from the x and y arguments). For a cubic curve (used by the bezierCurveTo function), you specify two

additional points to define the curve. The start point is the current position of the path.

bezierCurveTo(aCPx1, aCPy1, aCPx2, aCPy2, x, y)

Draws a curve based on the supplied arguments. For an explanation see the preceding row. The curve is drawn based on the two coordinates that define the curve (aCPx1, aCPy1, aCPx2, and aCPy2) and the

end coordinates (x and y). The start point is the current position of the path.

splineThru(pts) This function draws a fluid line through the provided set of coordinates (points). This argument should be an array of THREE.Vector2 objects. The start point is the current position of the path.

arc(aX, aY, aRadius, aStartAngle,

aEndAngle, AClockwise)

Draw a circle (or part of a circle). The circle starts from the current position of the path. aX and aY are used as offset

from the current position. The aRadius sets the size of the circle and aStartAngle and aEndAngle define how large a part of the circle is drawn. The Boolean property

aClockwise determines whether the circle is drawn clockwise or counter-clockwise.

absArc(aX, aY,

aRadius, aStartAngle, aEndAngle, AClockwise)

See description of arc. The position is absolute instead of

Learn to Work with Geometries [ 136 ] Name Description ellipse(aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise)

See description of arc. As an addition, with the ellipse

function we can separately set the x-radius and the y-radius.

absEllipse(aX, aY, xRadius, yRadius, aStartAngle,

aEndAngle, aClockwise)

See description of ellipse. The position is absolute instead of relative to the current position.

A final property of the Shape object we need to address is the holes property. By adding THREE.Shape objects to this property (see code example at the beginning of this section) you can create holes in the shape (for instance, the eye object in this example). In this example we've discussed about creating a ShapeGeometry from this Shape object by using the new THREE.ShapeGeometry(drawShape())) function. The Shape object itself also has a couple of helper functions you can use to create geometries.

Name Description

makeGeometry This function Returns a ShapeGeometry

object from this Shape object.

createPointsGeometry(divisions) This function converts the shape into a set of points. The divisions property defines how many points are returned. The higher this value, the more points are returned, and the smoother the resulting line is. The divisions apply to each part of the path separately.

createSpacedPointsGeometry

(divisions) This function also converts the shape into a set of points, but this time, applies the division to the complete path at once.

When you create a set of points using the createPointsGeometry function of the createSpacedPointsGeometry function, you can use these points to create a line:

new THREE.Line( shape.createPointsGeometry(10), new

Chapter 5

[ 137 ]

When you click on the asPoints or asSpacedPoints buttons in the example you'll see something as shown in the following screenshot:

That's it for the two-dimensional shapes. The next part will show and explain the basic three-dimensional shapes.