Three.js is better than one.

Three.js

At Esign we often get the opportunity to work on new and exciting projects. This also means that we have to stay innovative and keep expanding our own knowledge about the Front-End world. We get to use new and exciting libraries and we get the freedom to try out new ideas.

For example we had a project which required a very specific and complex navigation. We did need an interactive HTML content that we could pan, zoom and rotate around. All while retaining the ability to select text, have links and include animations. This excluded the posibility of using anything image based. 

One of the colleagues mentioned a javascript library called Three.js and described how you can not only visualize 3D models with it, but it can also display HTML elements on these objects. Furthermore it has a navigation system that, if limited, would work exactly as we needed it to.

What is Three.js

Three.js is a Javascript library that allows the creation of GPU accelerated 3D objects and animations. It uses WebGL at it's base, which is a low level system that only draws points, lines, and triangles. Three.js can use WebGL to render your scenes on all modern browsers and can easily be included in your project as it can be found as an npm package.

Lets go through some of the basic functions of Three.js and some examples of how it can be used. Hopefully by the end of this talk we will have convinced you.

Setup

To set up Three.js we need a couple of things. 

First things first we need to install Three.js. To install the Three npm module, open a terminal window in your project folder and run:

npm install --save three

The package will be downloaded and installed. Then you're ready to import it in your code:

    
// Option 1: Import the entire three.js core library.
import * as THREE from 'three';

const scene = new THREE.Scene();

// Option 2: Import just the parts you need.
import { Scene } from 'three';

const scene = new Scene();

  

After installing the library we have a couple of basic concepts to go through:

1.  Three.js always consists of a scene. You can view this as a three-dimensional space to view your objects in. Like an infinitely large movie studio.
2. Secondly we need a renderer to view our scene and the objects in the scene. We have a couple of renderers to chose from, but the most important ones are the WebGLRenderer to render regular 3D objects and the CSS3DRenderer to render HTML elements in 3D space.
3. We also need a camera inside our scene to know where we want to look.
4. Without a light in our scene, we won't be able to see anything. So this is another essential part.
5. Lastly we need objects inside our scene to view. We can also give these objects a material, to give them a different color, texture, or surface.

1. Scene, camera and action!

To start our Three.js scene, we first create a scene, choose a renderer and place our camera.

    
function init() {
  // Setup
  renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#canvas")});

  // Make and setup a camera.
  camera = new THREE.PerspectiveCamera(70, 1, 1, 1000);
  camera.position.z = 400;

  // Make a scene
  scene = new THREE.Scene();

  

2. Create our star

If we want to have anything interesting to look at in our scene we need to create an object. We can do this in a few steps.

    
// Make a cube.
  var geometry = new THREE.BoxGeometry(200, 200, 200);

  // Make a material
  var material = new THREE.MeshPhongMaterial({
    ambient: 0x00505f,
    color: 0xFFC90,
    specular: 0xffffff,
    shininess: 50,
    shading: THREE.SmoothShading
  });

  // Create a mesh based on the geometry and material
  mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x = 20;
  mesh.rotation.y = 15;
  mesh.rotation.z = 20;
  scene.add(mesh);

  

By giving our object some rotation, we will be able to see the cube in 3D. However without lights it's a bit to dark to see anything. So lets add those too.

Add the following code below our cube code. You should be able to see the cube now.

    
// Add 2 lights.
  var light1 = new THREE.PointLight(0xff0040, 2, 0);
  light1.position.set(200, 100, 300);
  scene.add(light1);

  var light2 = new THREE.PointLight(0x0040ff, 2, 0);
  light2.position.set(-200, 100, 300);
  scene.add(light2);

  

3. Add some flair

We can add some needed functionality and flair to our cube, by animating it. Create a function called animate and call it at the top of your Javascript. Inside this fuction we want to change the value of the objects rotation as followed:

    
function animate() {
  resize();
  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.01;

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

  

4. Result

The result should be the following rotating cube.

Conclusion

This ofcourse is one of the most basic examples of a scene you can build in Three.js. 

You could import your own 3D models, create entire landscapes, transform HTML elements in 3D space and much much more.