Version: 3.x

Class: Cognite3DViewer

Constructors

constructor

• new Cognite3DViewer(options)

Parameters

Name	Type
`options`	`Cognite3DViewerOptions`

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:204

Accessors

cadBudget

• get cadBudget(): CadModelBudget

Gets the current budget for downloading geometry for CAD models. Note that this budget is shared between all added CAD models and not a per-model budget.

Returns

CadModelBudget

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:158

• set cadBudget(budget): void

Sets the current budget for downloading geometry for CAD models. Note that this budget is shared between all added CAD models and not a per-model budget.

Parameters

Name	Type
`budget`	`CadModelBudget`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:168

cameraManager

• get cameraManager(): CameraManager

Returns

CameraManager

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:498

domElement

• get domElement(): HTMLElement

The DOM element the viewer will insert its rendering canvas into. The DOM element can be specified in the options when the viewer is created. If not specified, the DOM element will be created automatically. The DOM element cannot be changed after the viewer has been created.

Returns

HTMLElement

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:96

models

• get models(): CogniteModelBase[]

Gets a list of models currently added to the viewer.

Returns

CogniteModelBase[]

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:193

pointCloudBudget

• get pointCloudBudget(): PointCloudBudget

Returns the point cloud budget. The budget is shared between all loaded point cloud models.

Returns

PointCloudBudget

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:178

• set pointCloudBudget(budget): void

Sets the point cloud budget. The budget is shared between all loaded point cloud models.

Parameters

Name	Type
`budget`	`PointCloudBudget`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:186

renderer

• get renderer(): WebGLRenderer

Returns the renderer used to produce images from 3D geometry.

Returns

WebGLRenderer

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:103

Methods

addCadModel

▸ addCadModel(options): Promise<Cognite3DModel>

Add a new CAD 3D model to the viewer. Call Cognite3DViewer.fitCameraToModel to see the model after the model has loaded.

example

const options = {
modelId:     'COGNITE_3D_MODEL_ID',
revisionId:  'COGNITE_3D_REVISION_ID',
};
viewer.addCadModel(options).then(model => {
viewer.fitCameraToModel(model, 0);
});

Parameters

Name	Type
`options`	`AddModelOptions`

Returns

Promise<Cognite3DModel>

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:594

addModel

▸ addModel(options): Promise<CognitePointCloudModel | Cognite3DModel>

Add a new model to the viewer. Call Cognite3DViewer.fitCameraToModel to see the model after the model has loaded.

example

const options = {
modelId:     'COGNITE_3D_MODEL_ID',
revisionId:  'COGNITE_3D_REVISION_ID',
};
viewer.addModel(options).then(model => {
viewer.fitCameraToModel(model, 0);
});

Parameters

Name	Type
`options`	`AddModelOptions`

Returns

Promise<CognitePointCloudModel | Cognite3DModel>

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:561

addObject3D

▸ addObject3D(object): void

Add a THREE.Object3D to the viewer.

example

const sphere = new THREE.Mesh(
new THREE.SphereBufferGeometry(),
new THREE.MeshBasicMaterial()
);
viewer.addObject3D(sphere);

Parameters

Name	Type
`object`	`Object3D`<`Event`>

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:734

addPointCloudModel

▸ addPointCloudModel(options): Promise<CognitePointCloudModel>

Add a new pointcloud 3D model to the viewer. Call Cognite3DViewer.fitCameraToModel to see the model after the model has loaded.

example

const options = {
modelId:     'COGNITE_3D_MODEL_ID',
revisionId:  'COGNITE_3D_REVISION_ID',
};
viewer.addPointCloudModel(options).then(model => {
viewer.fitCameraToModel(model, 0);
});

Parameters

Name	Type
`options`	`AddModelOptions`

Returns

Promise<CognitePointCloudModel>

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:622

determineModelType

▸ determineModelType(modelId, revisionId): Promise<"" | SupportedModelTypes>

Use to determine of which type the model is.

example

const viewer = new Cognite3DViewer(...);
const type = await viewer.determineModelType(options.modelId, options.revisionId)
let model: Cognite3DModel | CognitePointCloudModel
switch (type) {
  case 'cad':
    model = await viewer.addCadModel(options);
    break;
  case 'pointcloud':
    model = await viewer.addPointCloudModel(options);
    break;
  default:
    throw new Error('Model is not supported');
}
viewer.fitCameraToModel(model);

Parameters

Name	Type	Description
`modelId`	`number`	The model's id.
`revisionId`	`number`	The model's revision id.

Returns

Promise<"" | SupportedModelTypes>

Empty string if type is not supported.

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:701

dispose

▸ dispose(): void

Dispose of WebGL resources. Can be used to free up memory when the viewer is no longer in use.

see https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects

// Viewer is no longer in use, free up memory
viewer.dispose();
```.

#### Returns

`void`

#### Defined in

[packages/api/src/public/migration/Cognite3DViewer.ts:340](https://github.com/cognitedata/reveal/blob/71be00fcc/viewer/packages/api/src/public/migration/Cognite3DViewer.ts#L340)

___

### fitCameraToBoundingBox

▸ **fitCameraToBoundingBox**(`box`, `duration?`, `radiusFactor?`): `void`

Move camera to a place where the content of a bounding box is visible to the camera.

**`example`**
```js
// Fit camera to bounding box over 500 milliseconds
viewer.fitCameraToBoundingBox(boundingBox, 500);

// Fit camera to bounding box instantaneously
viewer.fitCameraToBoundingBox(boundingBox, 0);

// Place the camera closer to the bounding box
viewer.fitCameraToBoundingBox(boundingBox, 500, 2);

Parameters

Name	Type	Default value	Description
`box`	`Box3`	`undefined`	The bounding box in world space.
`duration?`	`number`	`undefined`	The duration of the animation moving the camera. Set this to 0 (zero) to disable animation.
`radiusFactor`	`number`	`2`	The ratio of the distance from camera to center of box and radius of the box.

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:902

fitCameraToModel

▸ fitCameraToModel(model, duration?): void

Move camera to a place where the 3D model is visible. It uses the bounding box of the 3D model and calls Cognite3DViewer.fitCameraToBoundingBox.

example

// Fit camera to model
viewer.fitCameraToModel(model);

// Fit camera to model over 500 milliseconds
viewer.fitCameraToModel(model, 500);

// Fit camera to model instantly
viewer.fitCameraToModel(model, 0);

Parameters

Name	Type	Description
`model`	`CogniteModelBase`	The 3D model.
`duration?`	`number`	The duration of the animation moving the camera. Set this to 0 (zero) to disable animation.

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:878

getCamera

▸ getCamera(): PerspectiveCamera

obvious

Returns

PerspectiveCamera

The THREE.Camera used for rendering.

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:828

getClippingPlanes

▸ getClippingPlanes(): Plane[]

Returns the current active clipping planes.

Returns

Plane[]

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:820

getIntersectionFromPixel

▸ getIntersectionFromPixel(offsetX, offsetY): Promise<Intersection>

Raycasting model(s) for finding where the ray intersects with the model.

see https://en.wikipedia.org/wiki/Ray_casting.

example For CAD model

const offsetX = 50 // pixels from the left
const offsetY = 100 // pixels from the top
const intersection = await viewer.getIntersectionFromPixel(offsetX, offsetY);
if (intersection) // it was a hit
  console.log(
  'You hit model ', intersection.model,
  ' at the node with tree index ', intersection.treeIndex,
  ' at this exact point ', intersection.point
  );

example For point cloud

const offsetX = 50 // pixels from the left
const offsetY = 100 // pixels from the top
const intersection = await viewer.getIntersectionFromPixel(offsetX, offsetY);
if (intersection) // it was a hit
  console.log(
  'You hit model ', intersection.model,
  ' at the point index ', intersection.pointIndex,
  ' at this exact point ', intersection.point
  );

Parameters

Name	Type	Description
`offsetX`	`number`	X coordinate in pixels (relative to the domElement).
`offsetY`	`number`	Y coordinate in pixels (relative to the domElement).

Returns

Promise<Intersection>

A promise that if there was an intersection then return the intersection object - otherwise it returns null if there were no intersections.

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:1047

▸ getIntersectionFromPixel(offsetX, offsetY, options): Promise<Intersection>

deprecated Since 3.1 options argument have no effect.

Parameters

Name	Type
`offsetX`	`number`
`offsetY`	`number`
`options`	`IntersectionFromPixelOptions`

Returns

Promise<Intersection>

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:1051

getScene

▸ getScene(): Scene

obvious

Returns

Scene

The THREE.Scene used for rendering.

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:836

getScreenshot

▸ getScreenshot(width?, height?): Promise<string>

Take screenshot from the current camera position.

example

// Take a screenshot with custom resolution
const url = await viewer.getScreenshot(1920, 1080);

// Add a screenshot with resolution of the canvas to the page
const url = await viewer.getScreenshot();
const image = document.createElement('img');
image.src = url;
document.body.appendChild(url);

Parameters

Name	Type	Description
`width`	`number`	Width of the final image. Default is current canvas size.
`height`	`number`	Height of the final image. Default is current canvas size.

Returns

Promise<string>

A Data URL of the image ('image/png').

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:989

getVersion

▸ getVersion(): string

Returns reveal version installed.

Returns

string

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:313

getViewState

▸ getViewState(): ViewerState

Gets the current viewer state which includes the camera pose as well as applied styling.

Returns

ViewerState

JSON object containing viewer state.

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:525

loadCameraFromModel

▸ loadCameraFromModel(model): void

Attempts to load the camera settings from the settings stored for the provided model. See https://docs.cognite.com/api/v1/#operation/get3DRevision and https://docs.cognite.com/api/v1/#operation/update3DRevisions for information on how this setting is retrieved and stored. This setting can also be changed through the 3D models management interface in Cognite Fusion. If no camera configuration is stored in CDF, Cognite3DViewer.fitCameraToModel is used as a fallback.

Parameters

Name	Type	Description
`model`	`CogniteModelBase`	The model to load camera settings from.

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:850

off

▸ off(event, callback): void

Remove event listener from the viewer. Call Cognite3DViewer.on to add event listener.

example

viewer.off('click', onClick);

Parameters

Name	Type
`event`	`"click"` \| `"hover"`
`callback`	`PointerEventDelegate`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:442

▸ off(event, callback): void

Remove event listener from the viewer. Call Cognite3DViewer.on to add event listener.

example

viewer.off('cameraChange', onCameraChange);

Parameters

Name	Type
`event`	`"cameraChange"`
`callback`	`CameraChangeDelegate`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:449

▸ off(event, callback): void

Remove event listener from the viewer. Call Cognite3DViewer.on to add event listener.

example

viewer.off('sceneRendered', updateStats);

Parameters

Name	Type
`event`	`"sceneRendered"`
`callback`	`SceneRenderedDelegate`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:456

▸ off(event, callback): void

Remove event listener from the viewer. Call Cognite3DViewer.on to add event listener.

example

viewer.off('disposed', clearAll);

Parameters

Name	Type
`event`	`"disposed"`
`callback`	`DisposedDelegate`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:463

on

▸ on(event, callback): void

Triggered when the viewer is disposed. Listeners should clean up any resources held and remove the reference to the viewer.

Parameters

Name	Type
`event`	`"disposed"`
`callback`	`DisposedDelegate`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:375

▸ on(event, callback): void

Add event listener to the viewer. Call Cognite3DViewer.off to remove an event listener.

example

const onClick = (event) => { console.log(event.offsetX, event.offsetY) };
viewer.on('click', onClick);

Parameters

Name	Type
`event`	`"click"` \| `"hover"`
`callback`	`PointerEventDelegate`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:384

▸ on(event, callback): void

Add event listener to the viewer. Call Cognite3DViewer.off to remove an event listener.

example

viewer.on('cameraChange', (position, target) => {
  console.log('Camera changed: ', position, target);
});

Parameters

Name	Type
`event`	`"cameraChange"`
`callback`	`CameraChangeDelegate`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:393

▸ on(event, callback): void

Event that is triggered immediatly after the scene has been rendered.

Parameters

Name	Type	Description
`event`	`"sceneRendered"`	Metadata about the rendering frame.
`callback`	`SceneRenderedDelegate`	Callback to trigger when the event occurs.

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:399

removeModel

▸ removeModel(model): void

Removes a model that was previously added using Cognite3DViewer.addModel, Cognite3DViewer.addCadModel or Cognite3DViewer.addPointCloudModel .

Parameters

Name	Type
`model`	`CogniteModelBase`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:643

removeObject3D

▸ removeObject3D(object): void

Remove a THREE.Object3D from the viewer.

example

const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(), new THREE.MeshBasicMaterial());
viewer.addObject3D(sphere);
viewer.removeObject3D(sphere);

Parameters

Name	Type
`object`	`Object3D`<`Event`>

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:755

requestRedraw

▸ requestRedraw(): void

Typically used when you perform some changes and can't see them unless you move camera.

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:909

setBackgroundColor

▸ setBackgroundColor(color): void

Sets the color used as the clear color of the renderer.

Parameters

Name	Type
`color`	`Color`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:772

setCameraManager

▸ setCameraManager(cameraManager, cameraStateUpdate?): void

Sets camera manager instance for current Cognite3Dviewer.

Parameters

Name	Type	Default value	Description
`cameraManager`	`CameraManager`	`undefined`	Camera manager instance.
`cameraStateUpdate`	`boolean`	`true`	Whether to set current camera state to new camera manager.

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:507

setClippingPlanes

▸ setClippingPlanes(clippingPlanes): void

Sets per-pixel clipping planes. Pixels behind any of the planes will be sliced away.

example

// Hide pixels with values less than 0 in the x direction
const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0);
viewer.setClippingPlanes([plane]);

// Hide pixels with values greater than 20 in the x direction
 const plane = new THREE.Plane(new THREE.Vector3(-1, 0, 0), 20);
viewer.setClippingPlanes([plane]);

// Hide pixels with values less than 0 in the x direction or greater than 0 in the y direction
const xPlane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0);
const yPlane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0);
viewer.setClippingPlanes([xPlane, yPlane]);

// Hide pixels behind an arbitrary, non axis-aligned plane
 const plane = new THREE.Plane(new THREE.Vector3(1.5, 20, -19), 20);
viewer.setClippingPlanes([plane]);

// Disable clipping planes
 viewer.setClippingPlanes([]);

Parameters

Name	Type	Description
`clippingPlanes`	`Plane`[]	The planes to use for clipping.

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:812

setLogLevel

▸ setLogLevel(level): void

Sets the log level. Used for debugging. Defaults to 'none' (which is identical to 'silent').

Parameters

Name	Type
`level`	`"error"` \| `"debug"` \| `"trace"` \| `"info"` \| `"warn"` \| `"silent"` \| `"none"`

Returns

void

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:322

setViewState

▸ setViewState(state): Promise<void>

Restores camera settings from the state provided, and clears all current styled node collections and applies the state object.

Parameters

Name	Type	Description
`state`	`ViewerState`	Viewer state retrieved from Cognite3DViewer.getViewState.

Returns

Promise<void>

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:535

worldToScreen

▸ worldToScreen(point, normalize?): Vector2

Convert a point in world space to its coordinates in the canvas. This can be used to place HTML objects near 3D objects on top of the 3D viewer.

see https://www.w3schools.com/graphics/canvas_coordinates.asp.

example

const boundingBoxCenter = new THREE.Vector3();
// Find center of bounding box in world space
model.getBoundingBox(nodeId).getCenter(boundingBoxCenter);
// Screen coordinates of that point
const screenCoordinates = viewer.worldToScreen(boundingBoxCenter);

const boundingBoxCenter = new THREE.Vector3();
// Find center of bounding box in world space
model.getBoundingBox(nodeId).getCenter(boundingBoxCenter);
// Screen coordinates of that point normalized in the range [0,1]
const screenCoordinates = viewer.worldToScreen(boundingBoxCenter, true);

const boundingBoxCenter = new THREE.Vector3();
// Find center of bounding box in world space
model.getBoundingBox(nodeId).getCenter(boundingBoxCenter);
// Screen coordinates of that point
const screenCoordinates = viewer.worldToScreen(boundingBoxCenter);
if (screenCoordinates == null) {
  // Object not visible on screen
} else {
  // Object is visible on screen
}

Parameters

Name	Type	Description
`point`	`Vector3`	World space coordinate.
`normalize?`	`boolean`	Optional. If true, coordinates are normalized into [0,1]. If false, the values are in the range [0, <canvas_size>).

Returns

Vector2

Returns 2D coordinates if the point is visible on screen, or null if object is outside screen.

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:947

isBrowserSupported

▸ Static isBrowserSupported(): true

For now it just always returns true.

see Https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#Browser_compatibility.

Returns

true

Defined in

packages/api/src/public/migration/Cognite3DViewer.ts:86

Constructors​

constructor​

Parameters​

Defined in​

Accessors​

cadBudget​

Returns​

Defined in​

Parameters​

Returns​

Defined in​

cameraManager​

Returns​

Defined in​

domElement​

Returns​

Defined in​

models​

Returns​

Defined in​

pointCloudBudget​

Returns​

Defined in​

Parameters​

Returns​

Defined in​

renderer​

Returns​

Defined in​

Methods​

addCadModel​

Parameters​

Returns​

Defined in​

addModel​

Parameters​

Returns​

Defined in​

addObject3D​

Parameters​

Returns​

Defined in​

addPointCloudModel​

Parameters​

Returns​

Defined in​

determineModelType​

Parameters​

Returns​

Defined in​

dispose​

Parameters​

Returns​

Defined in​

fitCameraToModel​

Parameters​

Returns​

Defined in​

getCamera​

Returns​

Defined in​

getClippingPlanes​

Returns​

Defined in​

getIntersectionFromPixel​

Parameters​

Returns​

Defined in​

Parameters​

Returns​

Defined in​

getScene​

Returns​

Defined in​

getScreenshot​

Parameters​

Returns​

Defined in​

getVersion​

Returns​

Constructors

constructor

Parameters

Defined in

Accessors

cadBudget

Returns

Defined in

Parameters

Returns

Defined in

cameraManager

Returns

Defined in

domElement

Returns

Defined in

models

Returns

Defined in

pointCloudBudget

Returns

Defined in

Parameters

Returns

Defined in

renderer

Returns

Defined in

Methods

addCadModel

Parameters

Returns

Defined in

addModel

Parameters

Returns

Defined in

addObject3D

Parameters

Returns

Defined in

addPointCloudModel

Parameters

Returns

Defined in

determineModelType

Parameters

Returns

Defined in

dispose

Parameters

Returns

Defined in

fitCameraToModel

Parameters

Returns

Defined in

getCamera

Returns

Defined in

getClippingPlanes

Returns

Defined in

getIntersectionFromPixel

Parameters

Returns

Defined in

Parameters

Returns

Defined in

getScene

Returns

Defined in

getScreenshot

Parameters

Returns

Defined in

getVersion

Returns