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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. How
    First you get the hardware...

    View Slide

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

    View Slide

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

    View Slide


  9. View Slide





  10. View Slide


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

    View Slide


  12. That’s where the message goes

    View Slide


  13. Entity : HTML :: Component : CSS

    View Slide

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

    View Slide

  15. Entities (primitives)




    View Slide

  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

    View Slide

  17. Systems
    How you manage classes of components

    View Slide

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

    View Slide

  19. Questions?
    Thanks!
    - @theadamconrad

    View Slide