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

Introducing Three.js

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
Avatar for higaki higaki_program
0
190
Java 21/25 Virtual Threads 소개
Avatar for Sunghyouk Bae (Debop) debop
0
340
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
Avatar for shiro seike seike460
PRO
2
220
「効かない！」依存性注入（DI）を活用したAPI Platformのエラーハンドリング奮闘記
Avatar for Maki Hayashi mkmk884
0
320
まかせられるPM・まかせられないPM / DevTech GUILD Meetup
Avatar for Yusuke Mukoyama yusukemukoyama
0
120
CursorとClaudeCodeとCodexとOpenCodeを実際に比較してみた
Avatar for Terisuke terisuke
1
400
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
Avatar for Rodrigo Serradura serradura
0
300
AWS re：Invent 2025の少し振り返り ＋ DevOps AgentとBacklogを連携させてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
3
160
PHPで TLSのプロトコルを実装してみる
Avatar for higaki higaki_program
0
760
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
Avatar for nrs nrslib
4
770
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
Avatar for Ryuta Hamasaki avosalmon
1
330

Featured

See All Featured
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
1.1k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
5
540
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
110
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
180
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.6k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
160
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
100

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