Aframe Lab
A-Frame Development Lab
Estimated time: 30 mins
A-Frame: A web framework for building augmented/virtual reality experiences using HTML and Javascript. It uses the WebXR API underneath but simplifies VR scene creation by using custom HTML elements and is easy to use for beginners. It is cross-platform (Desktop, Mobile, VR).
Glitch: A web-based development platform that allows instant deployment and real-time collaboration. Projects automatically update and deploy as you code.
WebXR: A web API that enables virtual and augmented reality experiences directly in web browsers, supporting devices like Meta Quest without requiring app installation.
Part 1: Development Environment Setup
Hardware Requirements
Any computer with a modern web browser
Meta Quest headset for testing
Part 2: Project Setup
Create Glitch Project
Go to Glitch.com and create an account
Click "New Project" at top right and select "hello-webpage"
Replace the contents of index.html with the basic A-Frame template, which will create a simple static 3D AR environment with a box, sphere, plane and sky and render your controllers with a pointable raycast. When developing, it is helpful to have the preview righthand sidepage open to see the effect of your changes. See the inline comments for description of each and the Aframe website docs (above) for more information:
```
<!DOCTYPE html>
<html>
<head>
<title>A-Frame AR Demo for Quest 3</title>
<!-- Load the minified A-Frame library -->
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<!-- Load the event-set component for interaction effects -->
<script src="https://cdn.jsdelivr.net/npm/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script>
<script src="script.js" defer></script>
</head>
<body>
<!--
The <a-scene> is configured for AR:
• xr="mode: ar; referenceSpaceType: local-floor" starts an immersive AR session with floor-level tracking.
• renderer="alpha: true" makes the background transparent so the passthrough shows.
-->
<a-scene xr="mode: ar; referenceSpaceType: local-floor" renderer="alpha: true">
<!-- Controller tracking -->
<a-entity oculus-touch-controls="hand: left"></a-entity>
<a-entity oculus-touch-controls="hand: right"></a-entity>
<!-- Laser controls for pointer interaction, targets objects with class "interactive" -->
<a-entity laser-controls="hand: right" raycaster="objects: .interactive"></a-entity>
<!-- Interactive box that scales on hover -->
<a-box
class="interactive"
position="-1 0.5 -3"
rotation="0 45 0"
color="#4CC3D9">
</a-box>
<!-- Sphere -->
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E">
</a-sphere>
<!-- Static cylinder -->
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
</a-scene>
</body>
</html>
```
Add Interactive Elements
Select the following JavaScript and replace the script.js file with it, which will programmatically scale the blue box when pointed at using event listeners:
```
const scene = document.querySelector('a-scene');
const box = document.querySelector('a-box');
box.addEventListener('mouseenter', function () {
box.setAttribute('scale', '2.5 2.5 2.5');
});
box.addEventListener('mouseleave', function () {
box.setAttribute('scale', '1 1 1');
});
```
Add Animation. You can also add animations to objects. To add a bouncing effect to the sphere, replace the previous sphere with this:
```
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"
animation="property: position; to: 0 2.25 -5; dir: alternate; dur: 2000; loop: true">
</a-sphere>
```
When done, send the project URL found in the "Share" button on the class activity board.
Part 3: Quest Testing
Accessing Your Project
Put on your Quest headset
Open the Oculus Browser
Navigate to your Glitch project URL.
Click the AR button in the bottom right, then click “Allow”
Now you should be in AR! Use the Quest controls to interact with the blue box.
Take a screenshot of the environment with your controller pointed at the blue box and put it on the activity board!
Part 4: Model
Another very useful feature is the ability to load any 3D model. Now we will load in and visualize a model of a mosquito in amber. We will first view this model from different angles with physical movement, and then with joystick movement.
Physical Movement
Download this model from this link on Sketchfab by clicking the Download 3D Model button (download the GLB 20MB version). Sketchfab is a great place to find free 3D models (the author has many other neat data viz models).
Then, open Glitch, navigate to the Assets, and upload your downloaded model (you can drag and drop on this page). Once it is done uploading, open the model and copy and save the URL for later (put it notes).
Then, replace your entire <a-scene> component with this, which will add movement controls to your camera and load the .glb mosquito model. Replace the model url placeholder with the url you copied earlier:
```
<a-scene>
<!-- Controller tracking -->
<a-entity oculus-touch-controls="hand: left"></a-entity>
<a-entity oculus-touch-controls="hand: right"></a-entity>
<!-- Mosquito Model -->
<a-assets>
<a-asset-item id="myModel" src="<YOUR-MODEL-URL-IN-QUOTES>"></a-asset-item>
</a-assets>
<a-gltf-model src="#myModel" position="0 0 -3" scale="1 1 1" rotation="0 180 0"></a-gltf-model>
</a-scene>
```
Click the Meta button, refresh the page, and enter AR again to see your changes.
You should now be inside a mosquito inside amber. Move around the model in physical space and observe it from different viewpoints. You will have to set the boundary to roomscale to do this. A prompt should display for this option when you step outside your stationary boundary (there will be obstacles in the way, but that is okay since you are in AR!).
Please make mental note of the experience of physical movement and take a screenshot of the model from your favorite angle and post it on the activity board as well. We will discuss comparisons of both options afterwards.
Joystick Movement
We will now enable joystick movement using the aframe-extras external component (learn more about controller interaction libraries here). First, add this line to your <head> section:
```
<script src="
https://cdn.jsdelivr.net/npm/aframe-extras@7.5.4/dist/aframe-extras.min.js
"></script>
```
Then replace the "Controller Tracking" a-entities at the top of your a-scence component with this:
```
<!-- Camera rig with movement-controls enabled for joystick navigation -->
<a-entity id="rig" movement-controls position="0 0 0">
<!-- The camera tracks your head movement and is positioned at typical eye height -->
<a-camera position="0 1.6 0" look-controls></a-camera>
</a-entity>
```
Use left joystick to move around and right joystick to rotate.
Please make mental note of the experience of joystick movement and take a screenshot of the model from your favorite angle and post it on the activity board as well.
There is a lot more you can do with Aframe, but hopefully this gives you a good introduction to its basic features and development!
Troubleshooting Tips
Click Quest button and refresh page if website is not working once deployed, or you made changes and want to see them