Aula privada
Aprende JavaScript desde cero y mira cómo el código se suma hasta llegar a una experiencia WebAR con MindAR, A-Frame y Three.js.
Nivel básico
En este nivel cada lección suma algo al proyecto. Cuando agregamos JavaScript, te diré si va en index.html o en app.js, en qué parte se coloca y cómo queda el archivo completo después del cambio.
No borres lo anterior a menos que la lección diga explícitamente que vamos a reemplazar el archivo. La mayoría de pasos agregan líneas nuevas al final de app.js o modifican una zona concreta de index.html.
HTML base
Primero creamos la página. Todavía no hay realidad aumentada. Solo estamos preparando el lugar donde JavaScript se va a ejecutar.
index.html y crea el archivo completo con este contenido.<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Aprendiendo JavaScript para WebAR</title>
<script src="app.js" defer></script>
</head>
<body>
<h1>Mi primera página con JavaScript</h1>
</body>
</html>app.js. Ese archivo todavía puede estar vacío, pero ya quedó enlazado.Consola
Ahora sí creamos app.js. Este código no va dentro de index.html; va en un archivo separado porque el HTML ya lo está cargando en la línea 6.
app.js y crea el archivo y pega estas líneas desde la línea 1.console.log("JavaScript está funcionando");
console.log("Estoy aprendiendo para usarlo luego en WebAR");Variables y constantes
Las variables y constantes se escriben en app.js, debajo de lo que ya teníamos. No reemplaces los console.log anteriores: ahora el archivo crece.
app.js y pega las líneas nuevas debajo de la línea 2. El archivo completo debe quedar así.console.log("JavaScript está funcionando");
console.log("Estoy aprendiendo para usarlo luego en WebAR");
let nombreCurso = "JavaScript para WebAR";
let escaneos = 0;
let targetVisible = false;
const rutaTarget = "targets/poster.mind";
const escalaInicial = 0.4;
console.log(nombreCurso);
console.log("Escaneos:", escaneos);
console.log("Target visible:", targetVisible);
console.log("Archivo target:", rutaTarget);let porque esos valores pueden cambiar.const porque son datos base del proyecto.Tipos y operadores
Seguimos trabajando en app.js. Esta lección agrega datos más ricos y operaciones simples. Todo va al final del archivo anterior.
app.js y agrega desde la línea 15 hacia abajo. Aquí ves el archivo completo hasta este momento.console.log("JavaScript está funcionando");
console.log("Estoy aprendiendo para usarlo luego en WebAR");
let nombreCurso = "JavaScript para WebAR";
let escaneos = 0;
let targetVisible = false;
const rutaTarget = "targets/poster.mind";
const escalaInicial = 0.4;
console.log(nombreCurso);
console.log("Escaneos:", escaneos);
console.log("Target visible:", targetVisible);
console.log("Archivo target:", rutaTarget);
const titulo = "Producto aumentado";
const colores = ["azul", "verde", "amarillo"];
const producto = {
nombre: "Café Aurora",
modelo: "assets/cafe.glb",
precio: 8
};
escaneos = escaneos + 1;
const yaEscaneo = escaneos > 0;
const mensaje = "Escaneos realizados: " + escaneos;
console.log(titulo);
console.log(colores[0]);
console.log(producto.nombre);
console.log(yaEscaneo);
console.log(mensaje);Funciones
Una función evita repetir instrucciones. La agregamos al final de app.js porque usa valores que ya existen, como escaneos.
app.js y agrega las funciones debajo de los últimos console.log. El archivo acumulado queda así.console.log("JavaScript está funcionando");
console.log("Estoy aprendiendo para usarlo luego en WebAR");
let nombreCurso = "JavaScript para WebAR";
let escaneos = 0;
let targetVisible = false;
const rutaTarget = "targets/poster.mind";
const escalaInicial = 0.4;
console.log(nombreCurso);
console.log("Escaneos:", escaneos);
console.log("Target visible:", targetVisible);
console.log("Archivo target:", rutaTarget);
const titulo = "Producto aumentado";
const colores = ["azul", "verde", "amarillo"];
const producto = {
nombre: "Café Aurora",
modelo: "assets/cafe.glb",
precio: 8
};
escaneos = escaneos + 1;
const yaEscaneo = escaneos > 0;
const mensaje = "Escaneos realizados: " + escaneos;
console.log(titulo);
console.log(colores[0]);
console.log(producto.nombre);
console.log(yaEscaneo);
console.log(mensaje);
function mostrarMensaje(texto) {
console.log(texto);
}
function sumarEscaneo() {
escaneos = escaneos + 1;
return escaneos;
}
mostrarMensaje("Escanea el marcador");
console.log("Nuevo escaneo:", sumarEscaneo());escaneos y devuelve el nuevo valor.DOM y eventos
Este es el primer paso donde tocamos dos archivos. Primero reemplaza el contenido del body en index.html. Luego agrega al final de app.js el código que selecciona esos elementos.
document.querySelector()document representa toda la página HTML cargada en el navegador. querySelector() es una función que busca dentro de esa página y devuelve el primer elemento que coincida con el selector que escribas.
document.querySelector("#titulo") busca un elemento con id="titulo". El símbolo # significa id.document.querySelector(".boton") busca un elemento con class="boton". El símbolo . significa clase.document.querySelector("button") busca la primera etiqueta <button> que encuentre.Si no encuentra nada, devuelve null. Por eso el nombre del id en HTML debe coincidir exactamente con el selector usado en JavaScript.
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.index.html y reemplaza el archivo completo por esta versión, que agrega id, contador y botón.<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Aprendiendo JavaScript para WebAR</title>
<script src="app.js" defer></script>
</head>
<body>
<h1 id="titulo">Mi primera página con JavaScript</h1>
<p id="contador">Clics: 0</p>
<button id="boton">Cambiar texto</button>
</body>
</html>app.js y después agrega estas líneas al final. Aquí ves el archivo completo acumulado.console.log("JavaScript está funcionando");
console.log("Estoy aprendiendo para usarlo luego en WebAR");
let nombreCurso = "JavaScript para WebAR";
let escaneos = 0;
let targetVisible = false;
const rutaTarget = "targets/poster.mind";
const escalaInicial = 0.4;
console.log(nombreCurso);
console.log("Escaneos:", escaneos);
console.log("Target visible:", targetVisible);
console.log("Archivo target:", rutaTarget);
const titulo = "Producto aumentado";
const colores = ["azul", "verde", "amarillo"];
const producto = {
nombre: "Café Aurora",
modelo: "assets/cafe.glb",
precio: 8
};
escaneos = escaneos + 1;
const yaEscaneo = escaneos > 0;
const mensaje = "Escaneos realizados: " + escaneos;
console.log(titulo);
console.log(colores[0]);
console.log(producto.nombre);
console.log(yaEscaneo);
console.log(mensaje);
function mostrarMensaje(texto) {
console.log(texto);
}
function sumarEscaneo() {
escaneos = escaneos + 1;
return escaneos;
}
mostrarMensaje("Escanea el marcador");
console.log("Nuevo escaneo:", sumarEscaneo());
const tituloPagina = document.querySelector("#titulo");
const contador = document.querySelector("#contador");
const boton = document.querySelector("#boton");
let clics = 0;
boton.addEventListener("click", () => {
clics = clics + 1;
tituloPagina.textContent = "JavaScript ya está controlando el HTML";
contador.textContent = "Clics: " + clics;
});id="titulo" y lo guarda en la constante tituloPagina.id="contador".id="boton".Puente WebAR
Ahora hacemos un cambio grande: reemplazamos el index.html de práctica por un index.html WebAR. Esto sí reemplaza el archivo completo porque entramos a una nueva etapa.
index.html y reemplaza todo el archivo por esta escena base WebAR.<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JavaScript aplicado a WebAR</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 id="status">Escanea el marcador</div>
<a-scene
mindar-image="imageTargetSrc: targets/poster.mind; autoStart: true;"
color-space="sRGB"
renderer="colorManagement: true; physicallyCorrectLights: 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="box" color="#1d4ed8" position="0 0 0" visible="false"></a-box>
</a-entity>
</a-scene>
</body>
</html>app.js..mind.Archivo .mind
El HTML anterior ya apunta a targets/poster.mind. Por eso ahora debes generar ese archivo y guardarlo dentro de la carpeta targets/ con el nombre poster.mind.
targets/poster.mind y usa el compilador, descarga el archivo y guárdalo con ese nombre exacto.Compilador integrado
Este bloque crea el archivo que luego colocarás en la carpeta targets/. Primero cargas una imagen, luego la analizas, después la compilas y finalmente descargas el archivo .mind.
No hay imágenes seleccionadas.
Selecciona una imagen para comenzar.
El compilador solo funciona desde http://localhost o HTTPS. Si abres el curso con file://, el navegador bloquea módulos y cámara.
MindAR
Como pasamos de una práctica HTML a una escena WebAR, ahora sí reemplazamos app.js. Ya no necesitamos el código de consola, clics y DOM normal. Ahora usaremos el mismo conocimiento, pero aplicado a elementos de A-Frame.
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.app.js y reemplaza todo el archivo por este código WebAR inicial.const target = document.querySelector("#target");
const box = document.querySelector("#box");
const status = document.querySelector("#status");
let targetVisible = false;
let escaneos = 0;
function mostrarCaja() {
box.setAttribute("visible", "true");
}
function ocultarCaja() {
box.setAttribute("visible", "false");
}
target.addEventListener("targetFound", () => {
targetVisible = true;
escaneos = escaneos + 1;
status.textContent = "Target detectado. Escaneos: " + escaneos;
mostrarCaja();
});
target.addEventListener("targetLost", () => {
targetVisible = false;
status.textContent = "Busca otra vez el marcador";
ocultarCaja();
});
ocultarCaja();document.querySelector("#target") para buscar la entidad A-Frame con id="target".id="box".id="status".let.Three.js
Ahora no reemplazamos todo conceptualmente: mejoramos las funciones mostrarCaja() y ocultarCaja(). Para que no haya dudas, aquí tienes el archivo completo final de app.js.
object3Dobject3D 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.
app.js y reemplaza el archivo por esta versión final que usa Three.js directamente.const target = document.querySelector("#target");
const box = document.querySelector("#box");
const status = document.querySelector("#status");
let targetVisible = false;
let escaneos = 0;
function mostrarCaja() {
box.object3D.scale.set(0.5, 0.5, 0.5);
box.object3D.rotation.y = THREE.MathUtils.degToRad(25);
box.object3D.visible = true;
}
function ocultarCaja() {
box.object3D.visible = false;
}
target.addEventListener("targetFound", () => {
targetVisible = true;
escaneos = escaneos + 1;
status.textContent = "Target detectado. Escaneos: " + escaneos;
mostrarCaja();
});
target.addEventListener("targetLost", () => {
targetVisible = false;
status.textContent = "Busca otra vez el marcador";
ocultarCaja();
});
ocultarCaja();
status.textContent = "Escanea el marcador";object3D.Código final
Estos son los dos archivos finales. El estudiante debe poder comparar todo el camino y ver cómo pasamos de JavaScript puro a WebAR.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JavaScript aplicado a WebAR</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 id="status">Escanea el marcador</div>
<a-scene
mindar-image="imageTargetSrc: targets/poster.mind; autoStart: true;"
color-space="sRGB"
renderer="colorManagement: true; physicallyCorrectLights: 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="box" color="#1d4ed8" position="0 0 0" visible="false"></a-box>
</a-entity>
</a-scene>
</body>
</html>const target = document.querySelector("#target");
const box = document.querySelector("#box");
const status = document.querySelector("#status");
let targetVisible = false;
let escaneos = 0;
function mostrarCaja() {
box.object3D.scale.set(0.5, 0.5, 0.5);
box.object3D.rotation.y = THREE.MathUtils.degToRad(25);
box.object3D.visible = true;
}
function ocultarCaja() {
box.object3D.visible = false;
}
target.addEventListener("targetFound", () => {
targetVisible = true;
escaneos = escaneos + 1;
status.textContent = "Target detectado. Escaneos: " + escaneos;
mostrarCaja();
});
target.addEventListener("targetLost", () => {
targetVisible = false;
status.textContent = "Busca otra vez el marcador";
ocultarCaja();
});
ocultarCaja();
status.textContent = "Escanea el marcador";Template
El template contiene esta estructura final lista para practicar. Recuerda: el estudiante debe reemplazar targets/poster.mind por el archivo que compile.
Incluye HTML, JavaScript, carpeta de targets y base MindAR/A-Frame/Three.js.
Descargar template básicoPrueba de cámara
Cuando MindAR reconozca el target, verás un panel azul encima de la imagen.