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

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

Setting custom background image

The recommended way to set a custom background image for Reveal is to add the image as background to the DOM and then setting the clear alpha of the renderer to 0. See an example of this below.

Live Editor

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

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