Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
290
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
AI時代のTerminal環境を UNIX哲学で設計・運用する
Avatar for yasunori yasunori0418
1
340
動画プレイヤーはなぜカクつくのか 〜Flutterのレンダリングとネイティブの境界を解剖する〜
Avatar for Naruo Yoshiki naruogram
0
320
Event is what happens
Avatar for MOROHASHI Kyosuke moro
2
3k
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
5
5k
Spec-Driven Development - Why Vaadin Is the Perfect Fit
Avatar for Simon Martinelli simas
PRO
0
210
学びを記事・スライド・Xへ高速展開する― AI-assisted Learning Loopで回すコンテンツ生成術
Avatar for Ochtum ochtum
0
190
複数ドメインを一つのアプリに統合するFlutterの設計と運用_FlutterKaigi2026登壇資料（須永高弘）
Avatar for 須永高弘 takahirosunaga
0
140
React Native経験者が Flutterを30⽇間触って驚いたこと
Avatar for ryota_saito 3saito
0
140
Python Lambdaにおけるテストしやすい設計とAI支援の活用 / Designing Testable Python Lambda Functions with AI
Avatar for Kitano Yuichi kitano_yuichi
1
280
Engineering Biometric UX Across Android Versions | DroidKnights 2026
Avatar for RyuNen344 ryunen344
1
150
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
190
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
400

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
340
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.6k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.2k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
280
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.6k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
5
880
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
3
3.9k

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