Loading CAD models

Cognite3DViewer is a component that eases the migration from @cognite/3d-viewer. It has mostly the same API and could be used when you don't need to control the scene or render loop, i.e., just want to view some 3d models from CDF.

import { CogniteClient } from '@cognite/sdk';

import { Cognite3DViewer } from '@cognite/reveal';

const loginManager = new LoginManager('publicdata', 'api');

const client = new CogniteClient({

appId: 'myCadAppId',

project: loginManager.project,

getToken: async () => loginManager.getToken()

});

await client.authenticate();

// some div in your html page for Cognite3DViewer to insert a canvas

const domElement = document.getElementById('canvas-wrapper');

async function main() {

const viewer = new Cognite3DViewer({ sdk: client, domElement });

// load a model and add it on 3d scene

// https://console.cognitedata.com/publicdata/3d-models/4715379429968321/revisions/5688854005909501

const model = await viewer.addModel({

modelId: 3356984403684032,

revisionId: 6664823881595566,

});

viewer.loadCameraFromModel(model);

// call viewer.dispose() when you don't need the viewer anymore

}

main();

CogniteClient version 6 and later requires a getToken function for authentication. For this documentation we have made a class called LoginManager that handles this. To access the publicdata project used in the examples in this documentation, you may use the LoginManager class yourself. Note that accessing data in other projects may require different authentication flows not supported by the LoginManager. You can read more about different types of authentication flows in the CogniteClient documentation.

Models can be temporarily hidden using Cognite3DModel.visible. Note that the viewer must be explicitly re-rendered after setting the visibility flag:

Live Editor

model.visible = false; viewer.requestRedraw(); setTimeout(() => { model.visible = true; viewer.requestRedraw(); }, 5000);

model.visible = false;
viewer.requestRedraw();

setTimeout(() => {
  model.visible = true;
  viewer.requestRedraw();
}, 5000);

Hiding models doesn't free any memory occupied by the model and should only be used to temporarily hide a model when it's expected that it will shortly be shown again.

To also reclaim memory and permanently unloading the model, use Cognite3DViewer.removeModel():

Live Editor

viewer.removeModel(model)

viewer.removeModel(model)

Only loading a part of the model

In some cases, it might be useful to restrict the area for which geometry is loaded to only show a partial view. This can be done using a geometryFilter which allows only loading geometry within a provided box:

Live Editor

viewer.models.forEach(x => viewer.removeModel(x)); async function addFilteredModel() { const model = await viewer.addModel({ modelId: 3356984403684032, revisionId: 6664823881595566, geometryFilter: { // Only load geometry inside a box around origin with 50x50 horizontal extent and 10 vertical extent. boundingBox: new THREE.Box3(new THREE.Vector3(75, 50, 49), new THREE.Vector3(125, 100, 59)) } }); viewer.fitCameraToModel(model); } addFilteredModel();

viewer.models.forEach(x => viewer.removeModel(x));

async function addFilteredModel() {
  const model = await viewer.addModel({
    modelId: 3356984403684032,
    revisionId: 6664823881595566,
    geometryFilter: {
      // Only load geometry inside a box around origin with 50x50 horizontal extent and 10 vertical extent.
      boundingBox: new THREE.Box3(new THREE.Vector3(75, 50, 49), new THREE.Vector3(125, 100, 59))
    }
  });
  viewer.fitCameraToModel(model);
}
addFilteredModel();

By default, the bounds provided must be in "CDF coordinates". This is e.g. suitable if you are retrieving coordinates directly from the Nodes API to for instance show the area around a given node. If the coordinates are in "Reveal coordinates" (i.e. in the WebGL coordinate system) the geometryFilter can be set up using isBoundingBoxInModelCoordinates:

Live Editor

viewer.models.forEach(x => viewer.removeModel(x)); async function addFilteredModel() { const model = await viewer.addModel({ modelId: 3356984403684032, revisionId: 6664823881595566, geometryFilter: { // Only load geometry inside a box around origin with 50x50 horizontal extent and 10 vertical extent. boundingBox: new THREE.Box3(new THREE.Vector3(75, 49, -100), new THREE.Vector3(125, 59, -50)), // Instruct Reveal that the coordinates already are relative to the coordinates of the model isBoundingBoxInModelCoordinates: true } }); viewer.fitCameraToModel(model); } addFilteredModel();

viewer.models.forEach(x => viewer.removeModel(x));

async function addFilteredModel() {
  const model = await viewer.addModel({
    modelId: 3356984403684032,
    revisionId: 6664823881595566,
    geometryFilter: {
      // Only load geometry inside a box around origin with 50x50 horizontal extent and 10 vertical extent.
      boundingBox: new THREE.Box3(new THREE.Vector3(75, 49, -100), new THREE.Vector3(125, 59, -50)),
      // Instruct Reveal that the coordinates already are relative to the coordinates of the model
      isBoundingBoxInModelCoordinates: true
    }
  });
  viewer.fitCameraToModel(model);
}
addFilteredModel();