webar-avanzado/
  index.html
  css/
    styles.css
  js/
    app.js
    analytics.js
  data/
    products.js
  targets/
    catalogo.mind
  models/
    robot.glb
    tech.glb
    nature.glb
  assets/
    brand-logo.svg

window.PRODUCTS = [
  {
    id: "robot",
    targetIndex: 0,
    name: "Robot asistente",
    category: "Automatizacion",
    price: "USD 299",
    model: "#robotModel",
    description: "Modelo de demostracion para experiencias de asistencia, educacion o servicio.",
    cta: "Solicitar demo"
  },
  {
    id: "tech",
    targetIndex: 1,
    name: "Modulo Tech",
    category: "Producto digital",
    price: "USD 149",
    model: "#techModel",
    description: "Elemento visual para presentar tecnologia, software o servicios digitales.",
    cta: "Ver propuesta"
  },
  {
    id: "nature",
    targetIndex: 2,
    name: "Pack Nature",
    category: "Experiencia verde",
    price: "USD 89",
    model: "#natureModel",
    description: "Modelo pensado para campañas educativas, sostenibilidad o turismo.",
    cta: "Quiero informacion"
  }
];

<a-scene
  mindar-image="imageTargetSrc: targets/catalogo.mind; maxTrack: 3; filterMinCF: 0.001; filterBeta: 0.01"
  color-space="sRGB"
  renderer="colorManagement: true, physicallyCorrectLights"
  vr-mode-ui="enabled: false"
  device-orientation-permission-ui="enabled: false">

  <a-assets>
    <a-asset-item id="robotModel" src="models/robot.glb"></a-asset-item>
    <a-asset-item id="techModel" src="models/tech.glb"></a-asset-item>
    <a-asset-item id="natureModel" src="models/nature.glb"></a-asset-item>
  </a-assets>

  <a-entity mindar-image-target="targetIndex: 0" id="target-robot" data-product-id="robot">
    <a-gltf-model src="#robotModel" scale="0.28 0.28 0.28" animation-mixer="clip: *; loop: repeat"></a-gltf-model>
  </a-entity>

  <a-entity mindar-image-target="targetIndex: 1" id="target-tech" data-product-id="tech">
    <a-gltf-model src="#techModel" scale="0.22 0.22 0.22"></a-gltf-model>
  </a-entity>

  <a-entity mindar-image-target="targetIndex: 2" id="target-nature" data-product-id="nature">
    <a-gltf-model src="#natureModel" scale="0.24 0.24 0.24"></a-gltf-model>
  </a-entity>
</a-scene>

<main class="ar-ui">
  <section class="product-panel">
    <p class="eyebrow">Catalogo WebAR</p>
    <h1 id="productName">Escanea un producto</h1>
    <p id="productCategory">Apunta la camara a un marcador del catalogo.</p>
    <p id="productDescription">La informacion del producto aparecera aqui.</p>
    <strong id="productPrice">-</strong>
    <div class="panel-actions">
      <button id="leadButton" type="button">Me interesa</button>
      <button id="resetButton" type="button">Limpiar</button>
    </div>
  </section>
</main>

.ar-ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
}

.product-panel {
  width: min(560px, 100%);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 18px;
  padding: 18px;
  color: #111827;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}

.panel-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

const products = window.PRODUCTS;
const activeProducts = new Set();

const productName = document.querySelector("#productName");
const productCategory = document.querySelector("#productCategory");
const productDescription = document.querySelector("#productDescription");
const productPrice = document.querySelector("#productPrice");
const leadButton = document.querySelector("#leadButton");
const resetButton = document.querySelector("#resetButton");
const targets = document.querySelectorAll("[data-product-id]");

function findProduct(id) {
  return products.find((product) => product.id === id);
}

function renderProduct(product) {
  productName.textContent = product.name;
  productCategory.textContent = product.category;
  productDescription.textContent = product.description;
  productPrice.textContent = product.price;
  leadButton.textContent = product.cta;
  leadButton.dataset.productId = product.id;
}

function renderActiveState() {
  const selectedIds = Array.from(activeProducts);

  if (selectedIds.length === 0) {
    productName.textContent = "Escanea un producto";
    productCategory.textContent = "Catalogo WebAR";
    productDescription.textContent = "Apunta la camara a uno o varios marcadores.";
    productPrice.textContent = "-";
    leadButton.dataset.productId = "";
    return;
  }

  const lastProduct = findProduct(selectedIds[selectedIds.length - 1]);
  renderProduct(lastProduct);
}

targets.forEach((target) => {
  const productId = target.dataset.productId;

  target.addEventListener("targetFound", () => {
    activeProducts.add(productId);
    renderActiveState();
    trackEvent("target_found", { productId });
  });

  target.addEventListener("targetLost", () => {
    activeProducts.delete(productId);
    renderActiveState();
    trackEvent("target_lost", { productId });
  });
});

const ANALYTICS_KEY = "webarAdvancedEvents";

function getStoredEvents() {
  return JSON.parse(localStorage.getItem(ANALYTICS_KEY) || "[]");
}

function saveEvent(event) {
  const events = getStoredEvents();
  events.push(event);
  localStorage.setItem(ANALYTICS_KEY, JSON.stringify(events.slice(-100)));
}

function trackEvent(name, data = {}) {
  const event = {
    name,
    data,
    createdAt: new Date().toISOString()
  };

  saveEvent(event);
  console.log("[analytics]", event);
}

<form class="lead-form" id="leadForm">
  <label>
    Email
    <input id="leadEmail" type="email" placeholder="cliente@email.com" required />
  </label>
  <button type="submit">Enviar interes</button>
  <p id="leadMessage" role="status"></p>
</form>

const leadForm = document.querySelector("#leadForm");
const leadEmail = document.querySelector("#leadEmail");
const leadMessage = document.querySelector("#leadMessage");

leadForm.addEventListener("submit", (event) => {
  event.preventDefault();

  const productId = leadButton.dataset.productId;
  const email = leadEmail.value.trim();

  if (!productId) {
    leadMessage.textContent = "Primero escanea un producto.";
    return;
  }

  trackEvent("lead_submit", { productId, email });
  leadMessage.textContent = "Interes registrado. Gracias.";
  leadForm.reset();
});

async function loadProductsFromApi() {
  const response = await fetch("https://tudominio.com/api/products");

  if (!response.ok) {
    throw new Error("No se pudieron cargar los productos");
  }

  const products = await response.json();
  return products;
}

Esta experiencia usa la camara solo para reconocer imagenes objetivo.
No grabamos video ni tomamos fotos desde el navegador.
Si envias tu email, lo usaremos solo para responder tu solicitud.
Puedes cerrar la experiencia en cualquier momento.

https://tudominio.com/catalogo-webar/?v=1
https://tudominio.com/catalogo-webar/?v=2
https://tudominio.com/catalogo-webar/?v=3

window.PRODUCTS = [
  { id: "robot", targetIndex: 0, name: "Robot asistente", category: "Automatizacion", price: "USD 299", model: "#robotModel", description: "Modelo de demostracion para experiencias de asistencia, educacion o servicio.", cta: "Solicitar demo" },
  { id: "tech", targetIndex: 1, name: "Modulo Tech", category: "Producto digital", price: "USD 149", model: "#techModel", description: "Elemento visual para presentar tecnologia, software o servicios digitales.", cta: "Ver propuesta" },
  { id: "nature", targetIndex: 2, name: "Pack Nature", category: "Experiencia verde", price: "USD 89", model: "#natureModel", description: "Modelo pensado para campañas educativas, sostenibilidad o turismo.", cta: "Quiero informacion" }
];

const ANALYTICS_KEY = "webarAdvancedEvents";

function getStoredEvents() {
  return JSON.parse(localStorage.getItem(ANALYTICS_KEY) || "[]");
}

function saveEvent(event) {
  const events = getStoredEvents();
  events.push(event);
  localStorage.setItem(ANALYTICS_KEY, JSON.stringify(events.slice(-100)));
}

function trackEvent(name, data = {}) {
  const event = { name, data, createdAt: new Date().toISOString() };
  saveEvent(event);
  console.log("[analytics]", event);
}

const products = window.PRODUCTS;
const activeProducts = new Set();
const productName = document.querySelector("#productName");
const productCategory = document.querySelector("#productCategory");
const productDescription = document.querySelector("#productDescription");
const productPrice = document.querySelector("#productPrice");
const leadButton = document.querySelector("#leadButton");
const resetButton = document.querySelector("#resetButton");
const targets = document.querySelectorAll("[data-product-id]");

function findProduct(id) {
  return products.find((product) => product.id === id);
}

function renderProduct(product) {
  productName.textContent = product.name;
  productCategory.textContent = product.category;
  productDescription.textContent = product.description;
  productPrice.textContent = product.price;
  leadButton.textContent = product.cta;
  leadButton.dataset.productId = product.id;
}

function renderActiveState() {
  const selectedIds = Array.from(activeProducts);
  if (selectedIds.length === 0) {
    productName.textContent = "Escanea un producto";
    productCategory.textContent = "Catalogo WebAR";
    productDescription.textContent = "Apunta la camara a uno o varios marcadores.";
    productPrice.textContent = "-";
    leadButton.dataset.productId = "";
    return;
  }
  renderProduct(findProduct(selectedIds[selectedIds.length - 1]));
}

targets.forEach((target) => {
  const productId = target.dataset.productId;
  target.addEventListener("targetFound", () => {
    activeProducts.add(productId);
    renderActiveState();
    trackEvent("target_found", { productId });
  });
  target.addEventListener("targetLost", () => {
    activeProducts.delete(productId);
    renderActiveState();
    trackEvent("target_lost", { productId });
  });
});