Interactive 3d for mobile web: Introducing Three.js

Slide 1

Slide 1 text

Introducing Three.js: Interactive 3d... for mobile web! Judy Tuan @judytuna [email protected] Dutch Mobile Conference: Fri Jun 7, 2013 14:30 in E103 Friday, June 7, 13

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

http://mrdoob.github.com/three.js/ Friday, June 7, 13

Slide 4

Slide 4 text

• http://lights.elliegoulding.com/ • http://www.netmagazine.com/features/ behind-scenes-lights-latest-webgl-sensation • Interactive music video Friday, June 7, 13

Slide 5

Slide 5 text

MobileGrafﬁti • An app to turn your phone into a paintbrush. • Made in 30 hours at AngelHack =) • mobilegrafﬁti.com Friday, June 7, 13

Slide 6

Slide 6 text

http://www.eccesignum.org/blog/speaking-of-threejs Friday, June 7, 13

Slide 7

Slide 7 text

MobileGrafﬁti Friday, June 7, 13

Slide 8

Slide 8 text

MobileGrafﬁti iPhone (path) www Friday, June 7, 13

Slide 9

Slide 9 text

Three.js: the Basics • renderer • scene • camera • light • object Friday, June 7, 13

Slide 10

Slide 10 text

Renderer Setup Later... Friday, June 7, 13

Slide 11

Slide 11 text

Scene & Camera Friday, June 7, 13

Slide 12

Slide 12 text

http://www.real3dtutorials.com/tut00002.php Friday, June 7, 13

Slide 13

Slide 13 text

THREE.Mesh Friday, June 7, 13

Slide 14

Slide 14 text

render it! Friday, June 7, 13

Slide 15

Slide 15 text

Friday, June 7, 13

Slide 16

Slide 16 text

Lambert! Friday, June 7, 13

Slide 17

Slide 17 text

Add a light Friday, June 7, 13

Slide 18

Slide 18 text

Friday, June 7, 13

Slide 19

Slide 19 text

THREE.SphereGeometry Friday, June 7, 13

Slide 20

Slide 20 text

Friday, June 7, 13

Slide 21

Slide 21 text

Wireframe Friday, June 7, 13

Slide 22

Slide 22 text

Wireframe Friday, June 7, 13

Slide 23

Slide 23 text

THREE.CylinderGeometry Friday, June 7, 13

Slide 24

Slide 24 text

Friday, June 7, 13

Slide 25

Slide 25 text

Other Geometries • Icosahedron • Octahedron • Plane • Polyhedron • Tetrahedron • Text • Torus Friday, June 7, 13

Slide 26

Slide 26 text

THREE.Line Friday, June 7, 13

Slide 27

Slide 27 text

THREE.Line Friday, June 7, 13

Slide 28

Slide 28 text

Lights • PointLight • DirectionalLight • SpotLight Friday, June 7, 13

Slide 29

Slide 29 text

Some setup Friday, June 7, 13

Slide 30

Slide 30 text

Point light Friday, June 7, 13

Slide 31

Slide 31 text

Directional light Friday, June 7, 13

Slide 32

Slide 32 text

Brief note on animating http://paulirish.com/2011/ requestanimationframe-for-smart-animating/ Friday, June 7, 13

Slide 33

Slide 33 text

Controls • FirstPersonControls • FlyControls • PathControls • RollControls • TrackballControls http://threejsdoc.appspot.com/doc/ index.html#FlyControls Friday, June 7, 13

Slide 34

Slide 34 text

CSS WOAH • http://mrdoob.github.io/three.js/examples/ css3d_periodictable.html • touch events • beautiful on mobile safari Friday, June 7, 13

Slide 35

Slide 35 text

Docs • http://threejsdoc.appspot.com - documentation & fun examples! • http://mrdoob.github.com/three.js/docs/49/ Friday, June 7, 13

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

How to ﬁnd 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