Home/

...

/

XR Scene Setup and Object Decomposition

XR Scene Setup and Object Decomposition

Learn to configure A-Frame and get an introduction to XR objects and their basic components, such as position, rotation, and scale.

To start with A-Frame development, we can start an HTML file by dropping a <script> tag pointing to the CDNContent Delivery Network build in the head of the file.

Press + to interact
<head>
  <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
</head>

We’ll use the latest A-Frame version 1.4.0 released in 2023 in this course.

What constitutes an XR scene?

An XR experience is defined in a scene. The following snippet demonstrates how we can include an <a-scene> tag in our scene.

Press + to interact
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene> </a-scene>
  </body>
</html>

Once we specify the A-Frame version, a button is automatically added on the bottom-right of the web page, as shown in the upcoming example. Inspecting the elements of the web page in the browser’s developer tools, we observe that the <a-scene> tag comes with a boilerplate code that sets up the camera, renderer, render loop, and default lighting and also configures the WebXR device (which would otherwise have to be done manually).

Now, let’s add a primitive object, such as a box. To add a box, we’ll add an <a-box> tag under the <a-scene> tag. We use the color property of the primitive box to give it a green color to distinguish it from ...