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
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
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
Avatar for daitasu daitasu
1
240
Claspは野良GASの夢をみるか
Avatar for てらうちたかし takter00
0
190
スマートグラスで並列バイブコーディング
Avatar for Hayami Shuhei hyshu
0
150
jQueryをバージョンアップする前に使いたいjQuery Migrate
Avatar for Atsushi Matsuo matsuo_atsushi
0
520
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
350
New "Type" system on PicoRuby
Avatar for pocke pocke
1
960
依存関係から依存物へ―Dependencyという言葉の歴史をひも解く
Avatar for j_lee_inst j_lee
0
120
エンジニアと一緒にテストコードの設計と実装を改善した話
Avatar for mototakatsu mototakatsu
0
190
その問い、本当に正しいですか？AI時代のエンジニアに必要な哲学と認知科学 / ai-philosophy-cognitive-science
Avatar for MinoDriven minodriven
11
5.7k
Go1.27で導入されるジェネリクスメソッドでできること
Avatar for mackee mackee
0
130
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
Avatar for Estela Franco guaca
0
180
net-httpのHTTP/2対応について
Avatar for NARUSE, Yui naruse
0
490

Featured

See All Featured
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
360
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
350
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
360
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.5k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.5k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
440
Done Done
Avatar for chrislema chrislema
186
16k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
610
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
150
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
180

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