Getting started with Three.js

Figure 1.0 Scene

3D in the browser, awesome right?

Why it is awesome? as programmers/designers we put lots of effort to make our app(web site) very user friendly and attractive. We spent most of our time with 2D world(programmer — computer) even we live in the 3D world. what if we can give our application users a different experience/feeling than what they use to feel every day. Yes we can give that by using 3D in the browser, three.js can help us to achieve that. Let’s start to learn Three.js then.

What is Three.js?

Three.js is a JavaScript library(or a Application Programming Interface) which we can use to create 3D animated graphics and display it in the web browsers. Can create a full web application or integrate it as a part of the web application to make the web app nicer. Three.js use WebGL to create 3D graphics. Ok why we need WebGL to create 3D graphics why it cannot be done directly in the browser using JavaScript languages or some other tool, what WebGL actually do.

What is WebGL?

WebGL is an API for to access computer graphic hardware using JavaScript and render a output into a web page’s “canves” html element. In real time 3D graphics need vast amount of calculation to do withing a short time of period. CPU(Central processing unit) do the calculations but it is not fast enough to deal with the real time 3D graphic rendering, so we use GPU(Graphic processing unit) to deal with 3D graphic while the CPU do other stuff for user.

The Basic

Yes of course you can do some crazy stuff with 3D graphics once you are a expert with three.js. Let’s walk through the basic first.

In our 3D world what we have is

  • Scene
  • Renderer
  • Camera
  • Objects with different type of materials

Let’s create a scene and adds a camera and object(cube in this example) into that scene. After that can create a WebGL renderer and adds it’s view port in the document body.

// Define global variables
var camera, scene, renderer, geometry, material, mesh;
// Initialize the scene, camera, object(box), renderer
init();
// Adding some rotation animation
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75,
window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
   geometry = new THREE.BoxGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial(
{ color: 0xff0000,wireframe: true });
   mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
   renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
   document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;

renderer.render( scene, camera );
}

Click here to see what above code do.

  1. Scene

Scene allow us to setup what and where is to be rendered by three.js. This is the place where we put our objects, camera and lights. Constructor method allow us to create a new scene. Click here to see the official document.

Scene()

In above init() method we create a new object of the scene and assign it into a global variable call “scene”. Later we render that scene in the browser window.

2. Renderer

WebGLRenderer display our beautiful scene using WebGL. Constructor allow us to pass object as a parameter. click here to see the full list of properties and methods that provide by WebGLRenderer

WebGLRenderer(parameters: Object)

3. Camera

In three.js there are few type of cameras and we don’t call directly to the Camera() object class. Most of the time we call PerspectiveCamera or OrthographicCamera. See here for full details of the Camera class.

4. Objects

Object can be a any geometric shape and we can assign materials for those geometries. There are some in-build geometries in three.js and also we can create our own shapes(using other 3D graphics tools) and use it with three.js. Here is the complete list of details.

geometry = new THREE.BoxGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial(
{ color: 0xff0000,wireframe: true });
mesh = new THREE.Mesh( geometry, material );

Well i hope that this brief introduction to the three.js will help you to understand basic of the three.js. And don’t forget to look these awesome feature projects. Have a nice day!.