@cognite/reveal 2.2.2 → 2.3.0

package/core/src/public/migration/Cognite3DViewer.d.ts

@@ -1,611 +1,566 @@
-/*!
- * Copyright 2021 Cognite AS
- */
-import * as THREE from 'three';
-import { AddModelOptions, Cognite3DViewerOptions, Intersection, CameraChangeDelegate, PointerEventDelegate, CadModelBudget, PointCloudBudget, CameraControlsOptions } from './types';
-import { CogniteModelBase } from './CogniteModelBase';
-import { Cognite3DModel } from './Cognite3DModel';
-import { CognitePointCloudModel } from './CognitePointCloudModel';
-import { DisposedDelegate, SceneRenderedDelegate } from '../types';
-import { SupportedModelTypes } from '../../datamodels/base';
-import { IntersectionFromPixelOptions } from '../..';
-import { ViewerState } from '../../utilities/ViewStateHelper';
-import ComboControls from '../../../../packages/camera-manager';
-/**
- * @example
- * ```js
- * const viewer = new Cognite3DViewer({
- *   noBackground: true,
- *   sdk: CogniteClient({...})
- * });
- * ```
- * @module @cognite/reveal
- */
-export declare class Cognite3DViewer {
-    private get canvas();
-    /**
-     * For now it just always returns true.
-     * @see Https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#Browser_compatibility.
-     */
-    static isBrowserSupported(): true;
-    /**
-     * 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.
-     */
-    get domElement(): HTMLElement;
-    /**
-     * Returns the renderer used to produce images from 3D geometry.
-     */
-    get renderer(): THREE.WebGLRenderer;
-    private readonly _cdfSdkClient;
-    private readonly _dataSource;
-    private readonly camera;
-    private readonly scene;
-    private readonly controls;
-    private readonly _subscription;
-    private readonly _revealManagerHelper;
-    private readonly _domElement;
-    private readonly _renderer;
-    private readonly _boundAnimate;
-    private _onClick;
-    private _onWheel;
-    private readonly _events;
-    private _cameraControlsOptions;
-    private readonly _models;
-    private readonly _extraObjects;
-    private readonly _automaticNearFarPlane;
-    private readonly _automaticControlsSensitivity;
-    private readonly _animationDuration;
-    private readonly _minDefaultAnimationDuration;
-    private readonly _maxDefaultAnimationDuration;
-    private readonly _minDistanceDefault;
-    private readonly raycaster;
-    private isDisposed;
-    private readonly renderController;
-    private latestRequestId;
-    private readonly clock;
-    private _clippingNeedsUpdate;
-    private readonly spinner;
-    private get revealManager();
-    /**
-     * Reusable buffers used by functions in Cognite3dViewer to avoid allocations.
-     */
-    private readonly _updateNearAndFarPlaneBuffers;
-    /**
-     * Convert pixel coordinates of the cursor to [-1,1]^2 coordinates.
-     * @param pixelX
-     * @param pixelY
-     */
-    private convertPixelCoordinatesToNormalized;
-    /**
-     * Calculates new target when raycaster doesn't have any intersections with the model.
-     * @param cursorPosition Cursor position for desired calculations.
-     * @param cursorPosition.x
-     * @param cursorPosition.y
-     */
-    private calculateMissedRaycast;
-    /**
-     * Removes controls event listeners if they are defined.
-     */
-    private teardownControls;
-    /**
-     * Method for setting up camera controls listeners and values inside current controls class.
-     */
-    private setupControls;
-    /**
-     * Changes controls target based on current cursor position.
-     * @param event MouseEvent that contains pointer location data.
-     */
-    private changeTarget;
-    /**
-     * Changes controls scroll target based on current cursor position.
-     * @param event MouseEvent that contains pointer location data.
-     */
-    private changeScrollTarget;
-    /**
-     * 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.
-     */
-    get cadBudget(): CadModelBudget;
-    /**
-     * 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.
-     */
-    set cadBudget(budget: CadModelBudget);
-    /**
-     * Returns the point cloud budget. The budget is shared between all loaded
-     * point cloud models.
-     */
-    get pointCloudBudget(): PointCloudBudget;
-    /**
-     * Sets the point cloud budget. The budget is shared between all loaded
-     * point cloud models.
-     */
-    set pointCloudBudget(budget: PointCloudBudget);
-    /**
-     * Gets a list of models currently added to the viewer.
-     */
-    get models(): CogniteModelBase[];
-    constructor(options: Cognite3DViewerOptions);
-    /**
-     * Returns reveal version installed.
-     */
-    getVersion(): string;
-    /**
-     * Sets the log level. Used for debugging.
-     * Defaults to 'none' (which is identical to 'silent').
-     * @param level
-     */
-    setLogLevel(level: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | 'none'): void;
-    /**
-     * Dispose of WebGL resources. Can be used to free up memory when the viewer is no longer in use.
-     * @see {@link https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects}
-     * ```ts
-     * // Viewer is no longer in use, free up memory
-     * viewer.dispose();
-     * ```.
-     */
-    dispose(): void;
-    /**
-     * Triggered when the viewer is disposed. Listeners should clean up any
-     * resources held and remove the reference to the viewer.
-     */
-    on(event: 'disposed', callback: DisposedDelegate): void;
-    /**
-     * @example
-     * ```js
-     * const onClick = (event) => { console.log(event.offsetX, event.offsetY) };
-     * viewer.on('click', onClick);
-     * ```
-     */
-    on(event: 'click' | 'hover', callback: PointerEventDelegate): void;
-    /**
-     * @example
-     * ```js
-     * viewer.on('cameraChange', (position, target) => {
-     *   console.log('Camera changed: ', position, target);
-     * });
-     * ```
-     */
-    on(event: 'cameraChange', callback: CameraChangeDelegate): void;
-    /**
-     * Event that is triggered immediatly after the scene has been rendered.
-     * @param event Metadata about the rendering frame.
-     * @param callback Callback to trigger when the event occurs.
-     */
-    on(event: 'sceneRendered', callback: SceneRenderedDelegate): void;
-    /**
-     * @example
-     * ```js
-     * viewer.off('click', onClick);
-     * ```
-     */
-    off(event: 'click' | 'hover', callback: PointerEventDelegate): void;
-    off(event: 'cameraChange', callback: CameraChangeDelegate): void;
-    off(event: 'sceneRendered', callback: SceneRenderedDelegate): void;
-    off(event: 'disposed', callback: DisposedDelegate): void;
-    /**
-     * Sets camera controls mode anything allowed in CameraControlsOptions type.
-     * @param controlsOptions JSON object with camera controls options.
-     */
-    setCameraControlsOptions(controlsOptions: CameraControlsOptions): void;
-    /**
-     * Gets camera controls mode.
-     */
-    getCameraControlsOptions(): CameraControlsOptions;
-    /**
-     * Gets the current viewer state which includes the camera pose as well as applied styling.
-     * @returns JSON object containing viewer state.
-     */
-    getViewState(): ViewerState;
-    /**
-     * Restores camera settings from the state provided, and clears all current styled
-     * node collections and applies the `state` object.
-     * @param state Viewer state retrieved from {@link Cognite3DViewer.getViewState}.
-     */
-    setViewState(state: ViewerState): Promise<void>;
-    /**
-     * Add a new model to the viewer.
-     * Call {@link Cognite3DViewer.fitCameraToModel} to see the model after the model has loaded.
-     * @param options
-     * @example
-     * ```js
-     * const options = {
-     * modelId:     'COGNITE_3D_MODEL_ID',
-     * revisionId:  'COGNITE_3D_REVISION_ID',
-     * };
-     * viewer.addModel(options).then(model => {
-     * viewer.fitCameraToModel(model, 0);
-     * });
-     * ```
-     */
-    addModel(options: AddModelOptions): Promise<Cognite3DModel | CognitePointCloudModel>;
-    /**
-     * Add a new CAD 3D model to the viewer.
-     * Call {@link Cognite3DViewer.fitCameraToModel} to see the model after the model has loaded.
-     * @param options
-     * @example
-     * ```js
-     * const options = {
-     * modelId:     'COGNITE_3D_MODEL_ID',
-     * revisionId:  'COGNITE_3D_REVISION_ID',
-     * };
-     * viewer.addCadModel(options).then(model => {
-     * viewer.fitCameraToModel(model, 0);
-     * });
-     * ```
-     */
-    addCadModel(options: AddModelOptions): Promise<Cognite3DModel>;
-    /**
-     * Add a new pointcloud 3D model to the viewer.
-     * Call {@link Cognite3DViewer.fitCameraToModel} to see the model after the model has loaded.
-     * @param options
-     * @example
-     * ```js
-     * const options = {
-     * modelId:     'COGNITE_3D_MODEL_ID',
-     * revisionId:  'COGNITE_3D_REVISION_ID',
-     * };
-     * viewer.addPointCloudModel(options).then(model => {
-     * viewer.fitCameraToModel(model, 0);
-     * });
-     * ```
-     */
-    addPointCloudModel(options: AddModelOptions): Promise<CognitePointCloudModel>;
-    /**
-     * Removes a model that was previously added using {@link Cognite3DViewer.addModel},
-     * {@link Cognite3DViewer.addCadModel} or {@link Cognite3DViewer.addPointCloudModel}
-     * .
-     * @param model
-     */
-    removeModel(model: Cognite3DModel | CognitePointCloudModel): void;
-    /**
-     * Use to determine of which type the model is.
-     *
-     * @param modelId The model's id.
-     * @param revisionId The model's revision id.
-     *
-     * @returns Empty string if type is not supported.
-     * @example
-     * ```typescript
-     * 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);
-     * ```
-     */
-    determineModelType(modelId: number, revisionId: number): Promise<SupportedModelTypes | ''>;
-    /**
-     * Add a THREE.Object3D to the viewer.
-     * @param object
-     * @example
-     * ```js
-     * const sphere = new THREE.Mesh(
-     * new THREE.SphereBufferGeometry(),
-     * new THREE.MeshBasicMaterial()
-     * );
-     * viewer.addObject3D(sphere);
-     * ```
-     */
-    addObject3D(object: THREE.Object3D): void;
-    /**
-     * Remove a THREE.Object3D from the viewer.
-     * @param object
-     * @example
-     * ```js
-     * const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(), new THREE.MeshBasicMaterial());
-     * viewer.addObject3D(sphere);
-     * viewer.removeObject3D(sphere);
-     * ```
-     */
-    removeObject3D(object: THREE.Object3D): void;
-    /**
-     * Add an object that will be considered a UI object. It will be rendered in the last stage and with orthographic projection.
-     * @param object
-     * @param screenPos Screen space position of object (in pixels).
-     * @param size Pixel width and height of the object.
-     */
-    addUiObject(object: THREE.Object3D, screenPos: THREE.Vector2, size: THREE.Vector2): void;
-    /** Removes the UI object from the viewer.
-     * @param object
-     */
-    removeUiObject(object: THREE.Object3D): void;
-    /**
-     * Sets the color used as the clear color of the renderer.
-     * @param color
-     */
-    setBackgroundColor(color: THREE.Color): void;
-    /**
-     * Sets per-pixel clipping planes. Pixels behind any of the planes will be sliced away.
-     * @param clippingPlanes The planes to use for clipping.
-     * @example
-     * ```js
-     * // 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]);
-     * ```
-     * ```js
-     * // 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]);
-     * ```
-     * ```js
-     * // 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]);
-     * ```
-     * ```js
-     * // 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]);
-     * ```
-     * ```js
-     * // Disable clipping planes
-     *  viewer.setClippingPlanes([]);
-     * ```
-     */
-    setClippingPlanes(clippingPlanes: THREE.Plane[]): void;
-    /**
-     * @param slicingPlanes
-     * @deprecated Since version 2.1, will be removed in version 3.0. Use {@link setClippingPlanes}.
-     */
-    setSlicingPlanes(slicingPlanes: THREE.Plane[]): void;
-    /**
-     * Returns the current active clipping planes.
-     * @version New in 2.1
-     */
-    getClippingPlanes(): THREE.Plane[];
-    /**
-     * @obvious
-     * @returns The THREE.Camera used for rendering.
-     */
-    getCamera(): THREE.PerspectiveCamera;
-    /**
-     * @obvious
-     * @returns The THREE.Scene used for rendering.
-     */
-    getScene(): THREE.Scene;
-    /**
-     * @obvious
-     * @returns Camera's position in world space.
-     */
-    getCameraPosition(): THREE.Vector3;
-    /**
-     * @obvious
-     * @returns Camera's target in world space.
-     */
-    getCameraTarget(): THREE.Vector3;
-    /**
-     * @obvious
-     * @param position Position in world space.
-     * @example
-     * ```js
-     * // store position, target
-     * const position = viewer.getCameraPosition();
-     * const target = viewer.getCameraTarget();
-     * // restore position, target
-     * viewer.setCameraPosition(position);
-     * viewer.setCameraTarget(target);
-     * ```
-     */
-    setCameraPosition(position: THREE.Vector3): void;
-    /**
-     * Set camera's target.
-     * @public
-     * @param target Target in world space.
-     * @param animated Whether change of target should be animated or not (default is false).
-     * @example
-     * ```js
-     * // store position, target
-     * const position = viewer.getCameraPosition();
-     * const target = viewer.getCameraTarget();
-     * // restore position, target
-     * viewer.setCameraPosition(position);
-     * viewer.setCameraTarget(target);
-     * ```
-     */
-    setCameraTarget(target: THREE.Vector3, animated?: boolean): void;
-    /**
-     * Gets the camera controller. See https://www.npmjs.com/package/@cognite/three-combo-controls
-     * for documentation. Note that by default the `minDistance` setting of the controls will
-     * be automatic. This can be disabled using {@link Cognite3DViewerOptions.automaticControlsSensitivity}.
-     */
-    get cameraControls(): ComboControls;
-    /**
-     * Gets whether camera controls through mouse, touch and keyboard are enabled.
-     */
-    get cameraControlsEnabled(): boolean;
-    /**
-     * Sets whether camera controls through mouse, touch and keyboard are enabled.
-     * This can be useful to e.g. temporarily disable navigation when manipulating other
-     * objects in the scene or when implementing a "cinematic" viewer.
-     */
-    set cameraControlsEnabled(enabled: boolean);
-    /**
-     * Attempts to load the camera settings from the settings stored for the
-     * provided model. See {@link https://docs.cognite.com/api/v1/#operation/get3DRevision}
-     * and {@link 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, {@link Cognite3DViewer.fitCameraToModel}
-     * is used as a fallback.
-     * @param model The model to load camera settings from.
-     */
-    loadCameraFromModel(model: CogniteModelBase): void;
-    /**
-     * Move camera to a place where the 3D model is visible.
-     * It uses the bounding box of the 3D model and calls {@link Cognite3DViewer.fitCameraToBoundingBox}.
-     * @param model The 3D model.
-     * @param duration The duration of the animation moving the camera. Set this to 0 (zero) to disable animation.
-     * @example
-     * ```js
-     * // Fit camera to model
-     * viewer.fitCameraToModel(model);
-     * ```
-     * ```js
-     * // Fit camera to model over 500 milliseconds
-     * viewer.fitCameraToModel(model, 500);
-     * ```
-     * ```js
-     * // Fit camera to model instantly
-     * viewer.fitCameraToModel(model, 0);
-     * ```
-     */
-    fitCameraToModel(model: CogniteModelBase, duration?: number): void;
-    /**
-     * Move camera to a place where the content of a bounding box is visible to the camera.
-     * @param box The bounding box in world space.
-     * @param duration The duration of the animation moving the camera. Set this to 0 (zero) to disable animation.
-     * @param radiusFactor The ratio of the distance from camera to center of box and radius of the box.
-     * @example
-     * ```js
-     * // Fit camera to bounding box over 500 milliseconds
-     * viewer.fitCameraToBoundingBox(boundingBox, 500);
-     * ```
-     * ```js
-     * // Fit camera to bounding box instantaneously
-     * viewer.fitCameraToBoundingBox(boundingBox, 0);
-     * ```
-     * ```js
-     * // Place the camera closer to the bounding box
-     * viewer.fitCameraToBoundingBox(boundingBox, 500, 2);
-     * ```
-     */
-    fitCameraToBoundingBox(box: THREE.Box3, duration?: number, radiusFactor?: number): void;
-    /**
-     * Typically used when you perform some changes and can't see them unless you move camera.
-     */
-    requestRedraw(): void;
-    /**
-     * Allows to move camera with WASM or arrows keys.
-     */
-    enableKeyboardNavigation(): void;
-    /**
-     * Disables camera movement by pressing WASM or arrows keys.
-     */
-    disableKeyboardNavigation(): void;
-    /**
-     * 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 {@link https://www.w3schools.com/graphics/canvas_coordinates.asp https://www.w3schools.com/graphics/canvas_coordinates.asp}.
-     * @param point World space coordinate.
-     * @param normalize Optional. If true, coordinates are normalized into [0,1]. If false, the values are in the range [0, <canvas_size>).
-     * @returns Returns 2D coordinates if the point is visible on screen, or `null` if object is outside screen.
-     * @example
-     * ```js
-     * 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);
-     * ```
-     * ```js
-     * 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);
-     * ```
-     * ```js
-     * 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
-     * }
-     * ```
-     */
-    worldToScreen(point: THREE.Vector3, normalize?: boolean): THREE.Vector2 | null;
-    /**
-     * Take screenshot from the current camera position.
-     * @param width Width of the final image. Default is current canvas size.
-     * @param height Height of the final image. Default is current canvas size.
-     * @returns A {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URL} of the image ('image/png').
-     * @example
-     * ```js
-     * // Take a screenshot with custom resolution
-     * const url = await viewer.getScreenshot(1920, 1080);
-     * ```
-     * ```js
-     * // 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);
-     * ```
-     */
-    getScreenshot(width?: number, height?: number): Promise<string>;
-    /**
-     * Raycasting model(s) for finding where the ray intersects with the model.
-     * @param offsetX X coordinate in pixels (relative to the domElement).
-     * @param offsetY Y coordinate in pixels (relative to the domElement).
-     * @param options Options to control the behavior of the intersection operation. Optional (new in 1.3.0).
-     * @returns A promise that if there was an intersection then return the intersection object - otherwise it
-     * returns `null` if there were no intersections.
-     * @see {@link https://en.wikipedia.org/wiki/Ray_casting}.
-     *
-     * @example For CAD model
-     * ```js
-     * 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
-     * ```js
-     * 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
-     *   );
-     * ```
-     */
-    getIntersectionFromPixel(offsetX: number, offsetY: number, options?: IntersectionFromPixelOptions): Promise<null | Intersection>;
-    private getModels;
-    /**
-     * Calculates default duration for camera animation based on distance from the camera to the object.
-     * @param distanceToCamera
-     */
-    private calculateDefaultDuration;
-    /** @private */
-    private moveCameraTargetTo;
-    /** @private */
-    private moveCameraTo;
-    /**
-     * Creates a helper for managing viewer state.
-     */
-    private createViewStateHelper;
-    /** @private */
-    private animate;
-    /** @private */
-    private updateCameraNearAndFar;
-    /** @private */
-    private resizeIfNecessary;
-    private readonly startPointerEventListeners;
-}
+/*!
+ * Copyright 2021 Cognite AS
+ */
+import * as THREE from 'three';
+import { AddModelOptions, Cognite3DViewerOptions, Intersection, CameraChangeDelegate, PointerEventDelegate, CadModelBudget, PointCloudBudget } from './types';
+import { CogniteModelBase } from './CogniteModelBase';
+import { Cognite3DModel } from './Cognite3DModel';
+import { CognitePointCloudModel } from './CognitePointCloudModel';
+import { DisposedDelegate, SceneRenderedDelegate } from '../types';
+import { SupportedModelTypes } from '../../datamodels/base';
+import { IntersectionFromPixelOptions } from '../..';
+import { ViewerState } from '../../utilities/ViewStateHelper';
+import { CameraControlsOptions, ComboControls } from '../../../../packages/camera-manager';
+/**
+ * @example
+ * ```js
+ * const viewer = new Cognite3DViewer({
+ *   noBackground: true,
+ *   sdk: CogniteClient({...})
+ * });
+ * ```
+ * @module @cognite/reveal
+ */
+export declare class Cognite3DViewer {
+    private get canvas();
+    /**
+     * For now it just always returns true.
+     * @see Https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#Browser_compatibility.
+     */
+    static isBrowserSupported(): true;
+    /**
+     * 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.
+     */
+    get domElement(): HTMLElement;
+    /**
+     * Returns the renderer used to produce images from 3D geometry.
+     */
+    get renderer(): THREE.WebGLRenderer;
+    private readonly _cdfSdkClient;
+    private readonly _dataSource;
+    private readonly camera;
+    private readonly scene;
+    private readonly _cameraManager;
+    private readonly _subscription;
+    private readonly _revealManagerHelper;
+    private readonly _domElement;
+    private readonly _renderer;
+    private readonly _boundAnimate;
+    private readonly _events;
+    private readonly _mouseHandler;
+    private readonly _models;
+    private readonly _extraObjects;
+    private readonly _automaticNearFarPlane;
+    private readonly _automaticControlsSensitivity;
+    private isDisposed;
+    private readonly renderController;
+    private latestRequestId;
+    private readonly clock;
+    private _clippingNeedsUpdate;
+    private readonly spinner;
+    private get revealManager();
+    /**
+     * Reusable buffers used by functions in Cognite3dViewer to avoid allocations.
+     */
+    private readonly _updateNearAndFarPlaneBuffers;
+    /**
+     * 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.
+     */
+    get cadBudget(): CadModelBudget;
+    /**
+     * 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.
+     */
+    set cadBudget(budget: CadModelBudget);
+    /**
+     * Returns the point cloud budget. The budget is shared between all loaded
+     * point cloud models.
+     */
+    get pointCloudBudget(): PointCloudBudget;
+    /**
+     * Sets the point cloud budget. The budget is shared between all loaded
+     * point cloud models.
+     */
+    set pointCloudBudget(budget: PointCloudBudget);
+    /**
+     * Gets a list of models currently added to the viewer.
+     */
+    get models(): CogniteModelBase[];
+    constructor(options: Cognite3DViewerOptions);
+    /**
+     * Returns reveal version installed.
+     */
+    getVersion(): string;
+    /**
+     * Sets the log level. Used for debugging.
+     * Defaults to 'none' (which is identical to 'silent').
+     * @param level
+     */
+    setLogLevel(level: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | 'none'): void;
+    /**
+     * Dispose of WebGL resources. Can be used to free up memory when the viewer is no longer in use.
+     * @see {@link https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects}
+     * ```ts
+     * // Viewer is no longer in use, free up memory
+     * viewer.dispose();
+     * ```.
+     */
+    dispose(): void;
+    /**
+     * Triggered when the viewer is disposed. Listeners should clean up any
+     * resources held and remove the reference to the viewer.
+     */
+    on(event: 'disposed', callback: DisposedDelegate): void;
+    /**
+     * @example
+     * ```js
+     * const onClick = (event) => { console.log(event.offsetX, event.offsetY) };
+     * viewer.on('click', onClick);
+     * ```
+     */
+    on(event: 'click' | 'hover', callback: PointerEventDelegate): void;
+    /**
+     * @example
+     * ```js
+     * viewer.on('cameraChange', (position, target) => {
+     *   console.log('Camera changed: ', position, target);
+     * });
+     * ```
+     */
+    on(event: 'cameraChange', callback: CameraChangeDelegate): void;
+    /**
+     * Event that is triggered immediatly after the scene has been rendered.
+     * @param event Metadata about the rendering frame.
+     * @param callback Callback to trigger when the event occurs.
+     */
+    on(event: 'sceneRendered', callback: SceneRenderedDelegate): void;
+    /**
+     * @example
+     * ```js
+     * viewer.off('click', onClick);
+     * ```
+     */
+    off(event: 'click' | 'hover', callback: PointerEventDelegate): void;
+    off(event: 'cameraChange', callback: CameraChangeDelegate): void;
+    off(event: 'sceneRendered', callback: SceneRenderedDelegate): void;
+    off(event: 'disposed', callback: DisposedDelegate): void;
+    /**
+     * Sets camera control options. See {@link CameraControlsOptions}.
+     * @param controlsOptions JSON object with camera controls options.
+     */
+    setCameraControlsOptions(controlsOptions: CameraControlsOptions): void;
+    /**
+     * Gets camera controls mode.
+     */
+    getCameraControlsOptions(): CameraControlsOptions;
+    /**
+     * Gets the current viewer state which includes the camera pose as well as applied styling.
+     * @returns JSON object containing viewer state.
+     */
+    getViewState(): ViewerState;
+    /**
+     * Restores camera settings from the state provided, and clears all current styled
+     * node collections and applies the `state` object.
+     * @param state Viewer state retrieved from {@link Cognite3DViewer.getViewState}.
+     */
+    setViewState(state: ViewerState): Promise<void>;
+    /**
+     * Add a new model to the viewer.
+     * Call {@link Cognite3DViewer.fitCameraToModel} to see the model after the model has loaded.
+     * @param options
+     * @example
+     * ```js
+     * const options = {
+     * modelId:     'COGNITE_3D_MODEL_ID',
+     * revisionId:  'COGNITE_3D_REVISION_ID',
+     * };
+     * viewer.addModel(options).then(model => {
+     * viewer.fitCameraToModel(model, 0);
+     * });
+     * ```
+     */
+    addModel(options: AddModelOptions): Promise<Cognite3DModel | CognitePointCloudModel>;
+    /**
+     * Add a new CAD 3D model to the viewer.
+     * Call {@link Cognite3DViewer.fitCameraToModel} to see the model after the model has loaded.
+     * @param options
+     * @example
+     * ```js
+     * const options = {
+     * modelId:     'COGNITE_3D_MODEL_ID',
+     * revisionId:  'COGNITE_3D_REVISION_ID',
+     * };
+     * viewer.addCadModel(options).then(model => {
+     * viewer.fitCameraToModel(model, 0);
+     * });
+     * ```
+     */
+    addCadModel(options: AddModelOptions): Promise<Cognite3DModel>;
+    /**
+     * Add a new pointcloud 3D model to the viewer.
+     * Call {@link Cognite3DViewer.fitCameraToModel} to see the model after the model has loaded.
+     * @param options
+     * @example
+     * ```js
+     * const options = {
+     * modelId:     'COGNITE_3D_MODEL_ID',
+     * revisionId:  'COGNITE_3D_REVISION_ID',
+     * };
+     * viewer.addPointCloudModel(options).then(model => {
+     * viewer.fitCameraToModel(model, 0);
+     * });
+     * ```
+     */
+    addPointCloudModel(options: AddModelOptions): Promise<CognitePointCloudModel>;
+    /**
+     * Removes a model that was previously added using {@link Cognite3DViewer.addModel},
+     * {@link Cognite3DViewer.addCadModel} or {@link Cognite3DViewer.addPointCloudModel}
+     * .
+     * @param model
+     */
+    removeModel(model: CogniteModelBase): void;
+    /**
+     * Use to determine of which type the model is.
+     *
+     * @param modelId The model's id.
+     * @param revisionId The model's revision id.
+     *
+     * @returns Empty string if type is not supported.
+     * @example
+     * ```typescript
+     * 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);
+     * ```
+     */
+    determineModelType(modelId: number, revisionId: number): Promise<SupportedModelTypes | ''>;
+    /**
+     * Add a THREE.Object3D to the viewer.
+     * @param object
+     * @example
+     * ```js
+     * const sphere = new THREE.Mesh(
+     * new THREE.SphereBufferGeometry(),
+     * new THREE.MeshBasicMaterial()
+     * );
+     * viewer.addObject3D(sphere);
+     * ```
+     */
+    addObject3D(object: THREE.Object3D): void;
+    /**
+     * Remove a THREE.Object3D from the viewer.
+     * @param object
+     * @example
+     * ```js
+     * const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(), new THREE.MeshBasicMaterial());
+     * viewer.addObject3D(sphere);
+     * viewer.removeObject3D(sphere);
+     * ```
+     */
+    removeObject3D(object: THREE.Object3D): void;
+    /**
+     * Add an object that will be considered a UI object. It will be rendered in the last stage and with orthographic projection.
+     * @param object
+     * @param screenPos Screen space position of object (in pixels).
+     * @param size Pixel width and height of the object.
+     */
+    addUiObject(object: THREE.Object3D, screenPos: THREE.Vector2, size: THREE.Vector2): void;
+    /** Removes the UI object from the viewer.
+     * @param object
+     */
+    removeUiObject(object: THREE.Object3D): void;
+    /**
+     * Sets the color used as the clear color of the renderer.
+     * @param color
+     */
+    setBackgroundColor(color: THREE.Color): void;
+    /**
+     * Sets per-pixel clipping planes. Pixels behind any of the planes will be sliced away.
+     * @param clippingPlanes The planes to use for clipping.
+     * @example
+     * ```js
+     * // 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]);
+     * ```
+     * ```js
+     * // 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]);
+     * ```
+     * ```js
+     * // 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]);
+     * ```
+     * ```js
+     * // 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]);
+     * ```
+     * ```js
+     * // Disable clipping planes
+     *  viewer.setClippingPlanes([]);
+     * ```
+     */
+    setClippingPlanes(clippingPlanes: THREE.Plane[]): void;
+    /**
+     * @param slicingPlanes
+     * @deprecated Since version 2.1, will be removed in version 3.0. Use {@link setClippingPlanes}.
+     */
+    setSlicingPlanes(slicingPlanes: THREE.Plane[]): void;
+    /**
+     * Returns the current active clipping planes.
+     * @version New in 2.1
+     */
+    getClippingPlanes(): THREE.Plane[];
+    /**
+     * @obvious
+     * @returns The THREE.Camera used for rendering.
+     */
+    getCamera(): THREE.PerspectiveCamera;
+    /**
+     * @obvious
+     * @returns The THREE.Scene used for rendering.
+     */
+    getScene(): THREE.Scene;
+    /**
+     * @obvious
+     * @returns Camera's position in world space.
+     */
+    getCameraPosition(): THREE.Vector3;
+    /**
+     * @obvious
+     * @returns Camera's target in world space.
+     */
+    getCameraTarget(): THREE.Vector3;
+    /**
+     * @obvious
+     * @param position Position in world space.
+     * @example
+     * ```js
+     * // store position, target
+     * const position = viewer.getCameraPosition();
+     * const target = viewer.getCameraTarget();
+     * // restore position, target
+     * viewer.setCameraPosition(position);
+     * viewer.setCameraTarget(target);
+     * ```
+     */
+    setCameraPosition(position: THREE.Vector3): void;
+    /**
+     * Set camera's target.
+     * @public
+     * @param target Target in world space.
+     * @param animated Whether change of target should be animated or not (default is false).
+     * @example
+     * ```js
+     * // store position, target
+     * const position = viewer.getCameraPosition();
+     * const target = viewer.getCameraTarget();
+     * // restore position, target
+     * viewer.setCameraPosition(position);
+     * viewer.setCameraTarget(target);
+     * ```
+     */
+    setCameraTarget(target: THREE.Vector3, animated?: boolean): void;
+    /**
+     * Gets the camera controller. See https://www.npmjs.com/package/@cognite/three-combo-controls
+     * for documentation. Note that by default the `minDistance` setting of the controls will
+     * be automatic. This can be disabled using {@link Cognite3DViewerOptions.automaticControlsSensitivity}.
+     */
+    get cameraControls(): ComboControls;
+    /**
+     * Gets whether camera controls through mouse, touch and keyboard are enabled.
+     */
+    get cameraControlsEnabled(): boolean;
+    /**
+     * Sets whether camera controls through mouse, touch and keyboard are enabled.
+     * This can be useful to e.g. temporarily disable navigation when manipulating other
+     * objects in the scene or when implementing a "cinematic" viewer.
+     */
+    set cameraControlsEnabled(enabled: boolean);
+    /**
+     * Attempts to load the camera settings from the settings stored for the
+     * provided model. See {@link https://docs.cognite.com/api/v1/#operation/get3DRevision}
+     * and {@link 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, {@link Cognite3DViewer.fitCameraToModel}
+     * is used as a fallback.
+     * @param model The model to load camera settings from.
+     */
+    loadCameraFromModel(model: CogniteModelBase): void;
+    /**
+     * Move camera to a place where the 3D model is visible.
+     * It uses the bounding box of the 3D model and calls {@link Cognite3DViewer.fitCameraToBoundingBox}.
+     * @param model The 3D model.
+     * @param duration The duration of the animation moving the camera. Set this to 0 (zero) to disable animation.
+     * @example
+     * ```js
+     * // Fit camera to model
+     * viewer.fitCameraToModel(model);
+     * ```
+     * ```js
+     * // Fit camera to model over 500 milliseconds
+     * viewer.fitCameraToModel(model, 500);
+     * ```
+     * ```js
+     * // Fit camera to model instantly
+     * viewer.fitCameraToModel(model, 0);
+     * ```
+     */
+    fitCameraToModel(model: CogniteModelBase, duration?: number): void;
+    /**
+     * Move camera to a place where the content of a bounding box is visible to the camera.
+     * @param box The bounding box in world space.
+     * @param duration The duration of the animation moving the camera. Set this to 0 (zero) to disable animation.
+     * @param radiusFactor The ratio of the distance from camera to center of box and radius of the box.
+     * @example
+     * ```js
+     * // Fit camera to bounding box over 500 milliseconds
+     * viewer.fitCameraToBoundingBox(boundingBox, 500);
+     * ```
+     * ```js
+     * // Fit camera to bounding box instantaneously
+     * viewer.fitCameraToBoundingBox(boundingBox, 0);
+     * ```
+     * ```js
+     * // Place the camera closer to the bounding box
+     * viewer.fitCameraToBoundingBox(boundingBox, 500, 2);
+     * ```
+     */
+    fitCameraToBoundingBox(box: THREE.Box3, duration?: number, radiusFactor?: number): void;
+    /**
+     * Typically used when you perform some changes and can't see them unless you move camera.
+     */
+    requestRedraw(): void;
+    /**
+     * Allows to move camera with WASD or arrows keys.
+     */
+    enableKeyboardNavigation(): void;
+    /**
+     * Disables camera movement by pressing WASD or arrows keys.
+     */
+    disableKeyboardNavigation(): void;
+    /**
+     * 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 {@link https://www.w3schools.com/graphics/canvas_coordinates.asp https://www.w3schools.com/graphics/canvas_coordinates.asp}.
+     * @param point World space coordinate.
+     * @param normalize Optional. If true, coordinates are normalized into [0,1]. If false, the values are in the range [0, <canvas_size>).
+     * @returns Returns 2D coordinates if the point is visible on screen, or `null` if object is outside screen.
+     * @example
+     * ```js
+     * 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);
+     * ```
+     * ```js
+     * 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);
+     * ```
+     * ```js
+     * 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
+     * }
+     * ```
+     */
+    worldToScreen(point: THREE.Vector3, normalize?: boolean): THREE.Vector2 | null;
+    /**
+     * Take screenshot from the current camera position.
+     * @param width Width of the final image. Default is current canvas size.
+     * @param height Height of the final image. Default is current canvas size.
+     * @returns A {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URL} of the image ('image/png').
+     * @example
+     * ```js
+     * // Take a screenshot with custom resolution
+     * const url = await viewer.getScreenshot(1920, 1080);
+     * ```
+     * ```js
+     * // 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);
+     * ```
+     */
+    getScreenshot(width?: number, height?: number): Promise<string>;
+    /**
+     * Raycasting model(s) for finding where the ray intersects with the model.
+     * @param offsetX X coordinate in pixels (relative to the domElement).
+     * @param offsetY Y coordinate in pixels (relative to the domElement).
+     * @param options Options to control the behavior of the intersection operation. Optional (new in 1.3.0).
+     * @returns A promise that if there was an intersection then return the intersection object - otherwise it
+     * returns `null` if there were no intersections.
+     * @see {@link https://en.wikipedia.org/wiki/Ray_casting}.
+     *
+     * @example For CAD model
+     * ```js
+     * 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
+     * ```js
+     * 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
+     *   );
+     * ```
+     */
+    getIntersectionFromPixel(offsetX: number, offsetY: number, options?: IntersectionFromPixelOptions): Promise<null | Intersection>;
+    private getModels;
+    /**
+     * Creates a helper for managing viewer state.
+     */
+    private createViewStateHelper;
+    /** @private */
+    private animate;
+    /** @private */
+    private modelIntersectionCallback;
+    /** @private */
+    private updateCameraNearAndFar;
+    /** @private */
+    private resizeIfNecessary;
+    private readonly startPointerEventListeners;
+}