Three.js introduction


Hi everybody, today I am writing about Three JS. I like it lot. :)

Three JS is 3D engine using Java script. I hope you like this sound. Yah really it’s a 3D engine using java script. It doesn’t need any plugins. It’s purely java script engine. It’s using WebGL and HTML 5 canvas elements to display 3D content. Mrdoob (Ricardo Cabello) was introduced Three js

WebGL is a Javascript API for 3D and 2D contents rendering in browsers. WebGL allow browser to access GPU acceleration also. So, 3D or 2D content can run much faster. If you want to know more about WebGL you can go through below Wikipedia link.


But WebGL still not available in some browsers like IE, Safari, Opera etc… It will work fine in Netscape browsers (Chrome & Firefox). So, In IE we can use HTML5 Canvas. But it runs very slow. I hope in  1 or 2 years WebGL will be available in all browsers.

Three Js is very simple to learn.  I will write here one example.

You can download Three JS from this link: https://github.com/mrdoob/three.js/downloads.

Following code creates a blue rectangle:

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

Creating Scene and Camera:
var scene = new THREE.Scene();//initialising scene
//adding camera
var sceneCamera = new THREE.PerspectiveCamera(40, width/height, 1, 1000);
sceneCamera.position.set(30,50,180);
sceneCamera.lookAt(scene.position);
scene.add(sceneCamera);

Creating light:
var sceneLight = new THREE.DirectionalLight(0xFFFFFF, 5);
sceneLight.position.z = 6;
scene.add(sceneLight);

Creating a Box:
var boxGM = new THREE.CubeGeometry(50,50,50);
var boxMaterial = new THREE.MeshLambertMaterial({color:0x5500FF});
var boxMesh = new THREE.Mesh(boxGM, boxMaterial);
scene.add(boxMesh);

Finally rendering:
renderer.render(scene, sceneCamera);

Note: Good out put in Google Chrome browser.

Above example creates a blue rectangle.  You can check some great examples here: http://mrdoob.github.com/three.js/

In my next article I will explain how to create Moving object using arrow keys. Any doubts or need assistance feel free to contact me at swamy.webdesigner@gmail.com.