WebGL & Three.jsHow to use 3D in the browser

What is Three.js?

Three.js is a popular abstraction layer on top of WebGL, which hides many of the headaches of using WebGL in a browser.

It wraps many GL objects in a Javascript object for easy manipulation

It also has a fallback renderer for Canvas or SVG for backwards compatibility

Basic Parts of a 3D Scene

1. Camera - the viewpoint of the user

2. Lights - the scene needs to be lit to be

visible

3. Objects - 3D meshes

4. Materials - Applied to the surface of a 3D

mesh to fill it in

Camera

// create a WebGL renderer, camera// and a scenevar renderer = new THREE.WebGLRenderer();

var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR,FAR);

var scene = new THREE.Scene();

Mesh

// create a new mesh with sphere geometryvar sphere = new THREE.Mesh( new THREE.SphereGeometry( radius, segments, rings), sphereMaterial);

// add the sphere to the scenescene.add(sphere);

Material

// create the sphere's materialvar sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xCC0000 });

Lights

// create a point lightvar ptLight= new THREE.PointLight(0xFFFFFF);// set its positionpointLight.position.x = 10;pointLight.position.y = 50;pointLight.position.z = 130;

// add to the scenescene.add(pointLight);

Render Loop

// draw!renderer.render(scene, camera);

// performance tip - let the browser call your // render loop as part of it’s refresh cyclewindow.requestAnimationFrame = function() { renderer.render(scene, camera); }

Just Skimming The Surface!

WebGL supports almost anything your graphics card / browser can provide!

See tons of examples at:http://threejs.org/https://developer.mozilla.org/ms/demos/tag/tech:webglhttp://www.chromeexperiments.com/webgl/