Acceso privado

WebAR Comercial con Pagos y Leads - Básico

Aprende a crear una primera experiencia WebAR que captura datos y conecta WhatsApp.

Nivel básico

Mapa del proyecto WebAR comercial

En este nivel construiremos una experiencia comercial sencilla, pensada para una campaña real: una persona entra desde un QR, toca un botón para abrir la cámara, escanea un marcador y ve un modelo 3D de helado como oferta aumentada. Después puede dejar sus datos o escribir por WhatsApp.

El objetivo no es solo “hacer aparecer algo en realidad aumentada”. El objetivo comercial es crear una experiencia que pueda generar un lead, iniciar una conversación y medir una intención de compra.

Qué archivos tendrá el proyecto final

landing-webar-comercial/
  index.html
  styles.css
  app.js
  targets/
    campana.mind
  assets/
    Modelo3D-Helado.glb
  vendor/
    three/
      build/three.module.js
      examples/jsm/loaders/GLTFLoader.js
      examples/jsm/libs/meshopt_decoder.module.js

Primero instalamos y usamos las herramientas básicas para que una persona desde cero sepa dónde escribir el código.
Después creamos el HTML mínimo y lo vamos reemplazando por versiones acumuladas.
Luego compilamos el marcador .mind y conectamos MindAR.
Finalmente agregamos JavaScript para iniciar cámara, cargar el GLB, detectar el target, mostrar el panel y capturar el lead.

Entiendo la ruta del proyecto básico.

Herramientas

Instalar Visual Studio Code

Visual Studio Code será el editor donde crearemos los archivos del proyecto. Si una persona nunca ha programado, puede pensar en VS Code como el lugar donde se escribe y organiza la página web: ahí crearemos index.html, styles.css y app.js.

Entra al sitio oficial: https://code.visualstudio.com/.
Descarga la versión para tu sistema operativo.
Instala usando las opciones por defecto.
Abre VS Code y confirma que puedes crear una ventana nueva.
En Windows, si el instalador lo permite, activa la opción para abrir carpetas con clic derecho.

Video: instalación de Visual Studio CodeEste video guía el proceso de instalación antes de escribir el primer archivo.

Marcar esta lección como completada

Servidor local

Instalar Live Server y probar el proyecto

No abras el HTML con doble clic para trabajar WebAR. La cámara, los modelos 3D, los archivos .mind y los scripts externos funcionan mejor desde una URL local. Live Server crea esa URL automáticamente.

Abre la barra lateral de extensiones en VS Code.
Busca Live Server.
Instala la extensión de Ritwick Dey.
Cuando tengas index.html, haz clic derecho y selecciona Open with Live Server.
El navegador abrirá una ruta parecida a http://127.0.0.1:5500.

Video: instalación de Live ServerInstala la extensión que usaremos durante el curso.

Video: probar con Live ServerAprende a abrir el proyecto como servidor local.

Marcar esta lección como completada

Carpetas

Crear el proyecto desde cero

Crea una carpeta llamada landing-webar-comercial. Esa carpeta será tu proyecto. Dentro de ella estarán todos los archivos que el navegador necesita para mostrar la página, abrir la cámara, cargar el modelo 3D y reconocer el marcador.

Pasos dentro de VS Code

Abre VS Code.
Ve a File > Open Folder.
Crea o selecciona la carpeta landing-webar-comercial.
Desde el explorador lateral crea index.html, styles.css y app.js.
Crea las carpetas targets, assets y vendor.

Por qué separamos archivos: index.html tendrá la estructura, styles.css tendrá el diseño y app.js tendrá la lógica. Separarlos desde el principio ayuda a que el proyecto sea más fácil de leer, corregir y publicar.

Ya creé la carpeta y los archivos base.

Inicio

Qué vamos a crear en el nivel básico

Este nivel crea una landing WebAR comercial simple, pero con lógica de negocio real. El usuario abre una página desde un QR, presiona un botón, escanea un marcador y ve una oferta aumentada con un modelo 3D. Cuando el marcador aparece, mostramos un panel con formulario y WhatsApp.

La idea es que el estudiante entienda que WebAR puede ser una herramienta de ventas: no solo muestra contenido visual, también puede capturar datos, llevar tráfico a WhatsApp y preparar una futura integración con pagos o CRM.

La lógica comercial

Una experiencia comercial no termina cuando aparece un objeto 3D. Debe llevar al usuario a una acción medible: dejar datos, escribir por WhatsApp, comprar, agendar o solicitar una cotización.

Primero creamos la página base.
Luego conectamos A-Frame y MindAR.
Después agregamos un formulario de lead.
Finalmente conectamos eventos targetFound, targetLost y WhatsApp.

Marcar esta lección como completada

Preparación

Crear carpeta y archivos desde cero

Crea una carpeta llamada landing-webar-comercial. Dentro de ella crea estos archivos: index.html, styles.css, app.js y dos carpetas: targets y assets. El archivo campana.mind irá dentro de targets y el modelo Modelo3D-Helado.glb irá dentro de assets.

Dónde se crea: abre Visual Studio Code, selecciona File > Open Folder, abre la carpeta y crea los archivos desde el explorador lateral.

HTML inicial completoindex.html

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Landing WebAR Comercial</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <main class="landing">
      <h1>Campaña WebAR Comercial</h1>
      <p>Escanea el marcador para ver la oferta en realidad aumentada.</p>
    </main>
  </body>
</html>

Explicación del HTML inicial

Línea 1 - <!doctype html>: le dice al navegador que este archivo usa HTML moderno. Sin esta línea, algunos navegadores pueden interpretar la página en un modo antiguo.
Línea 2 - <html lang="es">: abre el documento HTML y declara que el idioma principal será español. Esto ayuda a accesibilidad, traducción automática y motores de búsqueda.
Línea 4 - charset="utf-8": permite usar tildes, eñes y caracteres especiales sin problemas.
Línea 5 - viewport: prepara la página para móviles. En WebAR esto es indispensable porque casi todos los usuarios escanean desde celular.
Línea 7 - styles.css: conecta el archivo donde escribiremos el diseño visual.
Línea 8 - app.js defer: conecta JavaScript. La palabra defer hace que el script espere a que el HTML esté construido antes de buscar botones, formularios o la escena AR.
Líneas 10 a 14 - body: contienen lo que el usuario verá en pantalla. Por ahora solo hay un título y un texto; después agregaremos cámara, target, modelo 3D y formulario.

Marcar esta lección como completada

Escena AR

Agregar A-Frame, MindAR y la primera escena

Ahora reemplaza tu index.html por esta versión. Es el código completo acumulado: conserva lo anterior y suma las librerías, el botón para abrir cámara y la escena AR.

Qué se agrega: en el head agregamos A-Frame y MindAR. En el body agregamos a-scene, a-camera, el target y un contenedor para cargar por JavaScript el modelo 3D GLB del helado.

HTML con escena MindARindex.html

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Landing WebAR Comercial</title>
    <link rel="stylesheet" href="styles.css" />
    <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>
    <main class="landing">
      <section id="intro" class="intro">
        <p class="tag">WebAR comercial</p>
        <h1>Escanea, conoce la oferta y deja tus datos.</h1>
        <button id="start-ar" type="button">Abrir experiencia AR</button>
      </section>
    </main>

    <a-scene
      mindar-image="imageTargetSrc: targets/campana.mind; autoStart: false; maxTrack: 1;"
      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-entity
          id="offer-model"
          position="0 -0.2 0"
          rotation="0 0 0"
          scale="1 1 1">
        </a-entity>
        <a-text value="Oferta WebAR" position="-0.42 0.48 0.05" color="#ffffff" width="2"></a-text>
      </a-entity>
    </a-scene>
  </body>
</html>

Explicación de la escena AR

Primero entiende la idea

A-Frame crea la escena 3D, MindAR reconoce la imagen objetivo y JavaScript carga el modelo comprimido. En este paso dejamos preparado el lugar donde aparecerá el helado, pero el GLB se carga más adelante desde app.js.

a-scene: es el contenedor principal de A-Frame. Todo lo que sea cámara, luces, modelo 3D o target vive dentro de esta escena.
mindar-image: activa MindAR para reconocimiento de imágenes. El parámetro imageTargetSrc apunta al archivo targets/campana.mind.
autoStart: false: evita que la cámara se abra sola. En móviles es mejor iniciar la cámara después de un clic del usuario.
maxTrack: 1: le dice a MindAR que en este nivel solo rastrearemos un marcador al tiempo.
a-camera: representa la cámara virtual de A-Frame. Usamos look-controls="enabled: false" porque el movimiento real viene de MindAR y la cámara del dispositivo.
a-entity id="target": es el grupo que se activa cuando MindAR reconoce el marcador con índice 0.
a-entity id="offer-model": es un contenedor vacío. JavaScript insertará aquí el modelo Modelo3D-Helado.glb después de preparar el decoder Meshopt.
position="0 -0.2 0": baja un poco el modelo para centrarlo mejor sobre el target.
rotation="0 0 0": mantiene el modelo sin giro inicial. Si el modelo aparece de lado, aquí se corrige.
scale="1 1 1": muestra el modelo a su tamaño base. Usamos esta escala porque el GLB ya viene con proporciones adecuadas.
a-text: agrega un texto flotante sobre el target. Es útil para indicar una oferta, una promoción o un llamado a la acción.

Marcar esta lección como completada

Marcador

Elegir imagen, compilar target y generar .mind

El archivo .mind es el marcador compilado. MindAR no rastrea la imagen JPG directamente dentro de la experiencia final; primero debe convertirla en datos de seguimiento.

Usa una imagen con contraste, texto, bordes y detalles.
Evita fondos planos o imágenes borrosas.
Compila la imagen.
Descarga el archivo y renómbralo como campana.mind.
Guárdalo dentro de targets/campana.mind.

Compilador .mind integrado

Sube una imagen de producto, flyer, tarjeta comercial o pieza de campaña. El compilador genera el archivo .mind que MindAR necesita para reconocer el marcador.

Subir imagen target

No hay imágenes seleccionadas.

Selecciona una imagen para comenzar.

Marcar esta lección como completada

Formulario

Agregar formulario, panel comercial y WhatsApp

Ahora el proyecto deja de ser solamente visual. Agregamos un panel que aparece cuando el marcador se detecta. Ese panel contiene el título de la oferta, un formulario y un enlace de WhatsApp.

Dónde va: reemplaza nuevamente el archivo index.html completo con esta versión. Observa especialmente las líneas resaltadas donde aparece commercial-panel y lead-form.

HTML con panel de leadindex.html

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Landing WebAR Comercial</title>
    <link rel="stylesheet" href="styles.css" />
    <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>
    <main class="landing">
      <section id="intro" class="intro">
        <p class="tag">WebAR comercial</p>
        <h1>Escanea, conoce la oferta y deja tus datos.</h1>
        <button id="start-ar" type="button">Abrir experiencia AR</button>
      </section>
    </main>

    <section id="commercial-panel" class="commercial-panel" hidden>
      <h2 id="offer-title">Oferta detectada</h2>
      <p id="offer-copy">Completa el formulario para recibir más información.</p>
      <form id="lead-form">
        <input id="lead-name" name="name" type="text" placeholder="Nombre" required />
        <input id="lead-email" name="email" type="email" placeholder="Email" required />
        <input id="lead-whatsapp" name="whatsapp" type="tel" placeholder="WhatsApp" required />
        <button type="submit">Quiero información</button>
      </form>
      <a id="whatsapp-link" href="#" target="_blank" rel="noopener">Hablar por WhatsApp</a>
      <p id="form-status"></p>
    </section>

    <a-scene
      mindar-image="imageTargetSrc: targets/campana.mind; autoStart: false; maxTrack: 1;"
      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-entity
          id="offer-model"
          position="0 -0.2 0"
          rotation="0 0 0"
          scale="1 1 1">
        </a-entity>
        <a-text value="Oferta WebAR" position="-0.42 0.48 0.05" color="#ffffff" width="2"></a-text>
      </a-entity>
    </a-scene>
  </body>
</html>

Explicación del formulario comercial

section id="commercial-panel": crea el panel flotante que aparecerá sobre la cámara cuando se detecte el marcador.
hidden: deja el panel oculto al cargar la página. JavaScript lo mostrará cuando ocurra targetFound.
offer-title y offer-copy: son textos que explican la oferta. En niveles posteriores JavaScript podrá cambiarlos según el producto.
form id="lead-form": agrupa los campos que el usuario llenará. Esto nos permite escuchar el evento submit desde JavaScript.
input type="text": recibe el nombre del usuario.
input type="email": recibe el correo y permite que el navegador valide que tenga formato de email.
input type="tel": recibe el WhatsApp o teléfono de contacto.
required: evita enviar el formulario vacío. Es una validación básica del navegador.
whatsapp-link: será actualizado por JavaScript para abrir una conversación con un mensaje comercial ya preparado.
form-status: mostrará mensajes como “datos guardados” o “gracias por registrarte”.

Marcar esta lección como completada

Lógica

Controlar cámara, targetFound, targetLost y lead_submit

Ahora crea o reemplaza app.js. Este JavaScript busca elementos del HTML, arranca la cámara cuando el usuario presiona el botón, muestra el panel al detectar el marcador y guarda el lead temporalmente.

JavaScript completo básicoapp.js

const startButton = document.querySelector("#start-ar");
const scene = document.querySelector("a-scene");
const target = document.querySelector("#target");
const panel = document.querySelector("#commercial-panel");
const leadForm = document.querySelector("#lead-form");
const formStatus = document.querySelector("#form-status");
const whatsappLink = document.querySelector("#whatsapp-link");
const offerModel = document.querySelector("#offer-model");

const offer = {
  title: "Demo comercial WebAR",
  message: "Hola, quiero informacion sobre la oferta WebAR.",
  whatsapp: "573159699392"
};

let modelLoaderPromise;

async function prepareCompressedModel() {
  if (modelLoaderPromise) return modelLoaderPromise;

  modelLoaderPromise = Promise.all([
    import("./vendor/three/examples/jsm/loaders/GLTFLoader.js"),
    import("./vendor/three/examples/jsm/libs/meshopt_decoder.module.js")
  ]).then(async ([{ GLTFLoader }, { MeshoptDecoder }]) => {
    await MeshoptDecoder.ready;

    return new Promise((resolve, reject) => {
      const loader = new GLTFLoader();
      loader.setMeshoptDecoder(MeshoptDecoder);

      loader.load(
        "assets/Modelo3D-Helado.glb",
        (gltf) => {
          while (offerModel.object3D.children.length > 0) {
            offerModel.object3D.remove(offerModel.object3D.children[0]);
          }

          offerModel.object3D.add(gltf.scene);
          resolve(gltf);
        },
        undefined,
        reject
      );
    });
  });

  return modelLoaderPromise;
}

startButton.addEventListener("click", async () => {
  startButton.disabled = true;
  await prepareCompressedModel();
  await scene.systems["mindar-image-system"].start();
  startButton.textContent = "Cámara activa";
  document.body.classList.add("ar-started");
});

target.addEventListener("targetFound", () => {
  panel.hidden = false;
  whatsappLink.href = "https://wa.me/" + offer.whatsapp + "?text=" + encodeURIComponent(offer.message);
});

target.addEventListener("targetLost", () => {
  panel.hidden = true;
});

leadForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const lead = {
    name: document.querySelector("#lead-name").value.trim(),
    email: document.querySelector("#lead-email").value.trim(),
    whatsapp: document.querySelector("#lead-whatsapp").value.trim(),
    createdAt: new Date().toISOString()
  };
  localStorage.setItem("lastLead", JSON.stringify(lead));
  formStatus.textContent = "Gracias. Tus datos quedaron registrados para seguimiento.";
});

Explicación del JavaScript

Qué controla este archivo

app.js conecta la interfaz HTML con la experiencia AR. Aquí iniciamos la cámara, cargamos el modelo GLB, mostramos el panel comercial y guardamos temporalmente los datos del lead.

Líneas 1 a 8: guardan elementos del HTML en constantes. Así no tenemos que escribir document.querySelector una y otra vez.
offerModel: apunta al contenedor vacío donde insertaremos el modelo del helado.
offer: guarda datos comerciales reutilizables: título, mensaje de WhatsApp y número de destino.
modelLoaderPromise: evita cargar el modelo más de una vez. Si el usuario toca el botón varias veces, reutilizamos la misma promesa.
prepareCompressedModel(): prepara la carga del GLB. Esta función existe porque el modelo usa compresión Meshopt.
Promise.all(): importa al mismo tiempo GLTFLoader.js y meshopt_decoder.module.js.
MeshoptDecoder.ready: espera a que el decoder esté listo antes de leer el archivo comprimido.
new GLTFLoader(): crea el cargador que entiende archivos .glb y .gltf.
loader.setMeshoptDecoder(MeshoptDecoder): conecta el decoder con el loader. Sin esta línea, el navegador puede mostrar el error de Meshopt.
loader.load(): carga assets/Modelo3D-Helado.glb. Cuando termina, entrega el resultado en la variable gltf.
offerModel.object3D.add(gltf.scene): inserta el modelo real dentro de la entidad de A-Frame.
startButton.addEventListener("click"): espera el clic del usuario para preparar el modelo e iniciar MindAR.
targetFound: se ejecuta cuando el marcador aparece en cámara. Aquí mostramos el panel y preparamos el enlace de WhatsApp.
targetLost: se ejecuta cuando MindAR pierde el marcador. Aquí ocultamos el panel.
leadForm.addEventListener("submit"): captura el envío del formulario, evita que la página se recargue y guarda el lead en localStorage.

Marcar esta lección como completada

Diseño

Diseñar la landing y el panel flotante

El CSS le da forma comercial al proyecto. En una experiencia WebAR real no basta con que la cámara funcione: los botones deben poder tocarse, el formulario no debe tapar toda la pantalla y el panel debe adaptarse al móvil. En esta versión corregimos tres problemas típicos: el canvas de A-Frame puede bloquear clics, el panel puede quedar demasiado grande y los botones pueden verse montados si no tienen una estructura clara.

Dónde va: abre styles.css y reemplaza todo el contenido por esta versión. Si ya escribiste la versión anterior, bórrala completa y pega este CSS corregido. No va dentro de index.html ni dentro de app.js.

CSS completo básico corregidostyles.css

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  color: #0f172a;
}

body {
  overflow: hidden;
}

.landing {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #dbeafe, #ffffff);
}

.intro {
  position: relative;
  z-index: 3;
  width: min(520px, 100%);
  padding: 28px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}

.tag {
  margin: 0 0 14px;
  color: #2563eb;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.intro h1 {
  margin: 0 0 22px;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1.08;
}

button,
#whatsapp-link {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

button {
  padding: 0 20px;
  background: #2563eb;
  color: #ffffff;
}

#start-ar {
  position: relative;
  z-index: 30;
  pointer-events: auto !important;
}

.commercial-panel {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  width: min(560px, calc(100vw - 32px));
  max-height: min(58vh, 430px);
  margin: auto;
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: auto;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(14px);
}

.commercial-panel[hidden] {
  display: none;
}

.commercial-panel h2,
.commercial-panel p {
  margin: 0;
}

.commercial-panel h2 {
  font-size: 1.4rem;
  line-height: 1.15;
}

#lead-form {
  display: grid;
  gap: 10px;
}

#lead-form input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font: inherit;
  background: #ffffff;
}

#lead-form button,
#whatsapp-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#whatsapp-link {
  padding: 0 18px;
  background: #0f172a;
  color: #ffffff;
}

#form-status {
  min-height: 18px;
  color: #166534;
  font-weight: 700;
}

a-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
}

a-scene,
a-scene canvas,
.a-canvas {
  pointer-events: none !important;
}

.landing,
.intro {
  pointer-events: auto !important;
}

body.ar-started .landing {
  display: none;
}

@media (max-width: 520px) {
  .commercial-panel {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    max-height: 52vh;
    padding: 14px;
    gap: 10px;
  }

  .commercial-panel h2 {
    font-size: 1.2rem;
  }
}

Explicación del CSS

* { box-sizing: border-box; }: hace que los tamaños sean más fáciles de controlar. El ancho incluye borde y padding.
html y body: ocupan toda la pantalla para que la cámara no quede cortada ni aparezcan zonas blancas.
body { overflow: hidden; }: evita scroll detrás de la experiencia AR.
.landing: es la pantalla inicial. display: grid y place-items: center centran la tarjeta de entrada.
.intro: es la tarjeta blanca del botón inicial. Tiene ancho máximo para verse bien en escritorio y móvil.
.tag y .intro h1: controlan la jerarquía visual: primero la categoría, luego el mensaje principal.
button y #whatsapp-link: comparten forma redondeada, altura táctil y peso visual. Esto hace que los CTA sean fáciles de tocar.
#start-ar: tiene z-index alto y pointer-events: auto para que el canvas AR no bloquee el clic inicial.
.commercial-panel: queda fijo abajo como interfaz sobre cámara. max-height evita que tape toda la vista.
overflow: auto: permite hacer scroll dentro del panel si el móvil es pequeño o si aparece el teclado.
#lead-form: usa display: grid para separar los campos con una distancia consistente.
#lead-form button y #whatsapp-link: ocupan el ancho completo para que no se monten ni se vean partidos.
a-scene: se fija al fondo y ocupa toda la pantalla. Ahí vive la cámara de A-Frame/MindAR.
pointer-events: none en a-scene: evita que el canvas invisible bloquee botones HTML.
body.ar-started .landing: oculta la pantalla inicial después de iniciar la cámara.
@media (max-width: 520px): ajusta el panel para pantallas pequeñas, reduciendo márgenes, altura y padding.

Marcar esta lección como completada

Template final

Descarga el proyecto completo

Este ZIP contiene el proyecto final del nivel, con estructura de carpetas, código completo, modelo 3D GLB incluido y notas para publicarlo.

Template Nivel básico

Proyecto WebAR comercial listo para estudiar, adaptar y subir a un servidor HTTPS.

Descargar template

WebAR Comercial con Pagos y Leads - Básico

Mapa del proyecto WebAR comercial

Qué archivos tendrá el proyecto final

Instalar Visual Studio Code

Instalar Live Server y probar el proyecto

Crear el proyecto desde cero

Pasos dentro de VS Code

Qué vamos a crear en el nivel básico

La lógica comercial

Crear carpeta y archivos desde cero

Explicación del HTML inicial

Agregar A-Frame, MindAR y la primera escena

Explicación de la escena AR

Primero entiende la idea

Elegir imagen, compilar target y generar .mind

Compilador .mind integrado

Agregar formulario, panel comercial y WhatsApp

Explicación del formulario comercial

Controlar cámara, targetFound, targetLost y lead_submit

Explicación del JavaScript

Qué controla este archivo

Diseñar la landing y el panel flotante

Explicación del CSS

Descarga el proyecto completo

Template Nivel básico

Escanea tu imagen objetivo