Three.js 101 : Hello World! (Part 1)

An introduction to Three.js from a Creative Coder perspective.

I’ve been using Three.js since a year ago, creating artistic projects. I don’t consider myself an expert, these articles are just for share my struggles. I hope it helps you!

What is Three.js?

Three.js is a Javascript library developed by Ricardo Cabello (@mrdoob) in 2010 (today it has many contributors on Github). This incredible tool let us work with 3D graphics on the browser, using WebGL in a very simple and intuitive way. This explanation could be more extensive, but to sum up, Three.js is an excellent way to bring Creative Coding to the browser.

WebGL let us create rich interactive experiences in a lot of devices and browsers.

What do you need?

• An up to date browser (I prefer to use Google Chrome).
• Basic knowledge of Javascript (maybe this helps you).
• Be willing to have fun

Basic Boilerplate

Well it’s time to start, take a deep breath and open your favorite editor. We’ll create two files (for better readability).

• index.html (here we import Three.js from a CDN).
• script.js (here goes our code).

That looks like a lot of code, but it isn’t, let’s analyze it part by part. If everything is fine you should see this:

To be honest, that’s not a very exciting example, but we will spice it up in a moment, let’s analyze what is happening behind.

WebGlRenderer, Scene and Camera

This is the first common pattern we are going to see in every Three.js app.

1. Create a Renderer.
2. Create a Scene.
3. Create a Camera.

The renderer is the place where we are going to put the result of our scene. In Three.js we can have multiple scenes and each one can have different objects.

Here we create our WebGLRenderer, we pass it the size of the window as a parameter and then append it to the DOM.

var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Create an empty scene where we are going to add our objects:

var scene = new THREE.Scene();

And by last we create a camera, passing as parameters the FOV, the Aspect ratio and the near plane and far plane :

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

Once this is done we have the 3 fundamental elements of a Three.js application.

Geometry, Material and Mesh

The second common pattern is adding objects to the scene:

1. Create a Geometry
2. Create a Material
3. Create a Mesh.
4. Add mesh to scene.

In Three.js a Mesh is the composition of a Geometry with a Material.

A Geometry is the mathematical formula of an object, in Three.js we have many geometries, we’ll explore it in future chapters. A Geometry give us the vertices of the object we want to add to the scene.

A Material can be defined as the properties of an object and its behavior with the light sources of the scene. As you can see in the following image there are different types of materials.

Now that we know what a mesh, a geometry and a material are, we are going to add them to the scene. In this case we are creating a cube with basic Material:

// Create the Geometry passing the size
var geometry = new THREE.BoxGeometry( 1, 1, 1 );

// Create the Material passing the color
var material = new THREE.MeshBasicMaterial( { color: "#433F81" } );

// Create the Mesh
var cube = new THREE.Mesh( geometry, material );

// Add the mesh to the scene
scene.add( cube );

RequestAnimationFrame

The last piece of code is the one that allows us to animate the scene, for this purpose we use requestAnimationFrame, which allows us to have a function that runs at 60 frames per second (at best).

// Render Loop
var render = function () {
  requestAnimationFrame( render );

// Your animated code goes here

renderer.render(scene, camera);
};

render();

Animating the cube

In order to animate the cube inside our render loop, we need to change it’s properties. When we create a Mesh we have access to a gr0up of properties that are very useful at the moment of animating.

// Rotation (XYZ) in radians. 
cube.rotation.x
cube.rotation.y
cube.rotation.z

// Position (XYZ)
cube.position.x
cube.position.y
cube.position.z

// Scale (XYZ) 
cube.scale.x
cube.scale.y
cube.scale.z

In our example we animate the X and Y rotation of the cube:

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

The console is your friend

The console is an essential tool when we are working with Three.js, I prefer to use Chrome’s, but today all the browsers have a decent one.

To finish understanding how the Mesh properties work I think the best way is to do it with the console in real time.

Let’s improve our code

Now that we understand the logic of the example, I’m going to add more pieces to the scene, with the purpose of generate a more complex one..

As an exercise from this example try to create your own alternative. Don’t be afraid of break the code, fork it and share it! I would love to see your versions.

Give Me Feedback

I have in mind keep writing these articles, I would love to know if these are useful and if you want me to write about an specific theme. Please don’t hesitate to write me a comment or send me a message.

I invite you to check out my personal web page and following me on Instagram to see more projects created with Three.js, it would help me a lot ❤.

Amazing Three.js Projects

• http://codeology.braintreepayments.com
• https://avseoul.github.io/particleEqualizer/index.html
• http://www.cryptarismission.com/#!/training-room/4
• https://kuva.io/hair-simulation/
• http://www.bjork.com/
• http://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/
• http://www.dennis.video/
• http://unseen-music.com/yume/
• http://www.onformative.com/work/porsche-blackbox
• http://audiograph.xyz/