This is an automatic translation generated by artificial intelligence. May contain errors.

Guide: How We Built Our Virtual Space with A-Frame

Want to set up your own free virtual space? In this guide we walk you step-by-step through how we created OfiLibre’s 3D environment using A-Frame, a web-based virtual-reality library built on HTML.

1. We Started from an Existing Template

To begin, we used an already-made A-Frame template that gave us the foundation: a 3D environment with a main hall and doors to different rooms. This let us focus on customizing the content without having to build the structure from scratch.

You can see the code we used in this repository: Repository on GitLab

2. We Explored A-Frame’s Possibilities

A-Frame lets you add:

3D models (.glb, .gltf)
Images and text
Interaction events (like clicking a door to teleport)
Lights, animations, and sounds

We tried out different entities (<a-entity>, <a-image>, <a-text>, etc.) until we understood how to build scenes that were navigable and contained relevant content.

3. We Defined the Themed Rooms

Main Hall

This is the entry point to the virtual world. Here we placed:

The OfiLibre owl (our symbol)
The poster for the latest Free Culture Days
The real sofa and dartboard from the office
Florencia’s ball, a classic from our physical space

This hall gives access to the rest via clickable doors that teleport you, using A-Frame’s door-link property.

Left Room: Cafes con OfiLibre

A recreation of our podcast recording set, with microphones, chairs, and décor to visually explain how we record our conversations on free culture.

Free Software Room

Here we show examples of free programs we use during the year, such as:

OBS
LaTeX
Hugo
A-Frame
With floating descriptions that appear when you get close.

OfiLibre Activity Room

In this room we explain what we do:

Open-access TFGs and educational resources
Subjects with open materials
Monographs and academic journals

All laid out visually with text and symbols to encourage exploration.

4. How to Do It Yourself

This guide will teach you how to build an interactive 3D scene like OfiLibre - Main Hall, using HTML and the A-Frame framework.

1 Basic Space Structure

Create an HTML file and set up the initial structure with A-Frame:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My A-Frame Room</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>

    <!-- Physics engines (not used in this example) -->
    <script src="https://cdn.jsdelivr.net/npm/aframe-physics-system@4.0.1/dist/aframe-physics-system.min.js"></script>

    <!-- Custom components -->
    <script src="components/door-link.js"></script>
    <script src="components/lounge.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- Your content goes here -->
    </a-scene>
  </body>
</html>

2. Inside “a-scene” add basic elements

  <a-sky color="#87CEEB"></a-sky>

<a-plane color="#f0f0f0" rotation="-90 0 0" width="100" height="100"></a-plane>

<a-light type="ambient" color="#fff"></a-light>
<a-light type="directional" position="0 10 0" intensity="1"></a-light>

3. Add objects with models and positions

Place 3D objects and text in the space using “a-entity” and “position”.

<a-entity position="5 1.5 -2" gltf-model="models/bola.glb" scale="1.5 1.5 1.5"></a-entity>

<a-entity position="-2 2 -5" gltf-model="models/diana.glb" scale="2 2 2"></a-entity>
<a-text value="Symbolic dartboard" position="-2 4 -5" align="center" color="#000" scale="2 2 2"></a-text>

4. Create doors to other rooms

Add “a-entity” elements with the “door-link” component so they work as links between rooms.

<a-entity
  geometry="primitive: plane; height: 2; width: 4"
  material="color: #4CAF50"
  position="0 1 -8"
  door-link="url: cafes.html">
</a-entity>

<a-text value="Go to the café room ☕" position="0 2.5 -8" align="center" color="#000" scale="2 2 2"></a-text>

The “door-link” component is defined in components/door-link.js,

AFRAME.registerComponent('door-link', {
  schema: { url: { type: 'string' } },
  init: function () {
    this.el.addEventListener('click', () => {
      window.location.href = this.data.url;
    });
  }
});

5. Add informational signs

Use a-text to give context, instructions, or names to each door or object:

<a-text value="OfiLibre Main Hall" position="0 3 -4" align="center" color="#000" scale="3 3 3"></a-text>

Web development of virtual reality with A-Frame