Terse Notes — A-Frame for WebVR

Short Notes from Learning the Basics of A-Frame

Jesse Ruiz (she/they)
3 min readJun 30, 2024
Photo by JESHOOTS.COM on Unsplash

Notes were taken from the following Codecademy course:

A-Frame is open source; it is a web framework for building virtual reality experiences in a web browser. Use with three.js.

https://aframe.io/

External script file: (in the head element)

<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

To set up a 3d scene:

Use <a-scene> within the <body> element

Basic Primitives / Meshes:

<a-box>

<a-sphere>

<a-cylinder>

<a-plane>

<a-sky>

<a-entity>

Components:

-color

-position

-rotation

-scale

-radius

Position component

-all entities have position

-uses right-handed coordinate system, meaning positive x-axis goes right, positive y-axis goes up, positive z-axis goes out of the screen toward you

-distance measured in meters (m)

Rotation

-rotational unit is degrees

-but three.js uses radians so we need to change it to that when using it

-positive rotation is based on the right-hand rule. Thumb in the direction of the axis and direction of your other fingers is the positive rotation.

Scale

-does shrinking, stretching or skewing transformation of an entity.

Environment Components

-generate pre-built environments

How to use:

<a-entity environment="preset: dream"></a-entity>

Assets and Asset Management Systems

-we use the asset management system by including the asset tag around every HTML element we want to include in the asset management system:

<a-assets> tag

We store things like image, sound, video and 3D model files in the assets tag. Once we create an asset in the <a-assets> tag, we can then reference the asset in the scene. Just make sure to use a # to link to the src.

For example:

<a-scene>
<a-assets>
<img
id="stones"
src="https://i.imgur.com/mYmmbrp.jpg">
</a-assets>
<a-box
src="#stones"
position="0 2 -5"
rotation="0 45 45"></a-box>
</a-scene>

SKY

A primitive called a-sky is one that surrounds the scene like a sky would. You can use a color or an image to fill the 360 degree space.

For example:

<a-sky color="khaki"></a-sky>
<a-sky src="#city"></a-sky>

GROUND

A primitive called a-plane is a plane oriented parallel to the x-y axis, i.e. going up an down. So we can rotate it -90 degrees to make it parallel to the x-z axis or right to left.

For example:

<a-plane rotation="-90 0 0"></a-plane>

The plane can take an attribute called REPEAT. It takes two numbers corresponding to the x and y axis. So it means how many times to repeat in the x and y direction.

TEXT

In 3D it is very complicated. One simple way that A-Frame does it is with signed distance field (SDF) text.

For example:

<a-text
value="Hello A-Frame!"
color="#BBB"
align="left"
position="-0.9 0.2 -3"
scale="1.5 1.5 1.5"></a-text>

3D MODELS

We can load 3D assets in many different ways. One solid file is a glft. It should be added with an element called <a-asset-item>. After putting it in the assets, we can create a new element: <a-gltf-model>.

Places to download 3D models as glTF files include Google Poly, Sketchfab, and Clara.io. Programs to create models include Blender, Autodesk Maya, and Supercraft.

ANIMATION

A-Frame does have a built-in animation component. An animation has 5 properties:

  1. Property tells it what to animate, for example the x axis or y axis, property:
  2. The next position to go from the original axis position, to:
  3. Direction, dir:
  4. Duration, dur:
  5. Loop, loop:

LIGHTING

We use the <a-light> primitive. Types of lighting include ambient, point, etc.

For example:

<a-light
type="point"
intensity="2"
position="2 4 4"></a-light>

SOUND AND POSITIONAL AUDIO

First you add an audio element to the assets. Then you can make a primitive called <a-sound>

THE INSPECTOR

Left hand panel is all the entities.

Right hand panel is info about selected entity.

Open inspector: CONTROL + OPTION + i (Mac)

CTRL + ALT + i (Windows)

--

--