Saturday, May 26, 2012

Three.JS Setup Tutorial

Ok guys, so I have been looking at getting back into web development by starting this blog, but mostly I am interested in creating HTML5 web applications. I have been looking at the open source Three.JS library which can use the HTML5 canvas element for rendering or WebGL. I am amazed at how quickly you can get up and running with full access to the GPU with such a short amount of code. I heavily commented it for anyone wishing to learn from it. It is basically the sample found at the Three.JS Github Page but separated and much more thoroughly commented. ;)

Here is the HTML page that we will use to run our javascript to view our 3D Scene:

<doctype html>
<html lang="en">
  <title>Three.js WebGL Test</title>
  <meta charset="utf-8">
    margin: 0px;
    background-color: #000000;
    overflow: hidden;
   <p style="color: #ff0000">
Sorry, you need Javascript in order to view this web app. 
    Please enable it in your browser settings.
  <script src="Three.js"></script>
  <script src="WebGLTest.js"></script>

Notice all that is really needed is to include source to the minified Three.js library and after that we're ready to get our own scripting on the go:

 * WebGLTest.js
 *  Author: Cory Gross, May 26, 2012
 *  Description: Used to illustrate setting up a WebGL renderer and camera
 *      using Three.js to be displayed using HTML5 technologies. Thoroughly
 *      commented to illustrate the core components of a typical 3D set up.
var camera, scene, renderer;  //Core Three.JS components
var geometry, material, mesh; //Other globals

/** Simply call the functions created below */

/** This function is responsible for creating all of our Three.js objects that
 *  that will be part of our scene. The core components and all other global 
 *  variables should be initialized here. */
function init()
    scene = new THREE.Scene(); //Scene object holds set of all 3D objects
/** We need to define a view frustrum for our camera, this is a 3D region
     *  of space which contains all the points visible to the camera. The field
     *  of view is the angle measured from the y-axis. Objects closer than the
     *  near plane or behind the far plane distance will not be rendered. */

    var FOV = 75;
    var aspectRatio = window.innerWidth / window.innerHeight;
    var near = 1;
    var far = 1000;

    /** Initialize our camera with frustrum view data and set position */
    camera = new THREE.PerspectiveCamera(FOV, aspectRatio, near, far);
    camera.position.z = 400; // Positive z axis comes out of screen

    /** Three.JS provides global namespace functions for creating geometry
     *  and core objects such as meshes and materials. */
    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});

    /** Apply the material to the geometry to create a 3D mesh object
     *  finally add that to our scene at default position at origin */
    mesh = new THREE.Mesh(geometry, material);

    /** Three.JS provides several renderers, WebGL is used here so Chrome is
     *  recommended but HTML5 Canvas is also supported along with others. */
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild( renderer.domElement );

/** This function does all animation before calling redrawing the scene */
function animate()
    /** Three.JS includes requestAnimationFrame shim. This is implemented
        by modern browsers to optimize animations */
    /** Rotate our mesh, slower around x axis, faster around y */
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    /** Redraw the scene based on our camera's projection */
    renderer.render(scene, camera);

After this all that is left to do is do is put these two files, along with the minified Three.js file, into a directory of your choice. Or upload it to a webserver and view in your favorite WebGL supported web browser. I will be posting more soon.

Here is my project uploaded to a free web host: check it out


Post a Comment