Documentación para desarrolladores

Todo lo que necesitas para integrar el visor 3D en tu sitio web.

Inicio rápido

Carga el script del visor:

<script src="https://cdn.3d-lion.com/glb-viewer-loader.iife.js"></script>

Coloca el visor en tu página:

<glb-viewer
  api-key="pk_your_api_key_here"
  model-url="https://yoursite.com/models/product.glb"
  style="width: 100%; height: 600px;">
</glb-viewer>

Listo — tu visor 3D está activo.

Atributos del componente web

Attribute		Description
`api-key`	Obligatorio	Tu clave API (pk_...)
`model-url`	Obligatorio	URL de tu archivo .glb
`api-url`	Opcional	Endpoint de la API (por defecto: producción)
`enable-shadows`	Opcional	Activar renderizado de sombras
`enable-ssao`	Opcional	Activar oclusión ambiental
`auto-rotate`	Opcional	Rotación automática del modelo
`tour-autoplay`	Opcional	Reproducir tour de cámara al cargar
`camera-mode`	Opcional	orbit o free (por defecto: orbit)

Eventos

Escucha los eventos del ciclo de vida del visor con addEventListener estándar.

const viewer = document.querySelector('glb-viewer');

// Visor inicializado, módulos cargados
viewer.addEventListener('viewer:ready', (e) => {
  console.log('Ready:', e.detail.availableModules);
});

// Modelo 3D cargado
viewer.addEventListener('model:loaded', (e) => {
  console.log('Model loaded:', e.detail.modelUrl);
});

// Error (clave inválida, dominio prohibido, etc.)
viewer.addEventListener('viewer:error', (e) => {
  console.error('Error:', e.detail.message);
});

API postMessage para iframe

Al incrustar el visor en un iframe, usa postMessage para la comunicación entre orígenes. El visor envía automáticamente un mensaje ready al inicializarse — no requiere polling.

Recibir estado ready

window.addEventListener('message', (event) => {
  const msg = event.data;
  if (msg?.type !== 'glb-viewer:ready') return;

  console.log('Zones:', msg.zones);
  console.log('Tour:', msg.tour);
  console.log('Animations:', msg.animations);
});

Enviar comandos

Colores

const iframe = document.querySelector('iframe');

iframe.contentWindow.postMessage(
  { type: 'glb-viewer:setColor', zoneId: 'body', hex: '#ff0000' }, '*'
);

iframe.contentWindow.postMessage(
  { type: 'glb-viewer:reset' }, '*'
);

Tour

iframe.contentWindow.postMessage({ type: 'glb-viewer:tour:play' }, '*');
iframe.contentWindow.postMessage({ type: 'glb-viewer:tour:stop' }, '*');
iframe.contentWindow.postMessage({ type: 'glb-viewer:tour:togglePause' }, '*');

// Request status → responds with:
// { type: 'glb-viewer:tour:status', isPlaying, isPaused, hasWaypoints }
iframe.contentWindow.postMessage({ type: 'glb-viewer:tour:status' }, '*');

Animaciones

// List all animations
iframe.contentWindow.postMessage({ type: 'glb-viewer:animations:list' }, '*');
// → { type: 'glb-viewer:animations:list', entries: [{ id, label }] }

iframe.contentWindow.postMessage({ type: 'glb-viewer:animations:play', id: 'open-door' }, '*');
iframe.contentWindow.postMessage({ type: 'glb-viewer:animations:stop', id: 'open-door' }, '*');
iframe.contentWindow.postMessage({ type: 'glb-viewer:animations:playAllLoop' }, '*');
iframe.contentWindow.postMessage({ type: 'glb-viewer:animations:stopAll' }, '*');

Cámara

iframe.contentWindow.postMessage(
  { type: 'glb-viewer:camera:setPosition', x: 0, y: 2, z: 5 }, '*'
);

iframe.contentWindow.postMessage(
  { type: 'glb-viewer:camera:setTarget', x: 0, y: 1, z: 0 }, '*'
);

iframe.contentWindow.postMessage(
  { type: 'glb-viewer:camera:setAutoRotate', enabled: true }, '*'
);

iframe.contentWindow.postMessage(
  { type: 'glb-viewer:camera:setMode', mode: 'orbit' }, '*'
);