Three.js
• https://github.com/mrdoob/three.js/
• JavaScript library
• render 3d in the browser (WebGL, canvas,
SVG... and CSS?!?!)
• easy-to-use!
Saturday, April 13, 13
Slide 3
Slide 3 text
http://mrdoob.github.com/three.js/
Saturday, April 13, 13
Slide 4
Slide 4 text
• http://lights.elliegoulding.com/
• http://www.netmagazine.com/features/
behind-scenes-lights-latest-webgl-sensation
• Interactive music video
Saturday, April 13, 13
Slide 5
Slide 5 text
MobileGraffiti
• An app to turn your phone into a
paintbrush.
• Made in 30 hours at AngelHack =)
• mobilegraffiti.com
Saturday, April 13, 13
Slide 6
Slide 6 text
http://www.eccesignum.org/blog/speaking-of-threejs
Saturday, April 13, 13
Slide 7
Slide 7 text
MobileGraffiti
Saturday, April 13, 13
Slide 8
Slide 8 text
MobileGraffiti
iPhone (path)
www
Saturday, April 13, 13
Slide 9
Slide 9 text
Three.js: the Basics
• renderer
• scene
• camera
• light
• object
Saturday, April 13, 13
Slide 10
Slide 10 text
Renderer Setup
Later...
Saturday, April 13, 13
Slide 11
Slide 11 text
Scene & Camera
Saturday, April 13, 13
Slide 12
Slide 12 text
http://www.real3dtutorials.com/tut00002.php
Saturday, April 13, 13
Slide 13
Slide 13 text
THREE.Mesh
Saturday, April 13, 13
Slide 14
Slide 14 text
render it!
Saturday, April 13, 13
Slide 15
Slide 15 text
Saturday, April 13, 13
Slide 16
Slide 16 text
Lambert!
Saturday, April 13, 13
Slide 17
Slide 17 text
Add a light
Saturday, April 13, 13
Slide 18
Slide 18 text
Saturday, April 13, 13
Slide 19
Slide 19 text
THREE.SphereGeometry
Saturday, April 13, 13
Slide 20
Slide 20 text
Saturday, April 13, 13
Slide 21
Slide 21 text
Wireframe
Saturday, April 13, 13
Slide 22
Slide 22 text
Wireframe
Saturday, April 13, 13
Slide 23
Slide 23 text
THREE.CylinderGeometry
Saturday, April 13, 13
Slide 24
Slide 24 text
Saturday, April 13, 13
Slide 25
Slide 25 text
Other Geometries
• Icosahedron
• Octahedron
• Plane
• Polyhedron
• Tetrahedron
• Text
• Torus
Saturday, April 13, 13