Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducing Three.js

Judy Tuan
April 11, 2013
Programming
0
250

Introducing Three.js

April 11, 2013, at @grio_sf!

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

Judy Tuan

April 11, 2013
Tweet

More Decks by Judy Tuan

See All by Judy Tuan
Interactive 3d for mobile web: Introducing Three.js
judytuna
0
2.1k

Other Decks in Programming

See All in Programming
VS Code をプロダクトにどう取り込むか
onomax
1
360
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
0
460
ONE WEDGE_company_guide
1wedge_one
0
480
SIMD Parallel Programming with the Vector API
josepaumard
0
170
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
720
Apache Hive 4 on Treasure Data
ryukobayashi
0
320
Git Lint
bkuhlmann
4
750
Anthropic Cookbook のおすすめレシピ
schroneko
7
970
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.3k
Snowflakeで眠ったデータを起こそう！
estie
0
120
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Bash Introduction
62gerente
604
210k
Web Components: a chance to create the future
zenorocha
305
41k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Faster Mobile Websites
deanohume
299
30k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Clear Off the Table
cherdarchuk
84
310k
Designing the Hi-DPI Web
ddemaree
276
33k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Fireside Chat
paigeccino
21
2.6k

Transcript

  1. Introducing Three.js Judy Tuan @judytuna [email protected] 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