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

Introducing Three.js

Judy Tuan
April 11, 2013
Programming
0
270

Introducing Three.js

April 11, 2013, at @grio_sf!

http://www.meetup.com/SF-Mobile-App-Developers/events/109805222/

Judy Tuan

April 11, 2013
Tweet

More Decks by Judy Tuan

See All by Judy Tuan
Interactive 3d for mobile web: Introducing Three.js
judytuna
0
2.1k

Other Decks in Programming

See All in Programming
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
7
3.2k
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
210
Orleans + Sekiban + SignalR でリアルタイムWeb作ってみた
tomohisa
0
130
実践Webフロントパフォーマンスチューニング
cp20
39
9k
AI時代の開発者評価について
ayumuu
0
220
カウシェで Four Keys の改善を試みた理由
ike002jp
1
110
KANNA Android の技術的課題と取り組み
watabee
0
140
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
570
スモールスタートで始めるためのLambda×モノリス（Lambdalith）
akihisaikeda
2
300
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
100
Unlock the Potential of Swift Code Generation
rockname
0
270
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.2k

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Practical Orchestrator
shlominoach
187
11k
Producing Creativity
orderedlist
PRO
344
40k
Designing Experiences People Love
moore
142
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Visualization
eitanlees
146
16k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Product Roadmaps are Hard
iamctodd
PRO
52
11k

Transcript

  1. Introducing Three.js Judy Tuan @judytuna judytuna@gmail.com 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