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
perlをWebAssembly上で動かすと何が嬉しいの？？？ / Where does Perl-on-Wasm actually make sense?
Avatar for mackee mackee
0
250
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
320
開発に寄りそう自動テストの実現
Avatar for Hiroki Iseri goyoki
2
1.6k
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
4.7k
Vibe codingでおすすめの言語と開発手法
Avatar for uyuki uyuki234
0
150
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
7
2.4k
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
Avatar for mouson(墨嗓) mouson
0
230
はじめてのカスタムエージェント【GitHub Copilot Agent Mode編】
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
130
Navigation 3: 적응형 UI를 위한 앱 탐색
Avatar for Sungyong An fornewid
1
510
AI時代を生き抜く 新卒エンジニアの生きる道
Avatar for coconala_engineer coconala_engineer
1
490
愛される翻訳の秘訣
Avatar for Kishikawa Katsumi kishikawakatsumi
3
360
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
210

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
770
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
74
11k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
61
47k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
89
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
190
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k

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