La realidad aumentada (AR) en la web ha abierto un mundo de posibilidades creativas, permitiendo a los usuarios experimentar contenido inmersivo sin necesidad de descargar aplicaciones pesadas y eso sabe hacer muy bien 8th Wall. En este proyecto, aprenderemos a crear una ilusión visual de «apagar y encender» la luz en una imagen tridimensional utilizando un marcador impreso (Image Target) y un botón virtual. A continuación, te presento el paso a paso detallado para que puedas replicar este proyecto fácilmente.

Paso 1: Configuración Inicial del Proyecto en 8th Wall

Lo primero que debes hacer es ingresar a la plataforma de 8th Wall y crear un nuevo proyecto.

1. Inicia un nuevo proyecto y ponle un nombre descriptivo, por ejemplo, «marcador luz».
2. Espera a que cargue la interfaz. Una vez dentro de la escena, debes modificar el tipo de cámara. En lugar de usar la cámara estándar, selecciona la opción que te permite utilizar el Mundo AR .
3. Importa un elemento llamado «Objetivo de la imagen» (Image Target). Este será el elemento físico (marcador) que la cámara de tu celular deberá reconocer para desplegar la experiencia 3D.

Paso 2: Preparación del Marcador (Image Target)

Para este experimento, necesitas una imagen sencilla que funcione como activador (trigger). En el tutorial, se utiliza la imagen de un foco.

1. Selecciona la opción de añadir un nuevo objeto, elige Añadir Plano y carga la imagen que servirá de marcador
2. Al subir la imagen, 8th Wall generará automáticamente un archivo .json con la información del marcador.
3. Inicialmente, verás un mensaje de advertencia indicando que la imagen no está conectada a la experiencia. Para solucionar esto, debes crear un código que vincule el marcador con el mundo AR.
4. Crea un archivo vacío en la plataforma llamado app.js . Copia el código base desde la documentación de 8th Wall, pégalo en tu archivo app.js (puedes usar un editor externo como Cursor) y asegúrate de modificar el nombre del archivo .json en el código para que coincida exactamente con el nombre del JSON de tu imagen (por ejemplo, foco.json)

Paso 3: Generación de las Imágenes con Inteligencia Artificial

El efecto consiste en superponer dos imágenes: un cuarto oscuro y un cuarto iluminado.

1. El creador utiliza una herramienta de IA llamada Hitfield para generar las imágenes.
2. Genera una primera imagen (1024×1024) con el prompt: «crear una escena donde hay un cuarto para adolescente en estilo isométrico con un foco en el techo, todas oscuras…». Guarda esta imagen como apagado.png.
3. Usando la misma plataforma, genera una variación indicando «Quiero luz de techo encendido y que alumbre toda la habitación». Guarda esta imagen como encendido.png.

Paso 4: Construcción de la Escena 3D

Ahora vamos a acomodar las imágenes generadas por IA sobre el marcador en 8th Wall.

1. Importa las imágenes apagado.png y encendido.png a tu proyecto en 8th Wall .
2. Haz clic derecho sobre el «Objeto de la imagen» (el marcador) y añade un nuevo plano.
3. Configura la rotación del plano en cero para que quede paralelo al marcador. En la propiedad de Color del plano, selecciona la imagen apagado.png. Nombra a este plano «apagado» .
4. Duplica este plano y colócalo ligeramente detrás del primero. A este segundo plano, asígnale la imagen encendido.png y nómbralo «encendido» .

Paso 5: Programación de la Interacción (El Botón)

Para simular el encendido y apagado, necesitamos un botón que oculte la imagen oscura (dejando ver la iluminada que está detrás) y viceversa.

1. Crea un elemento interactivo en la escena, como una pequeña esfera, que funcionará como botón o interruptor.
2. Crea un nuevo archivo llamado interruptor.js .
3. Pega el código JavaScript que captura el evento táctil (tap). Este código instruye al sistema para que, al tocar la esfera, alterne la visibilidad del plano «apagado».
4. Asigna este script a la esfera. En las propiedades de la esfera, ve a Componentes personalizados, elige el script que acabas de crear y vincula los planos correspondientes («apagado» y «encendido») en los campos que el código te solicite . Puedes probar la experiencia dándole a «Play» en el visor de la plataforma para verificar que al hacer clic en la esfera, la habitación se ilumina y oscurece.
5. Utiliza el código interruptor aquí -> https://www.patreon.com/emiliusvgs/posts/crea-realidad-166347652

Paso 6: Exportación y Publicación en un Servidor Web

Una vez que todo funciona en el simulador, es momento de llevarlo al mundo real a través de una URL.

1. En 8th Wall, haz clic en Publicar y luego en Construir (Build) para HTML5 .
2. Esto generará y descargará un archivo ZIP que contiene todos los «assets» (imágenes), el archivo JSON, los scripts (bundle.js) y el archivo index.html. Descomprime este archivo en tu computadora.
3. Para publicar, necesitas un servidor web. El tutorial recomienda Hostinger por su estabilidad con WebAR .
4. Ingresa al panel de control de tu hosting (Administrador de Archivos), crea una carpeta (por ejemplo, foco) y sube todos los archivos que descomprimiste.
5. ¡Listo! Al ingresar a tu dominio (ej. [tudominio.com/foco](https://tudominio.com/foco)) desde el navegador de un teléfono móvil, se activará la cámara. Apunta la cámara al marcador impreso y podrás interactuar tocando la esfera para «encender y apagar» la luz del cuarto virtual