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) {
let isMounted = true;
const outputsUrl = `${client.getBaseUrl()}/api/v1/projects/${client.project}/3d/models/${modelId}/revisions/${revisionId}/outputs`;
const params = { params: { format: 'preview-glb' } };
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([0].blobId);
if (isMounted) {
return () => {
isMounted = false;
}, [client]);
if (!previewUrl) {
return <div />;
return (
alt={'3D preview of model ' + modelId + ', revision ' + revisionId}

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


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.