Tag Archives: three.js tutorial

PROBESEVEN - An Insight to Conceptual 3D Graphic programming – three.js

The interesting aspect of Three.js is that it creates an independence in creating 3D animations. Yes! What I mean here that the creation of GPU takes place without any dependency on plug ins. This proves to be a high end library for the 3D requirements.

The origin of three.js was by Ricardo Cabello to GitHub in April 2010.

threejsYou would now travel with few basics for understanding how you could explore and experiment the concept. I do believe you would have the awareness of 3D and an intermediate level in Java Script with which you would be able to grab the focus on it. It is something like you can create cameras, any objects, the lights, materials and much more. You could also opt to choose the rendering and decide which part need to be used in the HTML 5’s Canvas, SVG or WebGL.

The Fundamentals:


The best part is three.js is an open source and available to you. The basic concepts in any 3D will follow the process of creating the following.

  • A Scene
  • A Renderer
  • A Camera
  • The Objects and Material

You should also be well aware that three.js supports better in Google Chrome browser. The next available option could be the Firefox browser.

Now you can learn where it can be used for example HTML.

3D Graphics in HTML:

So now since you have got your HTML files ready, you can decide on the template and decide where your JavaScript gets stored which is known as LIB.

<!doctype html>
<html lang="en">
<title>Sample object rendering</title>
<meta charset="utf-8"> 
  <script src="lib/three.min.js"></script>
  <script src="lib/OrbitControls.js"></script>

// Note here is where the 3D code need to be placed.
       <div id="show_object_1">
	    <canvas id="my_canvas_side_1"/>

Global Variables and Functions:

It is also required to set up some global variables inside the script tag and then call some functions.

// Here is where you would set up the scene, camera, and renderer as global variables.
 var container_side, scene_side, camera_side, render_side;
 var real_scene_side;

Creating the Scene:

It is important to create the scene which is our prime function. It would be like creating the width and the height of the browser window. It is also noted that creation of scene will take place in more places and hence it is best to grab once and store it.

// Globals from the previous step go here...
// Sets up the scene.
  function init() {
// Create the scene and set the scene size.
   scene_side = new THREE.Scene();
//custom height and width
    var width=250;
    var height=250;
// More code goes here next...

Creating the Renderer:

It is possible to use the SVG or Canvas Renderers but it is better to use the WebGL Renderer in order to take the advantage of GPU. This will aid to make many orders of magnitude and is better in performance.

On creating the renderer, we must append it to the DOM via the body element, so as to make three.js create a canvas inside the body element which can be used to render the other scenes.

// Sets up the scene.
  function init() {
// Code from previous steps goes here...
// create a renderer and add it to the DOM.
     var canvas_side = document.getElementById('my_canvas_side_1');
     render_side = new THREE.WebGLRenderer({canvas: canvas_side});
     render_side = new THREE.WebGLRenderer({antialias: true});
     container_side = document.getElementById('show_object_1');
// More code goes here next...

Creating a Camera:

Now, where the Scene and the Renderer are in place, we go ahead to create a Camera. The camera needs to be created considering few parameters.

FOV The Field of View is set with 45 Degrees.
Aspect Ratio This is the division of the browser width and height based on the Aspect Ratio.
Near Distance Mentioning the Near Distance means the distance at which the camera will start rendering the objects of the scene.
Far or Draw Distance This denotes that anything beyond the mentioned distance will not be rendered.

On creation of the Camera, we set the position by using XYZ coordinates. The default is 0,0,0 but we have to set for example Y value to 6 just to get some distance between our view and the mesh.

Finally, we need to add the camera to the scene.

// Sets up the scene.
 function init() {
// Code from previous steps goes here...
    var screen_width = width, screen_height = height;
    var view_angle = 45, aspect = screen_width / screen_height;
    var near = 0.1, far = 10000;
    camera_side = new THREE.PerspectiveCamera(view_angle, aspect, near, far);
// More code goes here next...

You might feel the completion but have you wondered what would be the status when the browser window is resized. For which we would be required to resample the new width and height in a variable within the function and we can use those values during the browser resize with a recalculated aspect ratio. It might also be required to callupdateProjectionMatrix() on the camera object. This might be an elaborate computation but once the browser gets resized it puts the thing in the frame back to normal.

// Sets up the scene.
  function init() {
// Code from previous steps goes here...
// Create an event listener that resizes the renderer with the browser window.
    window.addEventListener('resize', function() {
 render_side.setSize(width, height);
    camera_side.aspect = width/ height;
// More code goes here next...

Creating Lighting:

Now you could craft the scene with the setClearColorHex function on our WebGLRenderer object, it is required to set the background colour to the Treehouse grey hex color with an opacity of 1.

Now you use the light on the 3D objects for which you would need to add as a PointLight to the scene and set its position. It is also possible to use several other types of light that are available.

// Sets up the scene.
function init() { 
// Code from previous steps goes here...
// Set the background color of the scene 
render_side.setClearColorHex(0x333F47, 1);
// Create a light, set its position, and add it to the scene.
 var light = new THREE.PointLight(0xffffff);
 light.position.set(0, 100, 150);
   	 // More code goes here next...

Load a Geometry:

In order to get the geometry into the scene we are required to use the JSONLoader and the mesh has to be exported from Blender using the three.js JSON exporter. A callback is used inside the loader to set the material on the mesh.

It is perfect to go with the static geometry as whenever required the merged geometry will act as a single atomic shape. Also note that it is not possible to move the merged objects separated from each other and it is also not possible to add or remove without re-computing the whole geometry.

// Sets up the scene.
   function init() {
// Code from previous steps goes here...
//load object
    var jsonLoader = new THREE.JSONLoader();
    jsonLoader.load("object_1.js", addModelToScene_side);

// addModelToScene function is called back after model has loaded
    var ambientLight = new THREE.AmbientLight(0x404040); 
    scene_side.add(ambientLight); });
 // More code goes here next...


function addModelToScene_side(geometry,materials)
      var material = new THREE.MeshFaceMaterial(materials);
      real_scene_side = new THREE.Mesh(geometry, material);
      // this makes the object bigger or smaller 

Adding Controls:

Hurry! We are at the completion and it is interesting to add the orbit controls which we had included previously. This may not sound mandatory but it is interesting when included to easily drag the mouse across the mesh and the orbit. You could also see the zoom in and out with the mousewheel control.

// Sets up the scene.
  function init() {

// Code from previous steps goes here...
// Add OrbitControls so that we can pan around with the mouse.

  controls = new THREE.OrbitControls(camera_side, render_side.domElement);
// More code goes here next...

Rendering the Scene:

Now that we have completed the initialization function, we can now proceed with the animation function. To obtain a distingulished animation we need to redraw as per the camera orbits around the mesh.

// Sets up the scene.
  function init() {
// Code from previous steps goes here...

// Renders the scene and updates the render as needed.
function animate() {
// Render the scene. 

Thank You Readers, it had been immense pleasure to share the few of concepts which will be an encouragement for further learning. You could now await for more interesting articles to enrich your knowledge. Note me few comments to keep me cheerful!