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>

</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">

<a-entity oculus-touch-controls="hand: left"></a-entity>

<a-entity oculus-touch-controls="hand: right"></a-entity>

<a-entity laser-controls="hand: right" raycaster="objects: .interactive"></a-entity>

<a-box

class="interactive"

position="-1 0.5 -3"

rotation="0 45 0"

color="#4CC3D9">

</a-box>

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E">

</a-sphere>

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

<a-entity oculus-touch-controls="hand: left"></a-entity>

<a-entity oculus-touch-controls="hand: right"></a-entity>

<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:

```

<a-entity id="rig" movement-controls position="0 0 0">

<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

Page updated

Google Sites

Report abuse