3D on the Web with three.js

• Download demo - 120.2 KB

Introduction

With the introduction of HTML5, we are able to do infinite things on the web like- playing audio, video etc. The question is - can we develop 3d stuffs that can be run on the browser. It will be so cool  if we can develop a 3d games, a 3d logo, a complete 3d website with the web technology and run it on the browser.

The answer is yes we can - HTML5 offers a 3d library called WebGL - stands for web graphics library.

But the problem is that the web developer does not know about 3d and to create something in 3d - some one should have the basic knowlege of 3d in theory and 3d programming also which is not an easy stuff and will take so much time to learn and create something.

So, the solution is to use the existing library that can makes the things simple and here comes the three.js

Three.js is a javascript library that uses Webgl. It is used to create and display 3D computer graphics in a web browser. 

Background

You should have basic knowledge of-

• HTML5
• CSS
• JavaScript
• Some 3D fundamentals (optional)

Using the code

Installing three.js 

• Download three.js from github.
• Goto the download folder then build and copy three.min.js file and paste into the our working directory, say 3ddemo.
• Add that script into our html page. 

Introduction to 3D

A 3D world is consist of multiple no of elements but some of them are necessary in order to initiate a 3d world. These elements are-

• Camera (to see the objects -acts as an eye)
• A Scene 
• An object - cube, cylinder, bottle, a ship etc.
• Renderer - responsible for showing the objects

In three.js an object has three parts-

1. material - e.g.- color
2. geometry - e.g- cube, cylinder
3. mesh - it takes geometry and material and forms an object.

E.g- if you want a cube (geometry) of color-red (material) then mesh will take the geometry - cube and paint it with red color.

A Basic Scene

Initialize four variable - camera, scene, object, renderer 

var Camera; 
var Scene; 
var Cube;
var Renderer;

Create a basic scene consist of a box having red color

function InitScene()
{

  Scene = new THREE.Scene();

  //creating the camera
  var Fov=75; //it acts like camera lens
  var AspectRatio=window.innerWidth / window.innerHeight;
  var Near=1; //Set camera to see the objects- how much near
  var Far=10000; //set camera to see the objects- how much far
  Camera = new THREE.PerspectiveCamera( Fov, AspectRatio, Near,Far);
  Camera.position.z = 1000;
  
  //creating a render of size equal to our screen size
  Renderer = new THREE.WebGLRenderer();
  Renderer.setSize( window.innerWidth, window.innerHeight );

  geometry = new THREE.BoxGeometry( 200, 200, 200 );
  material = new THREE.MeshBasicMaterial( { color: 'red'} );
  Cube = new THREE.Mesh( geometry, material );
  
  Scene.add( Cube);

  document.body.appendChild( Renderer.domElement );

}

Updating the scene

function UpdateScene()
{
    //calling again UpdateScene to update the objects
    requestAnimationFrame( UpdateScene );
    
    //Render the objects
    Renderer.render( Scene, Camera );
}

Now we need to call the above method

//first call init method
InitScene();
//call update method which will (render)create an object on the screen
UpdateScene();

After runing the above code you will see that the above code will create a red cube inside our scene.

But a 3d world without animation does not looks good, so lets rotate our cube. In order to see the rotation effect we will have to write our code inside the UpdateScene method, because this is the part which is rendering the object. So let's update the UpdateScene method.

function UpdateScene()
{
    //calling again UpdateScene to update the objects
    requestAnimationFrame( UpdateScene );
    
    //Update the object rotation
    Cube.rotation.x += 0.01;
    Cube.rotation.y += 0.02;
    
    //Render the objects
    Renderer.render( Scene, Camera );
}

Now, our background color is not looking good. so let's change it-

For changing the background color ,we will have to add a property to the renderer - setClearColor means we will have to update the initscene method.

function InitScene()
{

  Scene = new THREE.Scene();

  //creating the camera
  var Fov=75; //it acts like camera lens
  var AspectRatio=window.innerWidth / window.innerHeight;
  var Near=1; //Set camera to see the objects- how much near
  var Far=10000; //set camera to see the objects- how much far
  Camera = new THREE.PerspectiveCamera( Fov, AspectRatio, Near,Far);
  Camera.position.z = 1000;
  
  //creating a render of size equal to our screen size
  Renderer = new THREE.WebGLRenderer();
  Renderer.setSize(window.innerWidth, window.innerHeight);

  Renderer.setClearColor('#82CAFA');
  geometry = new THREE.BoxGeometry( 200, 200, 200 );
  material = new THREE.MeshBasicMaterial( { color: 'red'} );
  Cube = new THREE.Mesh( geometry, material );
  
  Scene.add( Cube);

  document.body.appendChild( Renderer.domElement );

}

Wow, You have just created a 3d world in the browser.

What You Can Do

• You can create a 3d games with the javascript and three.js .
• You can make your website more cool with 3d .
• you can create an UI in 3d .
• And much more...