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

More Decks by Adam Conrad

Other Decks in Programming


  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