• ARI Leadership Team

Intro to WebVR


What is A-frame?


It’s a web framework for making virtual reality experiences. It uses HTML and ECS (Entity Component System) making it perfect for people new to VR because it can be used on Google Cardboard with minimal setup. It’s also compatible across most headsets and browsers.


All of the layers it uses and what they do

  • A-frame - simplifies VR content

  • WebVR - detects and handles VR hardware

  • Three.js - renders 2D/3D content

  • Javascript - edits web pages dynamically

  • HTML/CSS - displays web pages


First Steps:

  1. Go to https://glitch.com

  2. Sign in with Github

  3. Go to https://glitch.com/edit/#!/seen-stone?path=index.html:1:0

  4. Click Remix to Edit button


The Basics of Glitch


On the left are your files

On the right is your code editor

Click the Show button next to the sunglasses to see your project, it will just be a blank white screen at first because you have't added any entities yet.


What the code includes right now


The line <script src="https://aframe.io/releases/0.9.2/aframe.min.js"> imports A-frame


Everything you see within your scene will go within the <a-scene> tags


Navigating the Scene


This is the desktop view. You can use the arrow keys to pan the camera and the mouse to rotate the camera. Copy the link from the desktop version and paste in int he browser on your phone to get the device version.



This is the device view. You can get to it by clicking the VR headset in the bottom right corner of the desktop view when you are on a mobile device. Your pointer will stay in the middle of the screen and rotate with your head.


A-Frame Entities


Everything within your scene starts as an <a-entity>, then you can add components to change the entities' behavior.


Some common component formats include:

  • position=“X Y Z” [meters]

  • rotation=“X Y Z” [degrees]

  • light=“type: directional”

  • sound="src: url(clip.mp3)”

  • text="value: Hello World“

  • material="color: blue"

Try putting these inside your <a-scene> tags:





A-Frame Primitives


These are wrappers that make it easier to define entities and they can include functional behavior.


Some primitive examples:

  • <a-box>

  • <a-ring>

  • <a-torus-knot>

  • <a-camera>

  • <a-light>

  • <a-video>


Replace your shapes with:




Basic Interactivity


The first thing we need to add is a cursor so our players know where they are playing.


Add the following code within the <a-scene> tags to put add a cursor that follows the camera as the player’s head is moving.



Cursor Events


Now that we have a cursor we can add actions to entities when they interact with it. There are default events for the cursors that can then trigger <a-animation> tags or scripts to change an entity component like its size or position.


Default Events:

  • Click

  • Fusing

  • Mousedown

  • Mouseup

  • Mouseenter

  • Mouseleave


We are going to add code to our shapes so that they grow when the cursor is on them. There are two ways to this like previously mentioned: the animation and the script.


Animation


The <a-animation> tag allows you to change components on an element over time.


Common Components:

  • Attribute = “[attribute]”

  • dur=”[seconds]”

  • Begin=”[event]”

  • to=”[desired value]”


Now add these two lines inside of the <a-box> tag. Note that if you don’t set a begin point, the animation will run automatically on launch.



Script


A script is an HTML <script> tag wrapped around the AFramefunction with the function arguments of schema, init, update, and remove. Not all of these arguments have to be used.



Now add this code in between the <body> tag and the <a-scene> tag.



You can use this script by adding scale-on-mouseenter to any <a-entity>. Use the to property to specify how much it scales.


Your sphere code should now look like this:



Importing


You can add cool external assets to your projects like images, sounds, and videos by wrapping them in the <img>, <audio>, and <video> tags respectively and placing them within the <a-assets> tag.


Here is an example for making a box with a different texture:



The AFrame community is a great resource for finding new imports to put into your project like cool textures, shapes, and attributes. There are a lot of community-built libraries you can look into. You can find developers on websites like Github or rawgit.com and if you find something you like:

  1. Look for a resource link like: https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js

  2. Format it like this: <script src=“URL”></script>

  3. Paste it beneath your A-Frame import in <head>

  4. Read the documentation for usage instructions!

Try it with environments:

  • Go to the environment library through the GitHub page: http://bit.ly/aframe-env

  • Check out the examples and try the new environments in your project

It should look something like this:



Explore what other people have done in AFrame, there are some super cool projects out there! For more information about AFrame, you can visit aframe.io.

165 views

Questions? Contact us:

altrealityinitiative@gmail.com

  • LinkedIn
  • Instagram
  • ARI Logo
  • Facebook
  • YouTube