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

Introducing Three.js

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Judy Tuan Judy Tuan
April 11, 2013
Programming
280
0

Introducing Three.js

April 11, 2013, at @grio_sf!

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

Avatar for Judy Tuan

Judy Tuan

April 11, 2013

More Decks by Judy Tuan

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

Other Decks in Programming

See All in Programming
Symfonyの特性(設計思想)を手軽に活かす特性(trait)
Avatar for ICKX ickx
0
130
L’IA au service des devs : Anatomie d'un assistant de Code Review
Avatar for Thomas Boileau toham
0
220
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
Avatar for 武田 憲太郎 kentaroutakeda
5
2.5k
Feature Toggle は捨てやすく使おう
Avatar for gennei gennei
0
540
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
Avatar for hideki kinjyo o0h
PRO
0
200
KagglerがMixSeekを触ってみた
Avatar for Morim morim
0
370
Redox OS でのネームスペース管理と chroot の実現
Avatar for isan isanethen
0
570
Vibe NLP for Applied NLP
Avatar for Ines Montani inesmontani
PRO
0
310
PHP でエミュレータを自作して Ubuntu を動かそう
Avatar for memory m3m0r7
PRO
2
180
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
Avatar for Sora Arakawa arkw
0
190
セグメントとターゲットを意識するプロポーザルの書き方 〜採択の鍵は、誰に刺すかを見極めるマーケティング戦略にある〜
Avatar for memory m3m0r7
PRO
0
460
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
Avatar for Rodrigo Serradura serradura
0
300

Featured

See All Featured
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
110
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
810
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
370
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.7k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
320
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
23k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k

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