Aula privada

Ingresa tu código de estudiante

Crea una experiencia WebAR dinámica entendiendo exactamente dónde se agrega cada bloque de JavaScript.

Nivel intermedio

Ahora el proyecto crece con datos

En este nivel ya no escribimos una experiencia fija. Vamos a crear una base de catálogo: un mismo target puede mostrar distintos productos usando arrays, objetos, funciones y eventos. Cada paso muestra el archivo completo en ese momento.

Marcar esta lección como completada

HTML base

Crear la escena y la interfaz

Primero dejamos listo el HTML. El botón Siguiente producto existe desde el inicio porque después JavaScript lo va a escuchar.

Dónde va este código: abre index.html y crea o reemplaza el archivo completo con esta versión.

index.html completoindex.html

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Catálogo WebAR con JavaScript</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <div class="ui">
      <h1 id="product-title">Producto</h1>
      <p id="product-copy">Escanea el marcador</p>
      <button id="next-product">Siguiente producto</button>
    </div>
    <a-scene mindar-image="imageTargetSrc: targets/catalogo.mind; autoStart: true;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity id="target" mindar-image-target="targetIndex: 0">
        <a-box id="model" color="#2563eb" position="0 0 0" visible="false"></a-box>
      </a-entity>
    </a-scene>
  </body>
</html>

Marcar esta lección como completada

Datos

Crear variables, constantes, array y objetos

Ahora creamos app.js. No va dentro del HTML: va en el archivo enlazado por la línea 9 de index.html.

Recordatorio sobre `querySelector`

Cada línea con document.querySelector() conecta JavaScript con un elemento del HTML. El texto entre comillas debe coincidir con el id del elemento: #target busca id="target", #model busca id="model" y así sucesivamente.

Dónde va este código: abre app.js y crea el archivo y pega este contenido desde la línea 1.

app.js acumuladoapp.js

const target = document.querySelector("#target");
const model = document.querySelector("#model");
const title = document.querySelector("#product-title");
const copy = document.querySelector("#product-copy");
const nextButton = document.querySelector("#next-product");

const products = [
  { title: "Café Aurora", copy: "Aroma intenso y empaque aumentado", color: "#facc15", scale: 0.35, rotationY: 20 },
  { title: "Snack Nativo", copy: "Ingredientes locales con experiencia interactiva", color: "#22c55e", scale: 0.45, rotationY: -15 }
];

Explicación línea por línea

Líneas 1 a 5: conectan JavaScript con elementos del HTML.
Líneas 7 a 10: crean un array con dos objetos de producto.

Marcar esta lección como completada

Funciones

Agregar updateProduct al final de app.js

La función usa los datos del producto y actualiza tanto la interfaz como el objeto 3D. Se agrega debajo del array products.

Qué son `textContent` y `addEventListener()`

textContent es una propiedad que permite leer o cambiar el texto interno de un elemento HTML. Si tienes <h1 id="titulo">Hola</h1>, entonces titulo.textContent = "Nuevo texto" cambia lo que el usuario ve en pantalla.

addEventListener() sirve para escuchar algo que ocurre. Por ejemplo: un clic, una tecla, la carga de un archivo o la detección de un target en MindAR. La estructura es: elemento.addEventListener("evento", función).

boton.addEventListener("click", ...) escucha clics sobre un botón.
target.addEventListener("targetFound", ...) escucha cuando MindAR reconoce una imagen.
target.addEventListener("targetLost", ...) escucha cuando MindAR pierde la imagen.

Qué es `setAttribute()`

setAttribute() cambia un atributo de un elemento HTML. En A-Frame es muy importante porque los objetos 3D también se configuran con atributos.

Por ejemplo, box.setAttribute("visible", "true") busca el atributo visible de la caja y lo cambia a true. Eso hace que el objeto aparezca en la escena.

setAttribute("visible", "false") oculta un objeto.
setAttribute("color", "#22c55e") cambia el color.
setAttribute("position", "0 0 0") cambia la posición en X, Y, Z.

Qué es `object3D`

object3D es la puerta desde A-Frame hacia Three.js. A-Frame te deja escribir una escena con etiquetas HTML, pero por debajo cada entidad tiene un objeto real de Three.js. Ese objeto vive en elemento.object3D.

Cuando usamos box.object3D.scale.set(...), box.object3D.rotation.y o box.object3D.visible, estamos modificando el objeto 3D directamente desde Three.js.

Qué es `style`

style permite modificar CSS desde JavaScript. Por ejemplo, title.style.color = product.color cambia el color del texto usando un dato guardado en el objeto product.

En proyectos reales conviene usar clases CSS cuando el cambio es grande, pero style es útil para cambios pequeños y directos como color, tamaño o posición.

Dónde va este código: abre app.js y agrega la función después de la línea 10. Aquí ves el archivo completo.

app.js acumuladoapp.js

const target = document.querySelector("#target");
const model = document.querySelector("#model");
const title = document.querySelector("#product-title");
const copy = document.querySelector("#product-copy");
const nextButton = document.querySelector("#next-product");

const products = [
  { title: "Café Aurora", copy: "Aroma intenso y empaque aumentado", color: "#facc15", scale: 0.35, rotationY: 20 },
  { title: "Snack Nativo", copy: "Ingredientes locales con experiencia interactiva", color: "#22c55e", scale: 0.45, rotationY: -15 }
];

function updateProduct(product) {
  title.textContent = product.title;
  copy.textContent = product.copy;
  model.setAttribute("color", product.color);
  model.object3D.scale.set(product.scale, product.scale, product.scale);
  model.object3D.rotation.y = THREE.MathUtils.degToRad(product.rotationY);
}

Explicación línea por línea

Línea 12: declara una función que recibe un producto.
Líneas 13 y 14: actualizan textos de la interfaz.
Línea 15: cambia color con A-Frame.
Líneas 16 y 17: ajustan escala y rotación con Three.js.

Marcar esta lección como completada

Estado

Agregar state y showCurrentProduct

El estado nos dice si el target está visible y cuál producto está activo. Esta sección se agrega debajo de updateProduct.

Dónde va este código: abre app.js y agrega el estado y la función debajo de updateProduct.

app.js acumuladoapp.js

const target = document.querySelector("#target");
const model = document.querySelector("#model");
const title = document.querySelector("#product-title");
const copy = document.querySelector("#product-copy");
const nextButton = document.querySelector("#next-product");

const products = [
  { title: "Café Aurora", copy: "Aroma intenso y empaque aumentado", color: "#facc15", scale: 0.35, rotationY: 20 },
  { title: "Snack Nativo", copy: "Ingredientes locales con experiencia interactiva", color: "#22c55e", scale: 0.45, rotationY: -15 }
];

function updateProduct(product) {
  title.textContent = product.title;
  copy.textContent = product.copy;
  model.setAttribute("color", product.color);
  model.object3D.scale.set(product.scale, product.scale, product.scale);
  model.object3D.rotation.y = THREE.MathUtils.degToRad(product.rotationY);
}

const state = {
  targetVisible: false,
  currentIndex: 0
};

function showCurrentProduct() {
  const product = products[state.currentIndex];
  updateProduct(product);
  model.object3D.visible = state.targetVisible;
}

Marcar esta lección como completada

Eventos

Agregar clic, targetFound y targetLost

Ahora conectamos el botón y MindAR. Todo se agrega al final del archivo app.js.

Recordatorio sobre `addEventListener()`

En esta lección escuchamos tres eventos: click para el botón, targetFound para cuando MindAR detecta el marcador y targetLost para cuando lo pierde. La misma idea sirve para botones normales y para eventos de realidad aumentada.

Dónde va este código: abre app.js y pega estos eventos al final. Aquí está el archivo completo final.

app.js finalapp.js

const target = document.querySelector("#target");
const model = document.querySelector("#model");
const title = document.querySelector("#product-title");
const copy = document.querySelector("#product-copy");
const nextButton = document.querySelector("#next-product");

const products = [
  { title: "Café Aurora", copy: "Aroma intenso y empaque aumentado", color: "#facc15", scale: 0.35, rotationY: 20 },
  { title: "Snack Nativo", copy: "Ingredientes locales con experiencia interactiva", color: "#22c55e", scale: 0.45, rotationY: -15 }
];

function updateProduct(product) {
  title.textContent = product.title;
  copy.textContent = product.copy;
  model.setAttribute("color", product.color);
  model.object3D.scale.set(product.scale, product.scale, product.scale);
  model.object3D.rotation.y = THREE.MathUtils.degToRad(product.rotationY);
}

const state = {
  targetVisible: false,
  currentIndex: 0
};

function showCurrentProduct() {
  const product = products[state.currentIndex];
  updateProduct(product);
  model.object3D.visible = state.targetVisible;
}

nextButton.addEventListener("click", () => {
  state.currentIndex = (state.currentIndex + 1) % products.length;
  showCurrentProduct();
});

target.addEventListener("targetFound", () => {
  state.targetVisible = true;
  showCurrentProduct();
});

target.addEventListener("targetLost", () => {
  state.targetVisible = false;
  model.object3D.visible = false;
  copy.textContent = "Vuelve a escanear el marcador";
});

showCurrentProduct();

Explicación línea por línea

Líneas 33 a 36: cambian el producto activo cuando el usuario toca el botón.
Líneas 38 a 41: muestran contenido cuando MindAR detecta el target.
Líneas 43 a 47: ocultan contenido cuando se pierde el target.
Línea 50: inicializa la interfaz.

Marcar esta lección como completada

Código final

Archivos finales del nivel intermedio

Estos son los archivos completos que el estudiante debe tener al terminar el nivel.

index.html finalindex.html

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Catálogo WebAR con JavaScript</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <div class="ui">
      <h1 id="product-title">Producto</h1>
      <p id="product-copy">Escanea el marcador</p>
      <button id="next-product">Siguiente producto</button>
    </div>
    <a-scene mindar-image="imageTargetSrc: targets/catalogo.mind; autoStart: true;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity id="target" mindar-image-target="targetIndex: 0">
        <a-box id="model" color="#2563eb" position="0 0 0" visible="false"></a-box>
      </a-entity>
    </a-scene>
  </body>
</html>

app.js finalapp.js

const target = document.querySelector("#target");
const model = document.querySelector("#model");
const title = document.querySelector("#product-title");
const copy = document.querySelector("#product-copy");
const nextButton = document.querySelector("#next-product");

const products = [
  { title: "Café Aurora", copy: "Aroma intenso y empaque aumentado", color: "#facc15", scale: 0.35, rotationY: 20 },
  { title: "Snack Nativo", copy: "Ingredientes locales con experiencia interactiva", color: "#22c55e", scale: 0.45, rotationY: -15 }
];

function updateProduct(product) {
  title.textContent = product.title;
  copy.textContent = product.copy;
  model.setAttribute("color", product.color);
  model.object3D.scale.set(product.scale, product.scale, product.scale);
  model.object3D.rotation.y = THREE.MathUtils.degToRad(product.rotationY);
}

const state = {
  targetVisible: false,
  currentIndex: 0
};

function showCurrentProduct() {
  const product = products[state.currentIndex];
  updateProduct(product);
  model.object3D.visible = state.targetVisible;
}

nextButton.addEventListener("click", () => {
  state.currentIndex = (state.currentIndex + 1) % products.length;
  showCurrentProduct();
});

target.addEventListener("targetFound", () => {
  state.targetVisible = true;
  showCurrentProduct();
});

target.addEventListener("targetLost", () => {
  state.targetVisible = false;
  model.object3D.visible = false;
  copy.textContent = "Vuelve a escanear el marcador";
});

showCurrentProduct();

Marcar esta lección como completada

Template

Descargar proyecto intermedio

El template incluye la misma estructura acumulada del nivel: catálogo, estado, botón, eventos MindAR y transformaciones Three.js.

Template JavaScript WebAR intermedio

Proyecto dinámico con array de productos y UI interactiva.

Descargar template intermedio

Marcar esta lección como completada

Ingresa tu código de estudiante

Ahora el proyecto crece con datos

Crear la escena y la interfaz

Crear variables, constantes, array y objetos

Recordatorio sobre querySelector

Explicación línea por línea

Agregar updateProduct al final de app.js

Qué son textContent y addEventListener()

Qué es setAttribute()

Qué es object3D

Qué es style

Explicación línea por línea

Agregar state y showCurrentProduct

Agregar clic, targetFound y targetLost

Recordatorio sobre addEventListener()

Explicación línea por línea

Archivos finales del nivel intermedio

Descargar proyecto intermedio

Template JavaScript WebAR intermedio

Recordatorio sobre `querySelector`

Qué son `textContent` y `addEventListener()`

Qué es `setAttribute()`

Qué es `object3D`

Qué es `style`

Recordatorio sobre `addEventListener()`