Game Development Reference
In-Depth Information
Custom geometries
Several default geometry types allow creating shapes based on vertices or paths
specifically created by the developer. (You can also import geometry created in
external programs, a topic covered in
Chapter 4
,
Adding Detail
.) The most basic type
is the
THREE.Geometry
class itself. For example, you can create a triangle using the
code shown in the following snippet:
var geo = new THREE.Geometry();
geo.vertices = [
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 100, 0),
new THREE.Vector3(0, 0, 100)
];
geo.faces.push(new THREE.Face3(0, 1, 2));
geo.computeBoundingSphere();
First, this code creates a geometry object that has no vertices or faces yet. Then, it
adds specific vertices, where each vertex is represented by a
THREE.Vector3
that
holds spatial coordinates on the x, y, and z axes. Next, a
THREE.Face3
is added into
the
faces
array. The
Face3
constructor's parameters indicate the indices of vertices
in the geometry's
vertices
array to use for the face's corners. Finally, the bounding
sphere is computed, which triggers internal calculations for properties Three.js
needs to track such as whether the shape is in view. If you have trouble getting
a texture to display correctly on your custom material, you may also need to call
geo.computeFaceNormals()
and
geo.computeVertexNormals()
. These functions
calculate additional information about the geometry's visual layout.
Manually creating shapes out of individual vertices can quickly get tiring; however,
some utilities exist to help make the process faster as introduced in the following table:
Geometry
Description
THREE.LatheGeometry
It revolves a shape in a circle
THREE.PolyhedronGeometry
A spheroid; examples include
IcosahedronGeometry
,
TetrahedronGeometry
,
and so on
THREE.ExtrudeGeometry
It starts with a 2D shape and stretches it into a 3D
space
THREE.ShapeGeometry
It is a 2D shape
THREE.TubeGeometry
It is a hollow cylinder
THREE.ParametricGeometry
These are curved tubes
