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://publicdata.fusion.cognite.com/publicdata/3d-models/3356984403684032/revisions/6664823881595566
  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 CogniteCadModel.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

Default CDF transformation

On loading a model revision, Reveal automatically retrieves and applies the transformation stored in CDF for that revision. The transformation is composed of the translation, rotation and scale fields in the revision data, which may be set using the CDF Rest API. The transformation is applied to every vertex/point in the input data; each vertex position is first scaled, then rotated, and finally translated.

The rotation component is specified as an array of three floating point numbers. The elements are the rotation angles in radians around the X, Y and Z axes respectively. The vertices are first rotated around its X axis, then its Y axis (which has potentially been rotated by the first rotation), then its Z axis (which may have been rotated by the other two).

Aftewards, the model is transformed from CDF coordinates to Reveal coordinates. Since the default CDF transformation described above is applied before the CDF-to-Reveal coordinate transformation, it happens in CDF space.

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 make the background color transparent by applying an alpha value of 0. See an example of this below.

Live Editor

Creating screenshots

Use getScreenshot to create a screenshot from the current camera position. By default the resolution of the image is set to match the size of the render canvas, but a custom resolution can be provided. Whether or not to include UI in the screenshot can also be specified. When drawing UI, only the viewer DOM element and its children will be included in the image. The DOM is scaled to fit any provided resolution, and as a result some elements can be positioned incorrectly in regards to the 3D render.

Note that html2canvas is used to draw UI and this has some limitations on what CSS properties it is able to render. For details see the html2canvas documentation.

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