net - UK (2020-02)

PROJECTS
three.js

In order to dive deeper into three.js, visit its online

documentation here: https://threejs.org/docs/. There are

plenty of examples to inspire and help get you started. But for

now, here’s a little primer on what it all means.

What is a scene?

A scene is the primary container that we place our 3D objects in,

along with lights and cameras.

What is a 3D camera?

Three.js has different camera types, including a Perspective

camera, which we will use for 3D, and an Orthographic camera,

used for rendering 2D scenes or UI elements.

What is a renderer?

The renderer handles the display of the 3D scene using WebGL. It

targets an HTML <canvas> element to draw into. You will call the

renderer to render each frame of your scene.

What is geometry?

Geometry defines the vertices or ‘points’ of an object. Faces

created by connecting these vertices are also defined. Geometry

can be defined manually or with built-in primitives such as Planes

or Spheres. It can also be loaded from external 3D model files.

What is a material?

Materials are used to add texture to the faces of an object’s

geometry. Attributes include things such as texture maps, colour

and opacity.

What are meshes?

A mesh is the combination of geometry and material. The mesh

object is what we would typically think of as a physical object

because it now has enough information to be seen.

THREE.JS OVERVIEW

IN-DEPTH

var particles = new THREE.Points( geometry, material );

STEP 13: RANDOMISE ROTATION OF

PARTICLES AND ADD TO SCENE

Add a little code to randomise the rotation of the

particles object and then add it to the scene.

particles.rotation.x = Math.random() * 6;

particles.rotation.y = Math.random() * 1;

particles.rotation.z = Math.random() * 1;

scene.add( particles );

STEP 14: MAKE MORE PARTICLES

Clone the particles you made and apply some more

random rotation to get it oriented in a new way. Add

that new Points object to the scene as well. You can

repeat this for as many particle groups as you want

in the scene. You can vary their material, size and

style as well.

particles2 = particles.clone();

particles2.rotation.x = Math.random() * 6;

particles2.rotation.y = Math.random() * 1;

particles2.rotation.z = Math.random() * 1;

scene.add( particles2 );

STEP 15: ADD AN ANIMATION LOOP

To test out our particles so far, we can quickly add

a simple animation loop and render out the scene.

Use the following code to create this new function

and call it the first time to start the loop. The

requestAnimationFrame function will continue to call

the animate function, optionally at 60 frames per

second. It also will automatically pause calls, when

the browser window is not active. We also get the

amount of time that passed between animation

frames from the three.js clock class. To render the

scene we simply pass the scene and camera to the

renderer.render function.

function animate() {

requestAnimationFrame( animate );

var d = clock.getDelta();

// render scene

“To make the scene

interactive, we can

adjust the camera

position in order to react

to the mouse”