Three.js is a super cool library that lets us create 3D objects and scenes in the browser. I’ve been really excited about using it since I started working in web development. My goal here is to go over the basics, so that you can get started with three.js today (And build more cool stuff in the future!).

WHAT WE’LL BE BUILDING:

We’re going to start out with three.js by building a simple scene. In this scene is going to be a wireframe sphere that spins:

View fullscreen

I’ve split up this tutorial to make it a bit easier to follow:

- Part 1 will be about creating a scene and placing the object in the scene
- Part 2 will be about styling and animating the scene

LETS GET STARTED

To create this scene there are only 4 things we need:

  1. A Renderer (Canvas element)
  2. A Scene
  3. A Camera
  4. A mesh (Object to view)

I like to think of working in three.js as creating a movie. We need our actors (mesh objects), a camera to film with, and a scene where the action takes place. And then for a viewer to see what we’ve created, they need something to view it with. In real life this could be a television, theatre, or computer, but here we’re going to use an HTML <canvas> element.

To start, let’s create our markup. We need a regular HTML document, with a canvas element. And we need to include three.js. You can either download the files here, or include it with a cdn:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.min.js"></script>

As of writing this, three.js is in version 76, you can grab the most up to date version here.

Markup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple three.js scene</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.min.js"></script>
  <script>
  // Our code will go here
  </script>
</body>
</html>

We’re going to put our JavaScript in the empty script tag. And don’t add in a canvas element quite yet! We’ll be creating it with our JavaScript:

// First let's define the variables we'll need: 
var camera, scene, renderer;
var geometry, material, mesh;

In order to initialize our scene, we must first create the things we need, we’ll do this by creating our renderer, camera, scene, and mesh inside of an init() function:

var init = function() {

// Create a new Renderer element (this will be our canvas)
renderer = new THREE.WebGLRenderer();

// Then we'll set it so that it takes up the entire viewport
renderer.setSize( window.innerWidth, window.innerHeight );

// Now let's add our renderer to our document
document.body.appendChild( renderer.domElement );	

}

Once our renderer is in place, we can create our scene and camera. The camera accepts 4 arguments:

  1. The Field of view
  2. The aspect ratio Determines how our camera will play on our renderer. Usually this will be the width/height so the image is not squished.
  3. Near clipping plane How far away will we start viewing the scene.
  4. Far clipping place How far away will we stop viewing the scene.
// Inside init();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

Unless we specify it, the postition of our objects will be placed at (0,0,0) - That’s (x,y,z). Let’s position our camera to ensure it’s outside of our object (Very difficult to view our object when our camera is inside!):

// Inside init();
// Set the position of the camera to be 800 on the z-axis
camera.position.set(0,0,800);

Now that our camera is set up, lets add our object. An object needs the following:

  1. Geometry - This tells our object what shape it should take.
  2. Material - What our shape should look like.
  3. Mesh - This combines our geometry and material so we can add it to the scene.
// Inside init()
geometry = new THREE.SphereGeometry( 200, 15, 10 );
material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, wireframeLinewidth: 3 } );
mesh = new THREE.Mesh( geometry, material );

scene.add( mesh );

Finally, we need to render the scene:

var renderOnPage = function() {
	renderer.render( scene, camera );
}

Now that we have our functions in place, we just need to call them.

init();
renderOnPage();

You should see something very similar to what is displayed below:

End result of Part 1

If you don’t see a white sphere on a black background, feel free to download the finished file and compare code.

This might not look like much, but it’s a great start to putting together the pieces of three.js. In the next part, I’ll show you how to style the sphere, and how to make it spin!