Three.js is a JavaScript library for rendering 3D graphics in a web browser. It uses WebGL to render scenes made of objects like meshes, materials, lights and textures. A basic Three.js program creates a renderer, camera and scene, then adds objects to the scene and calls renderer.render() to display the scene. Key APIs include those for lights, geometries, materials, textures and offscreen rendering using render targets. Shaders can be passed to materials for custom rendering effects.
2. 2014
WHAT IS THREE.JS ?
A rendering library for rendering 3D, 2D objects – using Javascript
Encapsulates all GL functionality discussed till now, in an easily usable API
Employs a scenegraph concept
Parent-child node relationships
GFX2014 Advanced Graphics Workshop, Bangalore
Canvas
WebGL
Three.js
OpenGL
ES2.0
Mesh
Material
ImageUtils
Camera
Scene
3. 2014
DRAWING WITH THREE.JS
Drawing with Three.js consists of creating
A renderer
A camera
A scene that contains many objects (meshes, materials,
lights, textures) and groups of objects
4. 2014
RENDERERS
Two types of renderers
GPU based OpenGL (WebGL) renderer
THREE.WebGLRenderer( context3dStore );
Canvas based 2D renderer fallback
THREE.CanvasRenderer( { canvas: theCanvas } );
5. 2014
THREE.JS - PROGRAMMING FLOW
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( fieldOfViewAngle, aspect,
near, far );
renderer = new THREE.WebGLRenderer( { canvas: theCanvas,
antialias: true } );
scene.add(triangle);
renderer.render( scene, camera );
6. 2014
IMPORTANT APIS
Lighting
var light = new THREE.DirectionalLight( 0xffffff );
Add the light to the scene just like any other object Scene.add(light);
Objects
Shape
var heartShape = new THREE.Shape();
heartShape.moveTo( x + 25, y + 25 );
Geometry
CubeGeometry
PlaneGeometry
SphereGeometry
TorusGeometry
IcosahedronGeometry
7. 2014
IMPORTANT APIS (CONTD)
Materials
MeshBasicMaterial (plain color)
MeshLambertMaterial (lighting associated)
MeshPhongMaterial (lighting associated)
Associated with a mesh, along with Geometry
new THREE.Mesh( tubeGeom, redMat );
8. 2014
BLENDING WITH THREE.JS
Specify the blending property of material
THREE.NormalBlending (default)
THREE.NoBlending
Example
var material = new THREE.MeshBasicMaterial({ color: 0x0000ff, transparent: true,
opacity: .5, blending: THREE.NoBlending });
9. 2014
SPECIFYING TEXTURES
Load from source
THREE.ImageUtils.loadTexture( sourceURL);
Other properties of texture
texture.wrapT (THREE.RepeatWrapping)
texture.wrapS (THREE.ClampToEdgeWrapping)
texture.repeat
texture.offset
14. 2014
PASSING SHADERS FOR MATERIALS
var myMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById( ‘myvertexsh' ).textContent,
fragmentShader: document.getElementById( ‘myfragsh' ).textContent
});
Note that “projectionMatrix” and “modelViewMatrix” are provided automatically
by three.js in the vertex shader so no need to pass on the data
GFX2014 Advanced Graphics Workshop, Bangalore 14