Three JS Introduction For Non Developers

Three.js Jumpstart

Three.js is a cross-browser compatible JavaScript library for creating 3-D graphics on a web browser. Three.js scripts are used with the HTML5 canvas element, SVG, and WebGL to render graphics. Big data and fully immersive interactive experiences are becoming ever more popular and Three.js is a great way to develop web solutions that are easily accessible by mass amounts of users. The source I will be referencing can be found and fiddled with at: http://codepen.io/MichaelMazur/pen/xGKyc .

This CodePen contains a nice triangular shape that rotates on a styled canvas. This should give you a basic understanding on how to create a scene and manipulate the visuals. From this brief post, you will know the basics of setting up a three.js scene, some great resources, and tips and tricks I wish I had known before I started.

Getting the Ball Rolling

To get started go to http://threejs.org/ and download the Three.js starter zip file, which contains the source and some great example code. The basic elements you need to render a blank scene to canvas are a scene, a camera, and a renderer. Once you set those three elements up you must add the renderer to the Document Object Model (DOM) and render the scene.


/// Set up a scene
var scene = new THREE.Scene();
/// Set up a camera
var camera = new THREE.PerspectiveCamera(80, window.innerWidth/window.innerHeight, 0.1, 1000);
/// Specify zoom level, this is optional.
camera.position.z = 5;
///Create renderer and set the size
var renderer = new THREE.WebGLRenderer({alpha:true});
renderer.setSize(window.innerWidth, window.innerHeight);
/// Add the render to the DOM.
document.body.appendChild(renderer.domElement);
//Recursive call to render the scene
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();


Now let us add a shape to the scene. You must define the geometry and material in order to render a shape in a scene. Here is a basic example on how to add a triangle wireframe shape.

var geometry = new THREE.SphereGeometry(3, 3, 3);
var material = new THREE.MeshBasicMaterial({color: 0x3f3f3f, wireframe: true});
var shape = new THREE.Mesh(geometry, material);
scene.add(shape);

That Is It, Go Nuts!

As you can quickly see, Three.js is a very powerful, well-documented library that is easy to learn. The Three.JS library has been in the forefront of creating 3-D graphics on web browsers, and is the best current solution. Setting up a scene, adding a camera, shapes, and rendering is all you need to get a project rolling; it is that easy. Now that you have the basics of three.JS, go nuts and try making your own awesome visualizations and interfaces!

Hindsight

In closing, I mentioned things I wish I had known. A few things were not very clear to me while getting started:

1. The orientation plane, some positioning/z-index issues:
   By default, the shapes are rendered to the center of the scene, which is laid out on a Cartesian plane. I found that there is an issue with absolute positioning of elements when you layer images, or text, on top of a scene. The z-index property is supposed to apply to elements that are position:absolute, position:fixed, or position:relative. When I had elements that were position:absolute, their z-index properties were being ignored and made layering difficult. Changing them to position:fixed corrected the issue; so if you see anything out of the ordinary with z-index, play with fixed and absolute positioning.
2. What to do with a scene after you leave the page or view:
   If you are using multiple pages or views on a site that do not include a rendered three.JS scene, you want to make sure that you are removing the scene from the DOM upon leaving the page or view. I was using Backbone to manage my particular site, so I just removed the whole view from the DOM.
3. Resizing a scene on a browser window resize:
   With the code I have provided here, there is no resizing. There are quite a few references on the web for resizing a scene with a browser resize. Threex does a great job of handling the re-rendering of scenes with browser window resizes. Look at the code; it is easy to digest. It should help you understand how to handle window resizes: http://learningthreejs.com/data/THREEx/docs/THREEx.WindowResize.html