Our Thoughts

3D Graphics with HTML5 and Three.js

Share this:

The 3D graphic capabilities introduced in HTML5 are being used to build creative User Experiences that are highly interactive in nature. Previous versions of HTML and JavaScript engines were not capable of rendering graphics fast enough to run 3D graphics, resulting in developers using Adobe Flash to render animations on the browser. With the introduction of enhanced features like WebGL, Canvas, SVG & 3D CSS Transforms in HTML5, building a web application with 3D graphic capabilities in the browser has become a reality. A User Interface with visual representations & interactivity could be an important differentiator in today’s competitive world.

However, it is a lot of hard work to build a 3D graphic in HTML5 and JavaScript. Fortunately, most of the native code to render 3D using WebGL has been abstracted into a simple library Three.js. Three.js is a library that makes WebGL – 3D in the browser – easy to use. While a simple cube in raw WebGL would turn out hundreds of lines of JavaScript, a Three.js equivalent is only a fraction of that.

Before we get into an example of how to build a rotating cube wireframe using Three.js, let us understand 3D. In a 3D world, you would need the following

  1. A Scene
  2. A Camera
  3. A Renderer

This allows us to render a scene with a camera. Once the scene is setup, you can add objects to the scene to build your 3D world. A step by step guide to build a rotating cube is shown below.

//initialize attributes
var WIDTH = 400, HEIGHT = 300;
var VIEW_ANGLE = 75, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 10000;
var $canvas = $('#canvas'); 

// create a WebGL renderer, camera and a scene 
var renderer = new THREE.WebGLRenderer({ alpha: true }); 
var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR ); 
var scene = new THREE.Scene(); 

camera.position.z = 150; 

// start the renderer 
renderer.setSize(WIDTH, HEIGHT); 
$canvas.append(renderer.domElement);

In the above lines we initialize a few attributes, which are used to create the renderer, the camera and the scene. We then create a cube (object) to place in the scene and set its material to be a mesh grid.

// create the sphere's material
var material = new THREE.MeshBasicMaterial(
{
    color: 0x3498db,
    wireframe: true
});

var cube = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100, 5, 5, 5 ), material );

We then add the camera and cube to the scene.

scene.add(cube);
scene.add(camera);

and finally render the scene.

function render() {
    requestAnimationFrame(render);

    //rotate the cube
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
};

We have added a rotate animation to add some visual delight. That’s all! Your first 3D graphic animation in HTML5 is ready. View CODE and DEMO in JSFiddle.

Achieving 3D animations in browsers natively is a lot of fun and opens the doors for a lot of cool user interfaces, which were not possible earlier. Interactive maps, navigation apps, visual reporting are just some of the use cases where a delightful and meaningful User Experience can be given. Applications that differentiate themselves by providing non-traditional user interfaces are gaining traction much faster than competition.

Other Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Categories