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

A-Frame and You

Adam Conrad
June 21, 2018
Programming
0
31

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.

Adam Conrad

June 21, 2018
Tweet

More Decks by Adam Conrad

See All by Adam Conrad
Code review in JavaScript
acconrad
0
490
React's Lost Socks: Where Did I Put that Component?
acconrad
0
140
The Dos and Don'ts of CBRA
acconrad
0
55
UX and Performance
acconrad
0
47
SX - Startup Experience
acconrad
0
48

Other Decks in Programming

See All in Programming
Netty Chicago Java User Group 2024-04-17
sullis
0
170
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
280
Java 22 Overview
kishida
1
180
Amazon SQSコンシューマー疎結合への旅 - 出張！ #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
230
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
320
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
230
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
480
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
Nealle_Autify_LT_Slide202403
nealle
0
150
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
ScalarDBを用いたマイクロサービスにおけるデータ管理 (Database Engineering Meetup #2)
scalar
0
100
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
160

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Building Applications with DynamoDB
mza
88
5.6k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Designing Experiences People Love
moore
136
23k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
17
6.4k
Atom: Resistance is Futile
akmur
259
25k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Writing Fast Ruby
sferik
621
60k
GraphQLとの向き合い方2022年版
quramy
32
12k

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