Interactive 3d for mobile web: Introducing Three.js

Dutch Mobile Conference in Amsterdam!
Fri Jun 7, 2013

www.mobileconference.nl/talks#judy-interactive-3d-for-mobile-web

This talk will introduce Three.js, a flexible and easy-to-use graphics library for rendering 3D. Three.js on mobile is an emerging technology, and is surprisingly responsive using CSS3D. I will present our MobileGraffiti app as a case study, but also teach core 3D concepts. Attendees will be inspired and also leave with a clear idea of how they would build their mobile web visualizations using 3D graphics and touch controls.

The MobileGraffiti app was created at AngelHack in 2012, with the goal of turning an iPhone into a paintbrush. 3D shapes sketched in the air by holding the iPhone were rendered on a Web page. Using new developments in Three.js, this app can now work on mobile web. See the original project video here: http://www.youtube.com/watch?v=DUG_W4Z0i1s

Transcript

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