View
673
Download
0
Category
Preview:
DESCRIPTION
Allen Cook's introduction to Three.js for 3D rendering using javascript.
Citation preview
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/
Recommended