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

Introducing Three.js

Avatar for Judy Tuan Judy Tuan
April 11, 2013
Programming
0
280

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
Tweet

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
코딩 에이전트 체크리스트: Claude Code ver.
Avatar for nacyot nacyot
0
1k
GPUを計算資源として使おう！
Avatar for prime number primenumber
1
290
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
Avatar for ivargrimstad ivargrimstad
0
540
新しいモバイルアプリ勉強会（仮）について
Avatar for 上ちょ / uetyo uetyo
1
190
Gemini CLIの"強み"を知る！ Gemini CLIとClaude Codeを比較してみた！
Avatar for Kota Hisafuru kotahisafuru
2
200
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
Avatar for shin1x1 shin1x1
1
860
JetBrainsのAI機能の紹介 #jjug
Avatar for yusuke yusuke
0
110
11年かかって やっとVibe Codingに 時代が追いつきましたね
Avatar for yimajo yimajo
0
200
ご注文の差分はこちらですか？ 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
Avatar for Kenji Kono konokenj
4
710
iOS開発スターターキットの作り方
Avatar for akidon0000 akidon0000
0
210
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
Avatar for sushi-cat sushi0120
0
170
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
Avatar for Yuuki Takahashi yktakaha4
2
1.2k

Featured

See All Featured
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Done Done
Avatar for chrislema chrislema
184
16k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
47
9.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