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:
Go to https://glitch.com
Sign in with Github
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:
Look for a resource link like: https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js
Format it like this: <script src=“URL”></script>
Paste it beneath your A-Frame import in <head>
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.