Three.js
Top Merging our custom
geometry with a sphere-
based geometry
Above left A custom-
made 3D triangle with two
faces
Above right A custom-
made 3D geometry applied
to a meshgeometry.normalize();
geometry.computeFaceNormals();
We create a new generic geometry class that is
actually empty when we create it. Be aware that you
need to add the vertices manually at each position in
3D space that you want them. If you’re not using a 3D
app, it’s helpful to plot these out on paper. Then you
push those vertices into the geometry.vertices array.
You also need to add the faces. The faces are the
part that is filled between the vertices. Imagine each
vertex is like a dot and then a side or ‘edge’ connects
those dots. In this case, the face would be the part
that is filled in with colour or texture between the
edges of the shape.
The three integer values inside the Face3 method
correspond to the index of the vertex you want
to refer to. So to add a face that fills the triangle
between the first three vertices, we use 0,1,2. In this
example we made a second face to fill the opposite
direction, which ends up flipping the normal, so we
essentially get a face on each side of the flat object.
It’s a good idea to normalise the geometry after, so
that it scales predictably. Then you also compute the
face normals.
You might find it a little easier to see your new
shape by reducing that for loop down to just one loop,
and removing the x and z position lines. That will
add your object to 0,0,0 instead, so you can see it
easier. You can also set the scale of your object using
object.scale.set( 4.0, 4.0, 4.0); for example.
STEP 10: CREATING MORE COMPLEX
GEOMETRY
In this last step, we’re going to update the code
where we defined the geometry with a slightly more
complex definition.
//Create a object
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3(0,0,0) );
geometry.vertices.push( new THREE.Vector3(0,100,0) );
geometry.vertices.push( new THREE.Vector3(0,100,100) );
geometry m.vertices.push( new THREE.Vector3(100,0,0) );
geometry.vertices.push( new THREE.Vector3(100,-100,0) );
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry.faces.push( new THREE.Face3( 2, 1, 0 ) );
geometry.faces.push( new THREE.Face3( 3, 2, 1 ) );
geometry.faces.push( new THREE.Face3( 1, 2, 3 ) );
geometry.faces.push( new THREE.Face3( 0, 1, 3 ) );
geometry.faces.push( new THREE.Face3( 3, 1, 0 ) );
geometry.faces.push( new THREE.Face3( 4, 3, 2 ) );
geometry.faces.push( new THREE.Face3( 2, 3, 4 ) );
geometry.normalize();
geometry.computeFaceNormals();
We’ve expanded out vertices and faces to create a
more interesting custom shape, which hopefully will
give you some creative ideas to generate your own.
Try sketching out a shape on some graph paper and
creating the vertices and faces.PARTING THOUGHTS
WebGL is an incredibly powerful graphics language
that enables you to deliver your visuals to the widest
audience possible. Three.js makes the process easy
to get beautiful 3D experiences up and running. By
customising the basic geometry already included,
you can quickly create new looks for your work. If you
combine geometries by merging them, you can create
new objects that are better optimised and easier to
manage. You can also create your own geometry from
scratch, giving infinite options. You can even use
your geometry to assist in other ways, such as using
the vertices array to position other objects in 3D
space or direct the key points in an animation path.
While customising geometry is useful for many
cases, as your models grow in complexity, you’ll want
to explore buffer geometry and 3D modelling tools as
well to help generate those models. But for simpler
tasks, a lot can be accomplished just by creating your
own custom geometry.