Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to Three.js


Published on

Allen Cook's introduction to Three.js for 3D rendering using javascript.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

Intro to Three.js

  1. 1. WebGL & Three.js How to use 3D in the browser
  2. 2. 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
  3. 3. 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
  4. 4. Camera // create a WebGL renderer, camera // and a scene var renderer = new THREE.WebGLRenderer(); var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR,FAR); var scene = new THREE.Scene();
  5. 5. Mesh // create a new mesh with sphere geometry var sphere = new THREE.Mesh( new THREE.SphereGeometry( radius, segments, rings), sphereMaterial); // add the sphere to the scene scene.add(sphere);
  6. 6. Material // create the sphere's material var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xCC0000 });
  7. 7. Lights // create a point light var ptLight= new THREE.PointLight(0xFFFFFF); // set its position pointLight.position.x = 10; pointLight.position.y = 50; pointLight.position.z = 130; // add to the scene scene.add(pointLight);
  8. 8. Render Loop // draw! renderer.render(scene, camera); // performance tip - let the browser call your // render loop as part of it’s refresh cycle window.requestAnimationFrame = function() { renderer.render(scene, camera); }
  9. 9. Just Skimming The Surface! WebGL supports almost anything your graphics card / browser can provide! See tons of examples at: https://developer.mozilla. org/ms/demos/tag/tech:webgl