Viewer and embeds

Install

<script async src="https://cdn.glboost.com/_/embed.js"></script>
<glboost-viewer asset="a1b2c3d4e5f6" ar poster="auto" style="height:480px"></glboost-viewer>

The element fills its container, so give the parent a height or an aspect ratio. Decoders for meshopt, Draco, and KTX2 load from the CDN on demand.

Attributes

asset

The asset id (required).

preset / spec

Which variant to load; default gpu. spec takes raw parameters such as tex=webp&maxtex=1024.

v

Pin a version.

exp, sig

Signature for private assets, minted by your server through POST /api/v1/assets/:id/sign.

poster

auto uses the poster captured in the dashboard; or any image URL.

ar

Show the AR button (WebXR, Scene Viewer, Quick Look).

auto-rotate, no-controls

Rotate slowly; disable orbit controls.

environment

neutral, studio, outdoor, a custom environment id, or an https URL.

no-settings, no-hotspots

Ignore the camera and lighting saved in the dashboard; hide hotspots.

variant

Select a KHR_materials_variants variant by name.

watermark

Force the GLBoost badge (Free plan embeds always show it).

alt

Accessible description.

JavaScript API

const el = document.querySelector('glboost-viewer');
await el.ready;
el.setCamera({ yaw: 30, pitch: 75, distance: 2.5, fov: 40 });
el.getCamera();                // { yaw, pitch, distance, fov }
el.recenter();
el.play('Idle', { speed: 1 }); el.pause(); el.animations;
el.setVariant('Red'); el.variants;
const png = await el.toBlob({ mimeType: 'image/png' });
el.pickPoint(clientX, clientY);   // { position, normal } on the surface, or null
el.setPins([{ id: 'c1', label: '1', position, normal }]);
el.reload();

Events

load

{ assetId, versionId, spec, loadMs } after the first successful load.

progress

Download progress from model-viewer.

camera-change

The current pose and its source.

hotspot-click

The hotspot that was clicked.

pin-click

{ id } for review pins set with setPins.

error

{ message } when the config or model fails to load.

iframe

<iframe src="https://glboost.com/e/a1b2c3d4e5f6?ar=1" allow="xr-spatial-tracking; fullscreen"
        style="width:100%;height:480px;border:0"></iframe>

Use the iframe on platforms that sandbox custom scripts. Query parameters mirror the attributes.

Private assets

Private assets return 403 without a valid signature. Your server mints one with the API (POST /api/v1/assets/:id/sign, up to 24 hours) and passes exp and sig to the element, or you send people to a share link instead.

React

A React wrapper (GLBoostViewer from @glboost/viewer/react) with the same props ships in the GLBoost repository and is what the dashboard uses; an npm package is planned. Until then the web component works from any React app through createElement('glboost-viewer', …).