Документация для разработчиков

Всё, что нужно для интеграции 3D-вьювера на ваш сайт.

Быстрый старт

Подключите скрипт вьювера:

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

Разместите вьювер на странице:

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

Готово — ваш 3D-вьювер работает.

Атрибуты веб-компонента

Attribute		Description
`api-key`	Обязательный	Ваш API-ключ (pk_...)
`model-url`	Обязательный	URL вашего .glb файла модели
`api-url`	Опционально	Адрес API (по умолчанию: продакшн)
`enable-shadows`	Опционально	Включить рендеринг теней
`enable-ssao`	Опционально	Включить ambient occlusion
`auto-rotate`	Опционально	Автоматическое вращение модели
`tour-autoplay`	Опционально	Автозапуск камера-тура при загрузке
`camera-mode`	Опционально	orbit или free (по умолчанию: orbit)

События

Слушайте события жизненного цикла вьювера через стандартный addEventListener.

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

// Вьювер инициализирован, модули загружены
viewer.addEventListener('viewer:ready', (e) => {
  console.log('Ready:', e.detail.availableModules);
});

// 3D-модель загружена
viewer.addEventListener('model:loaded', (e) => {
  console.log('Model loaded:', e.detail.modelUrl);
});

// Ошибка (неверный ключ, домен запрещён и т.д.)
viewer.addEventListener('viewer:error', (e) => {
  console.error('Error:', e.detail.message);
});

Iframe postMessage API

При встраивании вьювера в iframe используйте postMessage для кросс-доменного взаимодействия. Вьювер автоматически отправляет сообщение ready при инициализации — опрос не нужен.

Получение состояния 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);
});

Отправка команд

Цвета

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

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

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

Тур

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' }, '*');

Анимации

// 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' }, '*');

Камера

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' }, '*'
);