Proyecto en: ‣

index.html

Este archivo define una escena de realidad virtual utilizando A-Frame, una biblioteca de WebVR. Incluye múltiples recursos y elementos para crear un entorno interactivo. Aquí hay una descripción detallada de sus componentes:

1. Carga de Bibliotecas y Estilos:
   • A-Frame: Carga la versión 1.5.0 de A-Frame, una biblioteca de realidad virtual.
   • Bootstrap: Utiliza Bootstrap 5.3.2 para estilos y componentes de la interfaz de usuario.
   • A-Frame Physics System: Añade soporte para físicas en la escena de A-Frame.
   • Eventos.js: Archivo JavaScript externo para manejar eventos específicos.
2. Escena A-Frame (<a-scene>):
   • Configura un entorno interactivo con soporte para físicas.
   • Define los controles de cámara y propiedades físicas como la gravedad.
3. Componentes de la Escena:
   • Cámara (<a-camera>): Punto de vista del usuario en la escena.
   • Cielo (<a-sky>): Un fondo que simula el horizonte de Marte.
   • Plano (<a-plane>): Representa el suelo con textura de suelo marciano.
   • Objetos en la Escena:
     • Paredes, objetos contenedores, esferas, etc., con atributos físicos y visuales.
     • Modelos GLTF que representan estructuras y vehículos espaciales.
   • Interactividad:
     • Algunos elementos tienen identificadores (IDs) y componentes personalizados (definidos en eventos.js) para manejar clics y otros eventos.
4. Modal Bootstrap (<div class="modal fade">):
   • Un modal para mostrar información cuando se interactúa con ciertos objetos en la escena.

eventos.js

Este archivo contiene la lógica de los eventos personalizados usados en la escena de A-Frame. Define varios componentes de A-Frame que se utilizan para manejar interacciones específicas:

1. Manejadores de Clic (click-handler-...):
   • Cada componente define una acción cuando se hace clic en diferentes elementos de la escena (como el dron centinela, el laboratorio, la torre, etc.).
   • Al hacer clic, se muestra un modal con información sobre el elemento seleccionado.
2. Componente Grab:
   • Permite "agarrar" objetos en la escena y moverlos frente a la cámara.
   • Cambia el objeto a kinemático cuando se agarra y a dinámico cuando se suelta.
3. Modal (showModal):
   • Función para mostrar el modal de Bootstrap con un título y contenido específico.
4. Colisión (foo):
   • Registra las colisiones entre el jugador y otros elementos, imprimiendo información en la consola.

Comportamiento y Funcionalidad

• La página presenta una escena de realidad virtual en la que el usuario puede interactuar con distintos elementos.
• Los objetos tienen físicas y pueden ser manipulados, además de responder a eventos de colisión.
• Al hacer clic en ciertos elementos, se presenta información adicional en un modal.
• La escena simula un entorno espacial en Marte, con estructuras, vehículos y objetos interactivos.