Intro to Three.js

1,057 views
912 views

Published on

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

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,057
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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: http://threejs.org/ https://developer.mozilla. org/ms/demos/tag/tech:webgl http://www.chromeexperiments.com/webgl/

×