Game Development Reference
In-Depth Information
Let's take extruding as an example since that's a relatively common operation:
var triangle = new THREE.Shape([
new THREE.Vector2 (0, 50),
new THREE.Vector2 (50, 50),
new THREE.Vector2 (50, 0)
]);
var geometry = new THREE.ExtrudeGeometry(triangle, {
bevelEnabled: false,
amount: 30
});
The approach here is to create a 2D shape (
THREE.Shape
) out of (x, y) coordinates
and then stretch it out along the z axis. The second parameter for
ExtrudeGeometry
is a map of options. The most important one,
amount
, controls how far to stretch out
the shape.
bevelEnabled
controls whether the extruded edges are rounded or not.
You can see the result in the following screenshot:
An extruded triangle
Use cases for the other custom geometries are unusual in games because normally if
you wanted to create a complex shape, you could create a model in a 3D modeling
program and then import it into Three.js (a process covered in
Chapter 4
,
Adding Detail
).
There is a WebGL-only class called
THREE.BufferGeometry
which
is faster than
THREE.Geometry
, but is much more difficult to work
with because it stores WebGL buffers instead of Three.js vertices and
faces. However, future developments in Three.js will shift the default
geometry to work more like
THREE.BufferGeometry
under the
hood so that you don't have to think about the differences.
