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.