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
Tweet

More Decks by Adam Conrad

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. How
    First you get the hardware...

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  9. It’s like or - everything goes in here

    View full-size slide


  10. That’s where the message goes

    View full-size slide


  11. Entity : HTML :: Component : CSS

    View full-size slide

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

    View full-size slide

  13. Entities (primitives)




    View full-size slide

  14. 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

    View full-size slide

  15. Systems
    How you manage classes of components

    View full-size slide

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

    View full-size slide

  17. Questions?
    Thanks!
    - @theadamconrad

    View full-size slide