Getting started with Three.js - Part I

Intro

threejs is a fantastic and powerful 3D graphics framework built on top of WebGL.

In this threejs series of posts we will try to cover the basics as well as advanced features we can use to build anything from a 3D Earth replica to a complete 3D game.


The only thing you need to run all the examples is a WebGL enabled browser. Isn't that awesome!

In threejs, there are three basic components for anything to be drawn on your browser, they are:

  • Scene,
  • Renderer and
  • Camera

Lets get started and create a scene,

var scene = new THREE.Scene();

The above statement will give you an instance of a scene to which will be adding other graphical components later on.

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

threejs gives different types of camera, as this is the basic we will stick to the PerspectiveCamera. The first argument is the field of view or fov as called, it has been explained pretty well here. The next argument is the aspect ratio and other two are the values for the near and far clipping plane, which means object nearer and farther from those values would not be rendered.

We have also set the z position of the camera so that we can view the scene from a bit far.

Now we will create a renderer which does all the work for us.

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

What we did here is create an instance of THREE.WebGLRenderer which is one of the renderers provided by threejs. In the next statement we set the size of the renderer and finally we append the canvas DOM element to document.

Lets add a sphere to our scene, following statements will give you a sphere object which can be added to the scene we created above.

var geometry = new THREE.SphereGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, wireframe: true} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

In the above statements we first create a sphere geometry and a material to apply on it. For now we have used MeshBasicMaterial though there are others available, once we have a geometry and material ready we pass these two into a Mesh constructor which creates a sphere by applying the material to the geometry object. We have passed wireframe:true to the material so that we can have the inside out view of the sphere.

At the end we add this to the scene we created previously so that it can be rendered.

Last thing which is left is to render all this on the browser, for that we will need a render loop. Anyone who has done 2D canvas games or animations would be aware of what render loop is, for others its simply a recursive call to the render/loop function that happens at specific intervals. Below is a very basic render loop for our scene.

function render() {
  requestAnimationFrame( render );
  renderer.render( scene, camera );
}
render();

requestAnimationFrame is a browser API which provides for efficient draw calls to the browser then the traditional setInterval method used for calling functions at time gaps.

The end result of the above code will look like this:

This is just too basic, lets add some movement to this sphere. What about rotating it? Fairly easy.

function render() {    
  requestAnimationFrame( render );
  sphere.rotation.y = +new Date() /10000; //just a single line addition
  renderer.render( scene, camera );
}
render();

And here is the result:

Thats all in this first part of the threejs series, let me know if you have any doubts or questions in the comments below.

PS: I have just started playing with Threejs and sharing my learnings through this series of blog posts, if you have a better way to do things with threejs then please share and i will be happy to update this post.

comments powered by Disqus