Reveal viewer

Code Example

import { Cognite3DViewer } from "@cognite/reveal";
import { CogniteClient } from "@cognite/sdk";

const appId = "com.cognite.reveal.example";
const client = new CogniteClient({ appId });

client.loginWithOAuth({ project: "publicdata" });

const viewer = new Cognite3DViewer({
  sdk: client,
  domElement: document.querySelector("#your-element-for-viewer")
});
viewer.addModel({ modelId: 4715379429968321, revisionId: 5688854005909501 });

Installation

npm install @cognite/reveal

Expose all `.worker.js` and `.wasm` files from `@cognite/reveal`

This library uses web-workers and web-assembly, but it's tricky to bundle them into npm-package.

That's why you will have to make sure that all *.worker.js and *.wasm files from @cognite/reveal are copied to your project's output folder.

Create react app

Install react-app-rewired. It's required to slightly modify react-scripts from create-react-app without running eject
```
npm install react-app-rewired --save-dev
```

'Flip' the existing calls to react-scripts in npm scripts for start, build and test

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

Install copy-webpack-plugin

 npm install copy-webpack-plugin --save-dev

Create a config-overrides.js file in the root directory with the following content

const CopyWebpackPlugin = require('copy-webpack-plugin');

const revealSource = 'node_modules/@cognite/reveal';

module.exports = function override(config) {
  if (!config.plugins) {
    // eslint-disable-next-line no-param-reassign
    config.plugins = [];
  }

  // that's for 6.x version of webpack-copy-plugin
  // if you use 5.x just put content of patterns into constructor
  // new CopyWebpackPlugin([ /* { from, to } */ ])
  config.plugins.push(
    new CopyWebpackPlugin({
      patterns: [
        {
          from: `${revealSource}/**/*.worker.js`,
          to: '.',
          flatten: true,
        },
        {
          from: `${revealSource}/**/*.wasm`,
          to: '.',
          flatten: true,
        },
      ],
    })
  );

  return config;
};

In your index.html file add base location for relative URLs:
```
<head>
   <base href="/" /> 
```

Now all *.worker.js and *.wasm files from @cognite/reveal should be copied into your output folder when you run build.

Non create-react-app based projects

Just make sure that you have *.worker.js and *.wasm files from @cognite/reveal in your output folder. If you use webpack, you might want to add copy-webpack-plugin@^5.1.1 in your webpack.config.js

// webpack.config.js
const revealSource = 'node_modules/@cognite/reveal';

{
  /* ... */
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: `${revealSource}/**/*.worker.js`,
          to: '.',
          flatten: true,
        },
        {
          from: `${revealSource}/**/*.wasm`,
          to: '.',
          flatten: true,
        },
      ],
    })
  ]
}

Make sure your server sends `*.wasm` files with `Content-type: application/wasm` header.

Sometimes servers don't have correct MIME type set for wasm files. In that case you might notice this message in a browser console when it fetches a .wasm file:

Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

In that case you need to configure your server to set the Content-type: application/wasm header for *.wasm files. If you use the nginx add types in the config or edit the mime.types file.

types {
    application/wasm wasm;
}

Coordinate systems

The data served from Cognite Data Fusion is in a right-handed coordinate system with Z up, X to the right and Y pointing into the screen.

In Three.js, which is supported by the Reveal viewer, the coordinate system is right-handed with Y up, X to the right and Z pointing out of the screen.

Conversion between the different coordinate systems

The policy in this repository is to stick with the CDF coordinate system in any code that is not viewer-specific. For viewer-specific code, the conversion should happen as early as possible.

API Reference

The API mostly matches the API of the previous Reveal viewer that can be found at @cognite/3d-viewer. See the API refernece for details.

Cognite3DViewer

Cognite 3D Models

determineModelType(_modelId: number, revisionId: number): Promise<SupportedModelTypes>;
Determine the type of the model added, CAD or PointCloud

addModel(options: AddModelOptions): Promise<Cognite3DModel>;
Add a CAD model to the viewer

addPointCloudModel(options: AddModelOptions): Promise<CognitePointCloudModel>;
Add a PointCloud model to the viewer

Custom 3D Models

addObject3D(_object: THREE.Object3D): void;
Add a custom THREE Model to the viewer

removeObject3D(_object: THREE.Object3D): void;
Remove a custom THREE Model from the viewer

Events

on(event: 'click' | 'hover', _callback: PointerEventDelegate): void;
Add a click or hover mouse event callback

on(event: 'cameraChange', _callback: CameraChangeDelegate): void;
Add a camera changed event callback

off(event: 'click' | 'hover', _callback: (event: PointerEvent) => void): void;
Remove a click or hover mouse event callback

off(event: 'cameraChange', _callback: (position: THREE.Vector3, target: THREE.Vector3) => void): void;
Remove a camera changed event callback

Camera

enableKeyboardNavigation(): void;
Enables camera navigation with the keyboard
W: Zoom in A: Pan Left S: Zoom out D: Pan Right E: Pan Upwards? Q: Pan Downwards?

disableKeyboardNavigation(): void;
Disables camera navigation with the keyboard

getCameraPosition(): THREE.Vector3;
Get the camera position.

setCameraPosition(position: THREE.Vector3): void;
Set the camera position.

getCameraTarget(): THREE.Vector3;
Get thecamera pivot point.

setCameraTarget(target: THREE.Vector3): void;
Set the camera pivot point and focal point.

fitCameraToModel(model: CogniteModelBase, duration?: number): void;
Change camera parameters to fit the view to show an overview of the model provided.

fitCameraToBoundingBox(box: THREE.Box3, duration?: number, radiusFactor?: number): void;
Change camera parameters to fit the bounding box provided in the view.

Utilities

setSlicingPlanes(slicingPlanes: THREE.Plane[]): void;
Set the slicing planes for visibility culling.

worldToScreen(_point: THREE.Vector3, _normalize?: boolean): THREE.Vector2 | null;
Transform a 3D position in the viewer into a 2D position on screen

getScreenshot(_width?: number, _height?: number): Promise<string>;
Create a screenshot of the input of the current model

getIntersectionFromPixel(offsetX: number, offsetY: number, _cognite3DModel?: Cognite3DModel): null | Intersection;
Get intersection data from a 2D screen position.

Cleanup

dispose(): void;
Dispose of references held by the viewer

clearCache(): void;
@Not Supported

Cognite3DModel

Read-only Parameters

type: SupportedModelTypes;
Always retuns 'cad'.

Hints

renderHints(): CadRenderHints;
Get the render hints of a model

renderHints(hints: CadRenderHints): void;
Set the render hints of a model

loadingHints(): CadLoadingHints;
Get the loading hints of a model

renderHints(hints: CadLoadingHints): void;
Set the loading hints of a model

Bounding Box

getBoundingBox(nodeId?: number, box?: THREE.Box3): THREE.Box3;
Get the bounding of the entire model, bounding box of node is not supported, use getBoundingBoxFromCdf()

async getBoundingBoxFromCdf(nodeId: number, box?: THREE.Box3): Promise<THREE.Box3>;
Get the bounding box of a node.

getModelBoundingBox(): THREE.Box3;
Get the bounding box of the entire model.

Visibility

async showNode(nodeId: number): Promise<void>;
Make a node visible.

async hideNode(nodeId: number, makeGray?: boolean): Promise<void>;
Make a node invisible.

showAllNodes(): void;
Make all nodes visisble.

hideAllNodes(makeGray?: boolean): void;
Make all nodes invisible.

Color

async getNodeColor(nodeId: number): Promise<Color>;
Get the color of a node.

async setNodeColor(nodeId: number, r: number, g: number, b: number): Promise<void>;
Set the color of a node.

async resetNodeColor(nodeId: number): Promise<void>;
Reset the color of a node.

Selection

selectNode(_nodeId: number): void;
Select a node.

deselectNode(_nodeId: number): void;
Deselect a node.

deselectAllNodes(): void;
Deselect all nodes.

Utilities

tryGetNodeId(treeIndex: number): number | undefined;
Get id of node through treeIndex

getSubtreeNodeIds(_nodeId: number, _subtreeSize?: number): Promise<number[]>;
Get node ids of children of a node.

iterateNodes(_action: (nodeId: number, treeIndex?: number) => void): void;
Iterate through the nodes.

iterateSubtree(_nodeId: number, _action: (nodeId: number, treeIndex?: number) => void, _treeIndex?: number, _subtreeSize?: number): Promise<boolean>;
@Not supported

Cleanup

dispose(): void;

CognitePointCloudModel

Read-only Parameters

type: SupportedModelTypes;
Always retuns 'pointcloud'.

Hints

pointBudget(): number;
Get the maximum number of points to load and visualize.

pointBudget(count: number): void;
Sets the maximum number of points to load.

Bounding Box

getModelBoundingBox(): THREE.Box3;
Returns the full bounding box for the point cloud.

Cleanup

dispose(): void;

Current Tags

0.0.12 ... latest (5 months ago)

Reveal viewer

Code Example

Installation

Expose all *.worker.js and *.wasm files from @cognite/reveal

Create react app

Non create-react-app based projects

Make sure your server sends *.wasm files with Content-type: application/wasm header.

Coordinate systems

Conversion between the different coordinate systems

API Reference

Cognite3DViewer

Cognite3DModel

CognitePointCloudModel

Current Tags

13 Versions

Expose all `.worker.js` and `.wasm` files from `@cognite/reveal`

Make sure your server sends `*.wasm` files with `Content-type: application/wasm` header.