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?

Some incredible projects created with Three.js (Links at the end of the article)

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

Soporte actual de WebGL

What do you need?

  • Basic knowledge of Javascript (maybe this helps you).
  • Be willing to have fun

Basic Boilerplate

  • 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

  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

  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.

You can see all the geometries in the documentation.

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.

You can see all materials in the documentation.

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

// Render Loop
var render = function () {
requestAnimationFrame( render );
// Your animated code goes hererenderer.render(scene, camera);
};
render();

Animating the cube

// 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

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

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 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 ❤.

I’m a generative artist and creative coder from Argentina. — http://hinecsoft.com