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

A-Frame and You

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


  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

  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