The Beginner’s Guide to Beginning Three.js

Let’s start at the beginning.

What is Three.js?

Three.js is a Javascript library for creating 3D web graphics within the web browser created by Ricardo Cabello using WebGL.

What is WebGL?

WebGL is a Javascript API that allows the browser to render 3D graphics without the use of any plug-ins. WebGL allows for GPU accelerated rendering within an HTML5 canvas element on a webpage. The first stable release 1.0, was released in March of 2011 and now version 2.0 has been released in January of 2017.

Our Goals

  • Get started with the Three.js library
  • Create our first scene
  • Put something in the scene
  • Make it move
  • Give the scene some light

Setup

This is the beginners guide so we’re starting simple. We’re only going to use two files

  • index.js (or whatever you want to name it)
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
const renderer = new THREE.WebGLRenderer({ antialias: true})
  • Aspect Ratio — Think like a TV screen. If we do width / height we’ll be fine in most all situations. Everything else will squish our scene.
  • Near clipping plane — Elements closer than this won’t be render on the screen. If we were shooting our movie anything behind the camera wouldn’t show up. We’re basically using 0 for this.
  • Far clipping plane — Elements further away than this won’t render. Too high of a value might cause performance issues.
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )
  • Material — What our object is made of. This will include things like the color and it’ll determine how light interacts with our object. If we had a pebble and a metal ball bearing, they would have a similar geometry, but their material is very different and it would change how it looks to the viewer.
  • Mesh — The combination of geometry and material.
var geometry = new THREE.BoxGeometry( 1, 1, 1)
var material = new THREE.MeshBasicMaterial( { color: 0xff0051 })
var cube = new THREE.Mesh ( geometry, material )
scene.add( cube )
renderer.render( scene, camera )
camera.position.z = 5
3D rendering at it’s finest

Animation Time

Writing our Three.js animation won’t be too different to making any Javascript animation, except for the fact that we’ll be calling our renderer on every frame. Here’s our basic spin animation:

function animate() {
requestAnimationFrame( animate )
cube.rotation.x += 0.04;
cube.rotation.y += 0.04;
renderer.render( scene, camera )
}
animate()

Let There Be Light

The real power of 3D rendering comes from how it is able to deal with light sources to create realistic looking scenes. How reflective our materials are, shadows, how colors appear, ect. all rely on light.

var ambientLight = new THREE.AmbientLight ( 0xffffff, 0.5)
scene.add( ambientLight )
var pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.set( 25, 50, 25 );
scene.add( pointLight );
var material = new THREE.MeshStandardMaterial( { color: 0xff0051 })
var geometry = new THREE.BoxGeometry( 3, 3, 3)
var material = new THREE.MeshBasicMaterial( {
color: "#dadada", wireframe: true, transparent: true
})
var wireframeCube = new THREE.Mesh ( geometry, material )
scene.add( wireframeCube )
function animate() {
requestAnimationFrame( animate )
cube.rotation.x += 0.04;
cube.rotation.y += 0.04;
wireframeCube.rotation.x -= 0.01;
wireframeCube.rotation.y -= 0.01;

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

Just the beginning

As the title suggests, this is just the tip of the iceberg. Here are some cool Three.js links to learn more.

Aspiring developer, former designer, current Warriors hater http://benjamincoleman.me/