Guía: Cómo creamos nuestro espacio virtual con A-Frame

¿Quieres montar tu propio espacio virtual libre? En esta guía te contamos paso a paso cómo hicimos el entorno 3D de OfiLibre usando A-Frame, una librería web de realidad virtual basada en HTML.

1. Partimos de una plantilla existente

Para empezar, usamos una plantilla ya creada en A-Frame que nos daba la base: un entorno 3D con una sala principal y puertas a distintas habitaciones. Esto nos permitió centrarnos en personalizar los contenidos sin tener que montar la estructura desde cero.

Puedes ver el código que usamos en este repositorio: Repositorio en GitLab

2. Exploramos las posibilidades de A-Frame

A-Frame permite añadir:

Modelos 3D (.glb, .gltf)
Imágenes y textos
Eventos de interacción (como hacer clic en una puerta para teletransportarte)
Luces, animaciones y sonidos

Fuimos probando distintas entidades (<a-entity>, <a-image>, <a-text>, etc.) hasta que entendimos cómo montar escenas que fueran navegables y con contenido relevante.

3. Definimos las salas temáticas

Sala principal

Es el punto de entrada al mundo virtual. Aquí colocamos:

El búho de OfiLibre (nuestro símbolo)
El cartel de las jornadas más recientes
El sofá y la diana reales de la oficina
La pelota de Florencia, un clásico de nuestro espacio físico

Esta sala da acceso al resto mediante puertas clicables que te teletransportan, usando la propiedad door-link de A-Frame.

Sala de la izquierda: Cafés con la OfiLibre

Una recreación de nuestro set de grabación del pódcast, con micrófonos, sillas y decoración para explicar de forma visual cómo grabamos nuestras conversaciones sobre cultura libre.

Sala del software libre

Aquí mostramos ejemplos de programas libres que usamos durante el año, como:

OBS
LaTex
Hugo
A-Frame
Con descripciones flotantes que se activan al acercarse.

Sala de la actividad de la OfiLibre

En esta sala contamos lo que hacemos:

TFGs y recursos educativos en abierto
Asignaturas con materiales libres
Monografías y revistas académicas

Todo distribuido visualmente con textos y símbolos para animar la exploración.

4. ¿Cómo hacerlo?

Esta guía te enseñará cómo construir una escena 3D interactiva como OfiLibre - Sala principal, usando HTML y el framework A-Frame.

1 Estructura básica del espacio

Crea un archivo HTML y define la estructura inicial con A-Frame:

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

    <!-- Motores de físicas (aunque en este ejemplo no se usan) -->
    <script src="https://cdn.jsdelivr.net/npm/aframe-physics-system@4.0.1/dist/aframe-physics-system.min.js"></script>

    <!-- Componentes personalizados -->
    <script src="components/door-link.js"></script>
    <script src="components/lounge.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- Tu contenido irá aquí -->
    </a-scene>
  </body>
</html>

2. Dentro de “a-scene” añade elementos básicos

  <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. Añade objetos con modelos y posiciones

Coloca objetos 3D y textos en el espacio usando “a-entity” y “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="Diana simbólica" position="-2 4 -5" align="center" color="#000" scale="2 2 2"></a-text>

4. Crea las puertas hacia otras salas

Añade entidades “a-entity” con el componente “door-link” para que funcionen como enlaces entre salas.

<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="Ir a la sala de cafés ☕" position="0 2.5 -8" align="center" color="#000" scale="2 2 2"></a-text>

El componente “door-link” se define en 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. Añade carteles informativos

Usa a-text para dar contexto, instrucciones o nombres a cada puerta u objeto:

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

Desarrollo web de realidad virtual con A-Frame