@inweb/viewer-three 25.9.8 → 25.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "25.9.8",
-  "description": "3D viewer powered by Three.js",
+  "version": "25.10.0",
+  "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Open Design Alliance",
@@ -24,12 +24,13 @@
   ],
   "scripts": {
     "build": "rollup -c rollup.config.js",
-    "test": "karma start karma.conf.js"
+    "test": "karma start karma.conf.js",
+    "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~25.9.8",
-    "@inweb/eventemitter2": "~25.9.8",
-    "@inweb/viewer-core": "~25.9.8"
+    "@inweb/client": "~25.10.0",
+    "@inweb/eventemitter2": "~25.10.0",
+    "@inweb/viewer-core": "~25.10.0"
   },
   "devDependencies": {
     "@types/three": "^0.152.1",

package/src/Viewer/IDisposable.ts

@@ -0,0 +1,29 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * An object that performs a cleanup operation when `.dispose()` is called.
+ */
+export interface IDisposable {
+  dispose(): void;
+}

package/src/Viewer/Viewer.ts

@@ -21,8 +21,12 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
+import { Box3, LinearToneMapping, Object3D, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
+import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { GLTFLoadingManager } from "./loaders/GLTFLoadingManager";
+
 import { EventEmitter2 } from "@inweb/eventemitter2";
-import { Assembly, Client, File, Model } from "@inweb/client";
+import { Assembly, Client, Model, File } from "@inweb/client";
 import {
   CANVAS_EVENTS,
   CanvasEventMap,
@@ -35,68 +39,88 @@ import {
   OptionsEventMap,
   ViewerEventMap,
 } from "@inweb/viewer-core";
-import * as THREE from "three";
-import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { GLTFLoadingManager } from "./loaders/GLTFLoadingManager";
 
 import { PanDragger } from "./draggers/PanDragger";
 import { OrbitDragger } from "./draggers/OrbitDragger";
 import { ZoomDragger } from "./draggers/ZoomDragger";
 import { WalkDragger } from "./draggers/WalkDragger";
-import { ClippingPlaneDragger } from "./draggers/ClippingPlaneDragger";
+import { CuttingPlaneXAxisDragger } from "./draggers/CuttingPlaneXAxis";
+import { CuttingPlaneYAxisDragger } from "./draggers/CuttingPlaneYAxis";
+import { CuttingPlaneZAxisDragger } from "./draggers/CuttingPlaneZAxis";
 
-import { IComponent } from "./IComponent";
+import { IDisposable } from "./IDisposable";
+import { ExtentsComponent } from "./components/ExtentsComponent";
 import { LightComponent } from "./components/LightComponent";
 import { BackgroundComponent } from "./components/BackgroundComponent";
-import { DefaultCameraPositionComponent } from "./components/DefaultCameraPositionComponent";
+import { DefaultPositionComponent } from "./components/DefaultPositionComponent";
 import { ResizeCanvasComponent } from "./components/ResizeCanvasComponent";
 import { RenderLoopComponent } from "./components/RenderLoopComponent";
-// import { ObjectSelectionComponent } from "./components/ObjectSelectionComponent";
-
+import { SelectionComponent } from "./components/SelectionComponent";
+// import { ViewPositionComponent } from "./components/ViewPositionComponent";
+import { WCSHelperComponent } from "./components/WCSHelperComponent";
+// import { AxesHelperComponent } from "./components/AxesHelperComponent";
+// import { ExtentsHelperComponent } from "./components/ExtentsHelperComponent";
+
+/**
+ * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
+ */
 export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap> implements IViewer {
   public client: Client | undefined;
-  private _options: Options;
+  protected _options: Options;
 
   private canvaseventlistener: (event: any) => void;
 
   public canvas: HTMLCanvasElement | undefined;
   public canvasEvents: string[];
 
-  public scene: THREE.Scene | undefined;
-  public camera: THREE.PerspectiveCamera | undefined;
-  public renderer: THREE.WebGLRenderer | undefined;
+  public scene: Scene | undefined;
+  public helpers: Scene | undefined;
+  public camera: PerspectiveCamera | undefined;
+  public renderer: WebGLRenderer | undefined;
   public models: Array<GLTF>;
-  public selectedObjects: Array<any>;
+  public selected: Array<Object3D>;
+  public extents: Box3;
+  public target: Vector3;
 
   private draggerFactory: Record<string, any>;
   private _activeDragger: IDragger | null;
 
-  private components: Array<IComponent>;
+  private components: Array<IDisposable>;
 
-  private renderNeeded = false;
+  private renderNeeded: boolean;
   private renderTime: DOMHighResTimeStamp;
 
+  /**
+   * @param client - The `Client` instance that is used to load model reference files from the
+   *   Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
+   *   view `glTF` files from the web or from local computer.
+   */
   constructor(client?: Client) {
     super();
     this._options = new Options(this);
 
     this.client = client;
 
-    this.canvasEvents = CANVAS_EVENTS.slice();
+    this.canvasEvents = CANVAS_EVENTS;
     this.canvaseventlistener = (event: Event) => this.emit(event);
 
+    this.extents = new Box3();
+    this.target = new Vector3();
+
     this.draggerFactory = {
       Pan: PanDragger,
       Zoom: ZoomDragger,
       Orbit: OrbitDragger,
       Walk: WalkDragger,
-      Clipping: ClippingPlaneDragger,
+      CuttingPlaneXAxis: CuttingPlaneXAxisDragger,
+      CuttingPlaneYAxis: CuttingPlaneYAxisDragger,
+      CuttingPlaneZAxis: CuttingPlaneZAxisDragger,
     };
     this._activeDragger = null;
 
     this.models = [];
     this.components = [];
-    this.selectedObjects = [];
+    this.selected = [];
 
     this.renderTime = 0;
 
@@ -104,7 +128,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     this.update = this.update.bind(this);
   }
 
-  get options(): Options {
+  get options(): IOptions {
     return this._options;
   }
 
@@ -112,38 +136,45 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     return Object.keys(this.draggerFactory);
   }
 
-  initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent) => void): Promise<this> {
+  initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent<EventTarget>) => void): Promise<this> {
     this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
 
-    this.scene = new THREE.Scene();
+    this.scene = new Scene();
+    this.helpers = new Scene();
 
     const rect = canvas.parentElement.getBoundingClientRect();
     const width = rect.width || 1;
     const height = rect.height || 1;
-    this.camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
+    this.camera = new PerspectiveCamera(45, width / height, 0.01, 1000);
     this.camera.up.set(0, 0, 1);
 
-    this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+    this.renderer = new WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true });
     this.renderer.setPixelRatio(window.devicePixelRatio);
     this.renderer.setSize(width, height);
-    this.renderer.toneMapping = THREE.LinearToneMapping;
+    this.renderer.toneMapping = LinearToneMapping;
 
     this.canvas = canvas;
     this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
 
+    this.components.push(new ExtentsComponent(this));
     this.components.push(new LightComponent(this));
     this.components.push(new BackgroundComponent(this));
-    this.components.push(new DefaultCameraPositionComponent(this));
+    // this.components.push(new ViewPositionComponent(this));
+    this.components.push(new DefaultPositionComponent(this));
     this.components.push(new ResizeCanvasComponent(this));
-    this.components.push(new RenderLoopComponent(this as any));
-    // this.components.push(new ObjectSelectionComponent(this as any));
+    this.components.push(new RenderLoopComponent(this));
+    this.components.push(new SelectionComponent(this));
+    this.components.push(new WCSHelperComponent(this));
+    // this.components.push(new AxesHelperComponent(this));
+    // this.components.push(new ExtentsHelperComponent(this));
 
     this.syncOptions();
 
     this.renderTime = performance.now();
     this.render(this.renderTime);
 
-    if (onProgress) onProgress(new ProgressEvent("progress", { lengthComputable: true, loaded: 1, total: 1 }));
+    if (typeof onProgress === "function")
+      onProgress(new ProgressEvent("progress", { lengthComputable: true, loaded: 1, total: 1 }));
 
     this.emitEvent({ type: "initializeprogress", data: 1, loaded: 1, total: 1 });
     this.emitEvent({ type: "initialize" });
@@ -155,12 +186,14 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     this.cancel();
     this.emitEvent({ type: "dispose" });
 
-    this.components.forEach((component: IComponent) => component.dispose());
+    this.components.forEach((component: IDisposable) => component.dispose());
     this.components = [];
 
     this.setActiveDragger("");
     this.removeAllListeners();
 
+    this.clear();
+
     if (this.canvas) {
       this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
       this.canvas = undefined;
@@ -171,6 +204,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     this.renderer = undefined;
     this.camera = undefined;
     this.scene = undefined;
+    this.helpers = undefined;
 
     return this;
   }
@@ -182,15 +216,24 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
   public render(time: DOMHighResTimeStamp): void {
     if (!this.renderNeeded) return;
     if (!this.renderer) return;
-    if (!this.scene) return;
-    if (!this.camera) return;
 
+    const clippingPlanes = this.renderer.clippingPlanes;
+
+    this.renderer.setViewport(0, 0, this.canvas.offsetWidth, this.canvas.offsetHeight);
     this.renderer.render(this.scene, this.camera);
-    this.renderNeeded = false;
+
+    this.renderer.clippingPlanes = [];
+    this.renderer.autoClear = false;
+    this.renderer.render(this.helpers, this.camera);
 
     const deltaTime = (time - this.renderTime) / 1000;
     this.renderTime = time;
     this.emitEvent({ type: "render", time, deltaTime });
+
+    this.renderer.autoClear = true;
+    this.renderer.clippingPlanes = clippingPlanes;
+
+    this.renderNeeded = false;
   }
 
   public update(force = false): void {
@@ -208,7 +251,30 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     return Promise.resolve(this);
   }
 
-  async open(file: File | Assembly | Model): Promise<this> {
+  /**
+   * Loads a file from Open Cloud Server into the viewer.
+   *
+   * The file geometry data on the server must be converted to `glTF` format.
+   *
+   * This method requires a `Client` instance to be specified when creating the viewer to load
+   * model reference files from the Open Cloud Server. For a standalone viewer instance use
+   * {@link openGltfFile | openGltfFile()}.
+   *
+   * Fires:
+   *
+   * - {@link OpenEvent | open}
+   * - {@link GeometryStartEvent | geometrystart}
+   * - {@link GeometryProgressEvent | geometryprogress}
+   * - {@link DatabaseChunkEvent | databasechunk}
+   * - {@link GeometryChunkEvent | geometrychunk}
+   * - {@link GeometryEndEvent | geometryend}
+   * - {@link GeometryErrorEvent | geometryerror}
+   *
+   * @param file - File, assembly or specific model to load. If a `File` instance with multiple
+   *   models is specified, the default model will be loaded. If there is no default model,
+   *   first availiable model will be loaded.
+   */
+  async open(file: Model | File | Assembly): Promise<this> {
     if (!this.renderer) return this;
 
     this.cancel();
@@ -240,9 +306,40 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     return this;
   }
 
+  /**
+   * Loads a `glTF` file into the viewer.
+   *
+   * Fires:
+   *
+   * - {@link OpenEvent | open}
+   * - {@link GeometryStartEvent | geometrystart}
+   * - {@link GeometryProgressEvent | geometryprogress}
+   * - {@link DatabaseChunkEvent | databasechunk}
+   * - {@link GeometryEndEvent | geometryend}
+   * - {@link GeometryErrorEvent | geometryerror}
+   *
+   * @param file - File URL or binary data buffer to load.
+   * @param externalData - External resource map such as binary data buffers or images. Each
+   *   resource should be represented by a `uri` and a corresponding resource URL, or
+   *   {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object, or
+   *   {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
+   *   or {@link https://developer.mozilla.org/docs/Web/API/Blob/Blob | Blob}, or
+   *   {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string,
+   * @param params - Loader parameters.
+   * @param params.path - The base path from which to find subsequent glTF resources such as
+   *   textures and .bin data files. If not defined, the base path of the file URL will be used.
+   * @param params.requestHeader - The
+   *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used
+   *   in HTTP request.
+   * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url
+   *   from a different domain that allows CORS. Default is `anonymous`.
+   * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as
+   *   cookies, authorization headers or TLS client certificates. See
+   *   {@link https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
+   */
   openGltfFile(
-    file: string | ArrayBuffer | Blob,
-    externalData: Map<string, string | ArrayBuffer | Blob> = new Map(),
+    file: string | globalThis.File | ArrayBuffer | Blob,
+    externalData: Map<string, string | globalThis.File | ArrayBuffer | Blob> = new Map(),
     params: {
       path?: string;
       requestHeader?: HeadersInit;
@@ -260,9 +357,40 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     return this.loadGltfFile(file, externalData, params);
   }
 
+  /**
+   * Appends a `glTF` file to the existing opened file.
+   *
+   * Fires:
+   *
+   * - {@link OpenEvent | open}
+   * - {@link GeometryStartEvent | geometrystart}
+   * - {@link GeometryProgressEvent | geometryprogress}
+   * - {@link DatabaseChunkEvent | databasechunk}
+   * - {@link GeometryEndEvent | geometryend}
+   * - {@link GeometryErrorEvent | geometryerror}
+   *
+   * @param file - File URL or binary data buffer to load.
+   * @param externalData - External resource map such as binary data buffers or images. Each
+   *   resource should be represented by a `uri` and a corresponding resource URL, or
+   *   {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object, or
+   *   {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
+   *   or {@link https://developer.mozilla.org/docs/Web/API/Blob/Blob | Blob}, or
+   *   {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string,
+   * @param params - Loader parameters.
+   * @param params.path - The base path from which to find subsequent glTF resources such as
+   *   textures and .bin data files.
+   * @param params.requestHeader - The
+   *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used
+   *   in HTTP request.
+   * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url
+   *   from a different domain that allows CORS. Default is `anonymous`.
+   * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as
+   *   cookies, authorization headers or TLS client certificates. See
+   *   {@link https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
+   */
   async loadGltfFile(
-    file: string | ArrayBuffer | Blob,
-    externalData: Map<string, string | ArrayBuffer | Blob> = new Map(),
+    file: string | globalThis.File | ArrayBuffer | Blob,
+    externalData: Map<string, string | globalThis.File | ArrayBuffer | Blob> = new Map(),
     params: {
       path?: string;
       requestHeader?: HeadersInit;
@@ -291,11 +419,13 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
 
       this.models.push(gltf);
       this.scene.add(gltf.scene);
+
       this.update();
+      this.resetActiveDragger();
 
       this.emitEvent({ type: "databasechunk" });
       this.emitEvent({ type: "geometryend", data: gltf.scene });
-    } catch (error: any) {
+    } catch (error) {
       this.emitEvent({ type: "geometryerror", data: error });
       throw error;
     } finally {
@@ -306,6 +436,8 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
   }
 
   clear(): this {
+    if (!this.renderer) return this;
+
     function disposeMaterial(material: any) {
       const materials = Array.isArray(material) ? material : [material];
       materials.forEach((material: any) => {
@@ -319,14 +451,22 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
       if (object.material) disposeMaterial(object.material);
     }
 
-    this.selectedObjects = [];
+    this.setActiveDragger();
+
+    this.selected = [];
+    this.renderer.clippingPlanes = [];
+
+    this.helpers.traverse(disposeObject);
+    this.helpers.clear();
 
     this.models.forEach((gltf) => gltf.scene.traverse(disposeObject));
     this.models.forEach((gltf) => gltf.scene.removeFromParent());
     this.models = [];
 
-    this.update();
+    this.scene.clear();
+
     this.emitEvent({ type: "clear" });
+    this.update(true);
 
     return this;
   }
@@ -335,17 +475,29 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     return this._activeDragger;
   }
 
-  setActiveDragger(name: string): IDragger | null {
+  setActiveDragger(name = ""): IDragger | null {
     if (!this._activeDragger || this._activeDragger.name !== name) {
       if (this._activeDragger) {
         this._activeDragger.dispose();
         this._activeDragger = null;
       }
-      const Constructor = this.draggerFactory[name];
-      if (Constructor) {
-        this._activeDragger = new Constructor(this);
-        this._activeDragger.name = name;
+      if (this.isInitialized()) {
+        const Constructor = this.draggerFactory[name];
+        if (Constructor) {
+          this._activeDragger = new Constructor(this);
+          this._activeDragger.name = name;
+        }
       }
+      const canvas = this.canvas;
+      if (canvas) {
+        canvas.className = canvas.className
+          .split(" ")
+          .filter((x) => !x.startsWith("oda-cursor-"))
+          .filter((x) => x)
+          .concat(`oda-cursor-${name.toLowerCase()}`)
+          .join(" ");
+      }
+      this.emitEvent({ type: "changeactivedragger", data: name });
     }
     return this._activeDragger;
   }
@@ -353,22 +505,39 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
   resetActiveDragger(): void {
     const dragger = this._activeDragger;
     if (dragger) {
-      this.setActiveDragger("");
+      this.setActiveDragger();
       this.setActiveDragger(dragger.name);
     }
   }
 
   is3D(): boolean {
-    return false;
+    return true;
+  }
+
+  getSelected(): string[] {
+    return this.executeCommand("getSelected");
+  }
+
+  setSelected(handles?: string[]): void {
+    this.executeCommand("setSelected", handles);
   }
 
   executeCommand(id: string, ...args: any[]): any {
     return commands("ThreeJS").executeCommand(id, this, ...args);
   }
 
+  getComponent(type): any {
+    return this.components.find((component) => component instanceof type);
+  }
+
   drawViewpoint(viewpoint: IViewpoint): void {}
 
   createViewpoint(): IViewpoint {
-    return {};
+    const viewpoint: IViewpoint = {};
+
+    viewpoint.snapshot = { data: this.canvas?.toDataURL("image/jpeg", 0.25) };
+    viewpoint.description = new Date().toDateString();
+
+    return viewpoint;
   }
 }

package/src/Viewer/commands/ApplyModelTransform.ts

@@ -0,0 +1,33 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { Model, File, Assembly } from "@inweb/client";
+import { commands } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+// gltf root object don't have model handle
+function applyModelTransform(viewer: Viewer, model: Model | File | Assembly) {
+  console.warn("applyModelTransform not implemented");
+}
+
+commands("ThreeJS").registerCommand("applyModelTransform", applyModelTransform);

package/src/Viewer/commands/ClearMarkup.ts

@@ -0,0 +1,29 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { commands } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+// markup should be as a separate library
+commands("ThreeJS").registerCommand("clearMarkup", (viewer: Viewer) => console.warn("clearMarkup not implemented"));
+commands("ThreeJS").registerCommandAlias("clearMarkup", "clearOverlay");

package/src/Viewer/commands/ClearSlices.ts

@@ -0,0 +1,32 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { commands } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+function clearSlices(viewer: Viewer) {
+  viewer.renderer.clippingPlanes = [];
+  viewer.update();
+}
+
+commands("ThreeJS").registerCommand("clearSlices", clearSlices);