Version: 3.x

glTF preview models

When ingesting CAD models to Cognite Data Fusion (CDF) a small preview version is generated and stored in the GLTF format (more specifically the GLB-format). This is stored as a separate output type in CDF called preview-glb. <model-viewer> can be used to visualize this model, but this component doesn't support authentication. To circumvent this issue we generate a data URL containing binary data.

Below is the code for a wrapper around <model-viewer> which performs authentication and generates a data URL given a model ID for a revision ID and project.

export default function ModelViewer({ client, modelId, revisionId }) {
  const [previewUrl, setPreviewUrl] = React.useState(undefined);
  useEffect(() => {
    if (!client) {
      return;
    }
    let isMounted = true;
    const outputsUrl = `${client.getBaseUrl()}/api/v1/projects/${client.project}/3d/models/${modelId}/revisions/${revisionId}/outputs`;
    const params = { params: { format: 'preview-glb' } };
    getPreviewUrl();

    async function getPreviewUrl() {
      const response = await client.get(outputsUrl, params);

      // Need to first request the file then convert to a data url because we cannot
      // set the headers for the model-viewer requests so there is no authentication
      const data = await client.files3D.retrieve(response.data.items[0].blobId);
      if (isMounted) {
        setPreviewUrl(makeDataUrl(data));
      }
    }

    return () => {
      isMounted = false;
    };
  }, [client]);

  if (!previewUrl) {
    return <div />;
  }

  return (
    <model-viewer
      camera-controls
      auto-rotate
      interaction-prompt="when-focused"
      alt={'3D preview of model ' + modelId + ', revision ' + revisionId}
      src={previewUrl}
    ></model-viewer>
  );
}

This component can be used given a CogniteClient that's authenticated with CDF, a model ID and a revision ID:

<ModelViewer
  modelId={4715379429968321}
  revisionId={5688854005909501}
  client={cdfClient}
/>

Cognite's 3D optimizer now outputs a small GLB file (the binary file format of the gLTF specification) that can be used as a preview for telling models apart.