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

A-Frame and You

Avatar for Adam Conrad Adam Conrad
June 21, 2018
Programming
0
37

A-Frame and You

A-Frame is a way to program AR and VR experiences on the web using three.js and WebVR. Here's the quickest way to get started.
Avatar for Adam Conrad

Adam Conrad

June 21, 2018
Tweet

More Decks by Adam Conrad

See All by Adam Conrad
Code review in JavaScript
Avatar for Adam Conrad acconrad
0
620
React's Lost Socks: Where Did I Put that Component?
Avatar for Adam Conrad acconrad
0
150
The Dos and Don'ts of CBRA
Avatar for Adam Conrad acconrad
0
69
UX and Performance
Avatar for Adam Conrad acconrad
0
54
SX - Startup Experience
Avatar for Adam Conrad acconrad
0
62

Other Decks in Programming

See All in Programming
By the way Google Cloud Next 2025に行ってみてどうだった
Avatar for Kento.Yamada ymd65536
0
120
VitestのIn-Source Testingが便利
Avatar for taro taro28
8
2.4k
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
Avatar for Kazuya Kurihara ymbigo
14
6.2k
Optimizing JRuby 10
Avatar for headius headius
0
590
In geheimer Mission: AI Agents entwickeln
Avatar for Jörg Neumann joergneumann
0
110
七輪ライブラリー: Claude AI で作る Next.js アプリ
Avatar for suneo3476 suneo3476
1
190
KANNA Android の技術的課題と取り組み
Avatar for Yosuke Watanabe watabee
1
400
「理解」を重視したAI活用開発
Avatar for FastDOCTOR fast_doctor
0
300
LRパーサーはいいぞ
Avatar for ydah ydah
6
1.3k
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
Avatar for ALGO ARTIS algoartis
0
210
今話題のMCPサーバーをFastAPIでサッと作ってみた
Avatar for Yuuki Shimizu yuukis
0
130
Laravel × Clean Architecture
Avatar for Takayuki bumptakayuki
PRO
0
150

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
13
840
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
41
2.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.5k
Building Adaptive Systems
Avatar for Chris Keathley keathley
41
2.5k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.5k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
It's Worth the Effort
Avatar for 3n 3n
184
28k

Transcript

  1. A-Frame and You Getting started in VR with JavaScript and

    the Web

  2. Who @theadamconrad // userinterfacing.com // anonconsulting.com

  3. Wut It’s like, VR on the web, my dude

  4. Where Is the demo? ===> https://bit.ly/2KdS7q5

  5. Why “Be the future, Danny. See your future.” ?

  6. How First you get the hardware...

  7. How ...then you get the software...

  8. How ...and then you start coding!

  9. <script src=”https://aframe.io/releases/0.8.0/aframe.min.js”></script>

  10. <a-scene> <a-text value=”Hello, Virtual World!” geometry=”primitive:plane”> </a-text> </a-scene>

  11. <a-scene> It’s like <body> or <iframe> - everything goes in

    here

  12. <a-text> That’s where the message goes

  13. <a-entity component=”0”> Entity : HTML :: Component : CSS

  14. Entity-Component-System Gaming architecture used in places like Unity

  15. Entities (primitives) <a-box> <a-camera> <a-circle> <a-collada-model> <a-cone> <a-cursor> <a-curvedimage> <a-cylinder>

    <a-dodecahedron> <a-gltf-model> <a-icosahedron> <a-image> <a-light> <a-link> <a-obj-model> <a-octahedron> <a-plane> <a-ring> <a-sky> <a-sound> <a-sphere> <a-tetrahedron> <a-text> <a-torus-knot> <a-torus> <a-triangle> <a-video> <a-videosphere>

  16. Components background camera collada-model cursor daydream-controls debug embedded fog gearvr-controls

    geometry gltf-model hand-controls keyboard-shortcuts laser-controls light line link look-controls material obj-model oculus-touch-controls pool position raycaster rotation scale screenshot shadow sound stats text tracked-controls visible vive-controls vr-mode-ui wasd-controls windows-motion-controls

  17. Systems How you manage classes of components

  18. Share = Care It’s like the weird ol’ web!

  19. Questions? Thanks! - @theadamconrad