@cognite/3d-viewer

3D Viewer

This is the repository for the Cognite 3D Viewer. Currently this will also contain the documentation for the Cognite3DViewer.

3D Viewer Usage

For developers using the 3d-viewer, this will be the most important part of the documentation. Please follow the steps below to get development started

Setup

There are two ways of setting up the repo. If you have access to the currently internal npm repository, then you can include it as if a node_modules (import { Cognite3DViewer } from 'cognite';). Otherwise, follow the below guide.

• The packaged viewer module will contain two files in the dist/ folder for usage, make sure you use dist/cognite.bundle.js if you want to include this directly into your application, whether it is via html or js file.
  • <script> tag:

    <script src="./cognite.bundle.js"></script> // Now you have 'cognite' as a global object
    ...
    <script>
    var viewer = new cognite.Cognite3DViewer({
      ...
    });
    // now you can use Viewer however you like!
    </script>
    

  • ES2015 modules:

    import { Cognite3DViewer } from './link/to/dist/cognite.bundle.js';
    ...
    const viewer = new Cognite3DViewer({
      ...
    });
    

Api

Constructor

To create a Cognite3DViewer object, the constructor takes in an object, which can have the following options:

var viewer = new Cognite3DViewer({
  noBackground: boolean,    // optional. If the background should be transparent or not
  antialias: boolean,       // optional. Enable anitalias on rendering (avoid sharp edges). Will have negative performance impact on big 3D models.
});

After the viewer is constructed, it will have a canvas variable that is accessible. This would need to be appended into any DOM like below:

document.getElementById("app").appendChild(viewer.canvas);

Note: you may need additional styling to make the canvas fit the width, in the example above, the styling could be

#app {
  position: relative;
  width: 100vw;
  height: 400px;
}

#app > canvas {
  width: 100%;
  height: 100%;
}

After that is added, you should be good to go! use viewer.start() to begin rendering.

Development Usage

Build

You will need yarn (npm install -g yarn). Run yarn to install packages. Run yarn run start to run.

Building the library

• run npm publish, make sure you have bumped the version first!

How does this work?

Look at src/index.js for more info Link