Introducing Three.js

April 11, 2013, at @grio_sf!

http://www.meetup.com/SF-Mobile-App-Developers/events/109805222/

Transcript

1. Introducing Three.js Judy Tuan @judytuna judytuna@gmail.com Saturday, April 13, 13
2. 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
3. http://mrdoob.github.com/three.js/ Saturday, April 13, 13
4. • http://lights.elliegoulding.com/ • http://www.netmagazine.com/features/ behind-scenes-lights-latest-webgl-sensation • Interactive music video Saturday, April 13, 13
5. MobileGraffiti • An app to turn your phone into a paintbrush. • Made in 30 hours at AngelHack =) • mobilegraffiti.com Saturday, April 13, 13
6. http://www.eccesignum.org/blog/speaking-of-threejs Saturday, April 13, 13
7. MobileGraffiti Saturday, April 13, 13
8. MobileGraffiti iPhone (path) www Saturday, April 13, 13
9. Three.js: the Basics • renderer • scene • camera • light • object Saturday, April 13, 13
10. Renderer Setup Later... Saturday, April 13, 13
11. Scene & Camera Saturday, April 13, 13
12. http://www.real3dtutorials.com/tut00002.php Saturday, April 13, 13
13. THREE.Mesh Saturday, April 13, 13
14. render it! Saturday, April 13, 13
15. Saturday, April 13, 13
16. Lambert! Saturday, April 13, 13
17. Add a light Saturday, April 13, 13
18. Saturday, April 13, 13
19. THREE.SphereGeometry Saturday, April 13, 13
20. Saturday, April 13, 13
21. Wireframe Saturday, April 13, 13
22. Wireframe Saturday, April 13, 13
23. THREE.CylinderGeometry Saturday, April 13, 13
24. Saturday, April 13, 13
25. Other Geometries • Icosahedron • Octahedron • Plane • Polyhedron • Tetrahedron • Text • Torus Saturday, April 13, 13
26. THREE.Line Saturday, April 13, 13
27. THREE.Line Saturday, April 13, 13
28. Lights • PointLight • DirectionalLight • SpotLight Saturday, April 13, 13
29. Some setup Saturday, April 13, 13
30. Point light Saturday, April 13, 13
31. Directional light Saturday, April 13, 13
32. Brief note on animating http://paulirish.com/2011/ requestanimationframe-for-smart-animating/ Saturday, April 13, 13
33. Controls • FirstPersonControls • FlyControls • PathControls • RollControls • TrackballControls http://threejsdoc.appspot.com/doc/ index.html#FlyControls Saturday, April 13, 13
34. CSS WOAH • http://mrdoob.github.io/three.js/examples/ css3d_periodictable.html • touch events • beautiful on mobile safari Saturday, April 13, 13
35. Docs • http://threejsdoc.appspot.com - documentation & fun examples! • http://mrdoob.github.com/three.js/docs/49/ Saturday, April 13, 13
36. Lots of resources • http://learningthreejs.com/ • http://learningwebgl.com/blog/ - weekly roundup of WebGL projects Saturday, April 13, 13