@glboost/react

The GLBoost 3D viewer as a React component. It renders <glboost-viewer> (model-viewer under the hood, with GLBoost's presets, LOD, AR, hotspots, variants, measurement, and review pins) and loads embed.js from the CDN once per page.

npm install @glboost/react

import { GLBoostViewer } from '@glboost/react';

export function Product({ assetId }: { assetId: string }) {
  return (
    <GLBoostViewer
      asset={assetId}
      preset="auto"
      ar
      autoRotate
      style={{ width: '100%', height: 480 }}
      onLoad={({ spec, loadMs }) => console.log(spec, loadMs)}
    />
  );
}

Attributes are props in camelCase (variantPicker, measureUnits, noControls), events are callbacks (onLoad, onHotspotClick, onCameraChange, onVariantChange, onMeasureChange, onLodChange, onPinClick, onError), pins renders review pins, and a ref gives the element's JavaScript API (GLBoostViewerElement: getCamera, setCamera, play, setVariant, startMeasure, pickPoint, …).

Docs: https://glboost.com/docs/viewer