Three.js
FACES: A face is a flat or curved surface on a 3D
shape. It’s what we typically think of as having the
colour or texture we see on a shape. For example, a
cube has six faces, a cylinder has three and a sphere
has just one.
EDGES: An edge is where two faces meet or
intersect. A sphere has one face and no edges at all,
whereas a cube has 12 edges.
VERTICES: Vertices is the plural form of vertex,
which is a corner where edges meet. Again, a sphere
has none, a cone would have just one vertex and a
cube would have eight.
TUTORIAL: CREATING A BASIC SCENE
WITH BUILT-IN GEOMETRY
Three.js comes with several built-in geometries,
including common shapes like spheres and boxes.
The first task you need to complete is to create a
basic Three.js scene and then include one of these
3D shapes. Once that is done, you’ll move into
customising vertices, merging geometries and even
creating your own.
Let’s get started!
STEP 1: GET THE HTML READY
To begin, you need to set up a basic HTML file and
include a link to Three.js, either hosted externally
or add it from the Three.js repository here: https://
github.com/mrdoob/Three.js/
Note: This code has been tested on the latest
release of Three.js: v95.
<!DOCTYPE html>
//c o d e //
STEP 2: ADD A SCENE, CAMERA AND
RENDERER
Between those script tags you set up, add a scene.
This will be the container for all your objects. Add
the camera next. The first attribute is the field of
Above Three.js enabled the creation of this award-winning site for Independence Day, all with built-in and
custom geometryview, while the second is the aspect ratio. Last, add
the renderer, which handles drawing the scene to
the canvas. We’ve pushed the camera pack a little
so we can see the objects we’ll add to the scene.
You can also enable shadow mapping if you’d like to
see shadows cast by your custom objects. Notice we
added an array to hold our objects as well.var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.
innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 15;
objects = [];
var renderer = new THREE.WebGLRenderer({antialias:tr
ue});
renderer.setSize( window.innerWidth, window.innerHeight
);
document.body.appendChild( renderer.domElement );
//update renderer to use shadowmap
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;STEP 3: INCORPORATE 3D OBJECTS
Next we need to add some objects to the scene to
see them. We’ll kick off this process using a built-
in geometry, so you can be sure you have a working
scene to experiment with.
Start by adding a new geometry: we are using the
Box geometry class and setting its dimensions all
to 1. Next we need a standard material to cover our
geometry with. We’ve made the colour a red in this
example. With that done, we’ve set up a simple for
loop to add several objects to the scene.
We use a little sin / cos math to plot the objects in
a circle, setting their x and z portion values. Then
we turn on castShadow in order to ensure that the
objects will cast a shadow as well. Then we add the