Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introducing Three.js
Search
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/
Judy Tuan
April 11, 2013
Tweet
Share
More Decks by Judy Tuan
See All by Judy Tuan
Interactive 3d for mobile web: Introducing Three.js
judytuna
0
2.2k
Other Decks in Programming
See All in Programming
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
GPUを計算資源として使おう!
primenumber
1
290
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
540
新しいモバイルアプリ勉強会(仮)について
uetyo
1
190
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
200
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
860
JetBrainsのAI機能の紹介 #jjug
yusuke
0
110
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
200
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
710
iOS開発スターターキットの作り方
akidon0000
0
210
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Visualization
eitanlees
146
16k
Typedesign – Prime Four
hannesfritz
42
2.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Faster Mobile Websites
deanohume
308
31k
Gamification - CAS2011
davidbonilla
81
5.4k
Done Done
chrislema
184
16k
A better future with KSS
kneath
238
17k
Designing Experiences People Love
moore
142
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Producing Creativity
orderedlist
PRO
346
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Transcript
Introducing Three.js Judy Tuan @judytuna
[email protected]
Saturday, April 13, 13
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
http://mrdoob.github.com/three.js/ Saturday, April 13, 13
• http://lights.elliegoulding.com/ • http://www.netmagazine.com/features/ behind-scenes-lights-latest-webgl-sensation • Interactive music video Saturday,
April 13, 13
MobileGraffiti • An app to turn your phone into a
paintbrush. • Made in 30 hours at AngelHack =) • mobilegraffiti.com Saturday, April 13, 13
http://www.eccesignum.org/blog/speaking-of-threejs Saturday, April 13, 13
MobileGraffiti Saturday, April 13, 13
MobileGraffiti iPhone (path) www Saturday, April 13, 13
Three.js: the Basics • renderer • scene • camera •
light • object Saturday, April 13, 13
Renderer Setup Later... Saturday, April 13, 13
Scene & Camera Saturday, April 13, 13
http://www.real3dtutorials.com/tut00002.php Saturday, April 13, 13
THREE.Mesh Saturday, April 13, 13
render it! Saturday, April 13, 13
Saturday, April 13, 13
Lambert! Saturday, April 13, 13
Add a light Saturday, April 13, 13
Saturday, April 13, 13
THREE.SphereGeometry Saturday, April 13, 13
Saturday, April 13, 13
Wireframe Saturday, April 13, 13
Wireframe Saturday, April 13, 13
THREE.CylinderGeometry Saturday, April 13, 13
Saturday, April 13, 13
Other Geometries • Icosahedron • Octahedron • Plane • Polyhedron
• Tetrahedron • Text • Torus Saturday, April 13, 13
THREE.Line Saturday, April 13, 13
THREE.Line Saturday, April 13, 13
Lights • PointLight • DirectionalLight • SpotLight Saturday, April 13,
13
Some setup Saturday, April 13, 13
Point light Saturday, April 13, 13
Directional light Saturday, April 13, 13
Brief note on animating http://paulirish.com/2011/ requestanimationframe-for-smart-animating/ Saturday, April 13, 13
Controls • FirstPersonControls • FlyControls • PathControls • RollControls •
TrackballControls http://threejsdoc.appspot.com/doc/ index.html#FlyControls Saturday, April 13, 13
CSS WOAH • http://mrdoob.github.io/three.js/examples/ css3d_periodictable.html • touch events • beautiful
on mobile safari Saturday, April 13, 13
Docs • http://threejsdoc.appspot.com - documentation & fun examples! • http://mrdoob.github.com/three.js/docs/49/
Saturday, April 13, 13
Lots of resources • http://learningthreejs.com/ • http://learningwebgl.com/blog/ - weekly roundup
of WebGL projects Saturday, April 13, 13