WebGL based 3D viewer for CAD and point clouds processed in Cognite CDF.
Last updated 5 months ago by maksim.nesterenko .
Apache-2.0 · Repository · Original npm · Tarball · package.json
$ cnpm install mn-reveal-worker-test 
SYNC missed versions from official npm registry.

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 });


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

  1. 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
  2. '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"
  3. Install copy-webpack-plugin

     npm install copy-webpack-plugin --save-dev
  4. 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 } */ ])
        new CopyWebpackPlugin({
          patterns: [
              from: `${revealSource}/**/*.worker.js`,
              to: '.',
              flatten: true,
              from: `${revealSource}/**/*.wasm`,
              to: '.',
              flatten: true,
      return config;
  5. In your index.html file add base location for relative URLs:

       <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.


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


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


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.


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.


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

clearCache(): void;
@Not Supported


Read-only Parameters

type: SupportedModelTypes;
Always retuns 'cad'.


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.


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.


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.


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

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

deselectAllNodes(): void;
Deselect all nodes.


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


dispose(): void;


Read-only Parameters

type: SupportedModelTypes;
Always retuns 'pointcloud'.


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.


dispose(): void;

Current Tags

  • 0.0.12                                ...           latest (5 months ago)

13 Versions

  • 0.0.12                                ...           5 months ago
  • 0.0.11                                ...           6 months ago
  • 0.0.10                                ...           6 months ago
  • 0.0.9                                ...           6 months ago
  • 0.0.8                                ...           6 months ago
  • 0.0.7                                ...           6 months ago
  • 0.0.6                                ...           6 months ago
  • 0.0.5                                ...           6 months ago
  • 0.0.4                                ...           6 months ago
  • 0.0.3                                ...           6 months ago
  • 0.0.2                                ...           6 months ago
  • 0.0.1                                ...           6 months ago
  • 1.0.0-alpha-5                                ...           6 months ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (11)
Dev Dependencies (39)
Dependents (0)

Copyright 2014 - 2016 © |