Tweet
Tweet

Slide 1

Slide 1 text

Introducing Three.js Judy Tuan @judytuna [email protected] Saturday, April 13, 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! 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

Slide 26

Slide 26 text

THREE.Line Saturday, April 13, 13

Slide 27

Slide 27 text

THREE.Line Saturday, April 13, 13

Slide 28

Slide 28 text

Lights • PointLight • DirectionalLight • SpotLight Saturday, April 13, 13

Slide 29

Slide 29 text

Some setup Saturday, April 13, 13

Slide 30

Slide 30 text

Point light Saturday, April 13, 13

Slide 31

Slide 31 text

Directional light Saturday, April 13, 13

Slide 32

Slide 32 text

Brief note on animating http://paulirish.com/2011/ requestanimationframe-for-smart-animating/ Saturday, April 13, 13

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Lots of resources • http://learningthreejs.com/ • http://learningwebgl.com/blog/ - weekly roundup of WebGL projects Saturday, April 13, 13