Three.js Tutorial – Hello World Cube

In this post, we’ll talk about Three.js. A javascript library and API that allows you to create a 2D or 3D graphic on your web page easily without having to deal directly with WebGL using just javascript. Creating an immersive web experience with cross browsers support.

What is Three.js

Three.js is basically an abstracted layer build on top of webGL to make it’s easier to use. Users can just use their web browser without having to download any additional framework or application in order to experience 3D graphic. Checkout some demos of three.js implementation here

Since three.js is based on javascript, it’s relatively easy to add interactivity between 3D objects and user interfaces like keyboard and mouse. So three.js is perfectly suitable for making a 3D game on web platform.

How to Use Three.js

To show you the ideas of fundamental steps to create an animating 3D object with three.js, we’re going to add a spinning cube to an empty webpage.

Setting Up Scene

For every project, First thing we need to do is to create a scene. Scene is like a universe where we can add objects, camera and lights etc.

var scene = new THREE.Scene();

Next we need to setup the camera, There are perspective and orthographic cameras. For most of the time, we’re going to stick with perspective which is a normal camera type where you will see closer object bigger and smaller when they’re away. For orthography camera, you’ll see an isometric view of specified angle with no perspective.

So the first parameter of the camera is the field of view, basically it’s the width of the perception angle. Let’s set it to 75, next is the aspect ratio, we’re going to use current width divided by height.

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

Next, we’re going to setup the renderer. You can think of it as a rendering engine. Let’s use WebGL renderer for now. You can customize the rendering option here such as anti-aliasing. \

var renderer = new THREE.WebGLRenderer({antialias: true});

We’ll use setsize method to designate the rendering resolution. Let’s use current width and height. Then append the element from the renderer to your html body or element that you want

renderer.setSize(window.innerWidth,window.innerHeight);
$('body').append(renderer.domElement);

Creating a Cube

Now we have the scene and camera setup. Next we’re going to create a cube.

First is to create a geometry, think of it as a skeleton for our object. There are many types of geometry available but since we’re going to create a cube, we’re going to use BoxGeometry with equal size. on all dimensions

var geometry = new THREE.BoxGeometry(1,1,1);

Now we’re going to need a skin to cover our geometry. So we need material which define the characteristic of the skin such as opacity, reflection, or texture. Let’s use MeshBasicMaterial (solid color with no reflection and lighting calculation) with red color for now.

var material = new THREE.MeshBasicMaterial({color: 0xff0000});

Now we can create our cube by creating a Mesh object using our geometry and material
and add the cube to the scene.

var cube = new THREE.Mesh(geometry,material);
scene.add(cube);

But since we just added everything to the scene without specifying the position, now our cube is on the same spot as camera and won’t be rendered. Let’s move it a little bit. I’m going to change the rotation angle as well.

cube.position.z = -5;
cube.rotation.x = 10;
cube.rotation.y = 5;

Call a render method on renderer object and pass the scene and camera to it.

renderer.render(scene,camera);

And here is the rendered cube.

Adding Animation

For this tutorial, we’re going to create an animation loop from recursive function call.

First create a function to define the action for each frame. Inside, we will increment the rotation a little bit and call the render method. At the end of function, we’ll call requestAnimationFrame. This method will be invoked by the browsers at the current display refresh rate. Usually 60 times per second. We’ll pass the current animate function to it so it’s a recursive loop.

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

Start the animation loop by calling our function.

animate();

See how the animation works in this video.

So that the basic of how to use three.js to create a simple 3D animation on your website. Hope you enjoy and feel free to like or subscribe to our Facebook and Youtube Channel to stay tune for the next tutorial!

Source Code

<html>
        <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script src="jquery-2.1.4.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css">
        </head>
        <body>
        <div id="navbar"><span>Three.js Tutorial</span></div>
        <script src="three.min.js"></script>
        <script>
          var scene = new THREE.Scene();
          var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight);

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

          var geometry = new THREE.BoxGeometry(1,1,1);
          var material = new THREE.MeshBasicMaterial({color: 0xff0000});
          var cube = new THREE.Mesh(geometry,material);
          scene.add(cube);

          cube.position.z = -5;
          cube.rotation.x = 10;
          cube.rotation.y = 5;

          renderer.render(scene,camera);

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

          animate();
        </script>
        </body>
</html>