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


Part 2: Project Setup

Create Glitch Project



```

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



```

  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');


  });


```


```

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

```

Part 3: Quest Testing

Accessing Your Project


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