@inweb/viewer-three 26.6.6 → 26.7.0

package/lib/Viewer/Viewer.d.ts

@@ -3,6 +3,7 @@ import { EventEmitter2 } from "@inweb/eventemitter2";
 import { Assembly, Client, Model, File } from "@inweb/client";
 import { CanvasEventMap, FileSource, IComponent, IDragger, ILoader, IOptions, IViewer, IViewpoint, Options, OptionsEventMap, ViewerEventMap } from "@inweb/viewer-core";
 import { IMarkup, IWorldTransform } from "@inweb/markup";
+import { IModelImpl } from "./model";
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
  */
@@ -16,9 +17,9 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     helpers: Scene | undefined;
     camera: PerspectiveCamera | OrthographicCamera | undefined;
     renderer: WebGLRenderer | undefined;
-    models: Array<Object3D>;
-    loaders: Array<ILoader>;
-    selected: Array<Object3D>;
+    loaders: ILoader[];
+    models: IModelImpl[];
+    selected: Object3D[];
     extents: Box3;
     target: Vector3;
     private _activeDragger;
@@ -44,9 +45,8 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent<EventTarget>) => void): Promise<this>;
     dispose(): this;
     isInitialized(): boolean;
-    render(time: DOMHighResTimeStamp): void;
     update(force?: boolean): void;
-    syncOptions(options?: IOptions): void;
+    render(time: DOMHighResTimeStamp): void;
     loadReferences(model: Model | File | Assembly): Promise<this>;
     /**
      * Loads a file into the viewer.
@@ -137,6 +137,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     loadGltfFile(file: any, externalFiles: any, params?: any): Promise<this>;
     cancel(): this;
     clear(): this;
+    syncOptions(options?: IOptions): void;
     syncOverlay(): void;
     clearOverlay(): void;
     clearSlices(): void;

package/lib/Viewer/components/HighlighterComponent.d.ts

@@ -1,17 +1,18 @@
-import { LineBasicMaterial, MeshBasicMaterial } from "three";
+import { LineBasicMaterial, MeshBasicMaterial, Object3D, WebGLRenderTarget } from "three";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 import { IComponent, ResizeEvent } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 export declare class HighlighterComponent implements IComponent {
     protected viewer: Viewer;
+    renderTarget: WebGLRenderTarget;
     highlightMaterial: MeshBasicMaterial;
     outlineMaterial: LineMaterial;
     highlightLineMaterial: LineBasicMaterial;
     highlightLineGlowMaterial: LineMaterial;
     constructor(viewer: Viewer);
     dispose(): void;
-    highlight(object: any): void;
-    unhighlight(object: any): void;
+    highlight(objects: Object3D | Object3D[]): void;
+    unhighlight(objects: Object3D | Object3D[]): void;
     geometryEnd: () => void;
     optionsChange: () => void;
     viewerResize(event: ResizeEvent): void;

package/lib/Viewer/components/SelectionComponent.d.ts

@@ -1,7 +1,8 @@
 import { Intersection, Object3D, Raycaster, Vector2 } from "three";
-import { IComponent } from "@inweb/viewer-core";
-import { Viewer } from "../Viewer";
-import { HighlighterComponent } from "./HighlighterComponent";
+import type { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+import type { IModelImpl } from "../model";
+import type { HighlighterComponent } from "./HighlighterComponent";
 export declare class SelectionComponent implements IComponent {
     protected viewer: Viewer;
     protected raycaster: Raycaster;
@@ -13,8 +14,10 @@ export declare class SelectionComponent implements IComponent {
     onPointerUp: (event: PointerEvent) => void;
     onDoubleClick: (event: MouseEvent) => void;
     getMousePosition(event: MouseEvent, target: Vector2): Vector2;
-    getPointerIntersects(mouse: Vector2): Array<Intersection<Object3D>>;
-    select(object: any): void;
+    getPointerIntersects(mouse: Vector2, objects: Object3D[]): Array<Intersection<Object3D>>;
+    select(objects: Object3D | Object3D[], model?: IModelImpl): void;
+    deselect(objects: Object3D | Object3D[], model?: IModelImpl): void;
+    toggleSelection(objects: Object3D | Object3D[], model?: IModelImpl): void;
     clearSelection(): void;
     initHighlighter: () => void;
 }

package/lib/Viewer/draggers/CuttingPlaneDragger.d.ts

@@ -12,6 +12,6 @@ export declare class CuttingPlaneDragger extends OrbitDragger {
     dispose(): void;
     transformChange: () => void;
     transformDrag: (event: any) => void;
-    viewerExplode: () => void;
+    updatePlaneSize: () => void;
     onDoubleClick: (event: PointerEvent) => void;
 }

package/lib/Viewer/loaders/DynamicGltfLoader/DynamicModelImpl.d.ts

@@ -0,0 +1,20 @@
+import { Box3, Object3D } from "three";
+import { ModelImpl } from "../../model";
+import { DynamicGltfLoader } from "./DynamicGltfLoader.js";
+/**
+ * Dynamic model implementation.
+ */
+export declare class DynamicModelImpl extends ModelImpl {
+    gltfLoader: DynamicGltfLoader;
+    getExtents(target: Box3): Box3;
+    getObjects(): Object3D[];
+    getVisibleObjects(): Object3D[];
+    hasObject(object: any): boolean;
+    getObjectsByHandles(handles: string | string[]): Object3D[];
+    hideObjects(objects: Object3D | Object3D[]): this;
+    isolateObjects(objects: Object3D | Object3D[]): this;
+    showObjects(objects: Object3D | Object3D[]): this;
+    showAllObjects(): this;
+    showOriginalObjects(objects: Object3D | Object3D[]): this;
+    hideOriginalObjects(objects: Object3D | Object3D[]): this;
+}

package/lib/Viewer/loaders/GLTFCloudDynamicLoader.d.ts

@@ -0,0 +1,15 @@
+import { Group } from "three";
+import { ILoader, LoadParams } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+import { DynamicGltfLoader } from "./DynamicGltfLoader/DynamicGltfLoader.js";
+export declare class GLTFCloudDynamicLoader implements ILoader {
+    viewer: Viewer;
+    scene: Group;
+    gltfLoader: DynamicGltfLoader;
+    requestId: number;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    isSupport(file: any): boolean;
+    load(model: any, format?: string, params?: LoadParams): Promise<this>;
+    cancel(): void;
+}

package/lib/Viewer/model/IModelImpl.d.ts

@@ -0,0 +1,27 @@
+import { Box3, Object3D } from "three";
+import { ILoader, IViewer } from "@inweb/viewer-core";
+/**
+ * Model interface.
+ */
+export interface IModelImpl {
+    handle: string;
+    scene: Object3D;
+    loader: ILoader;
+    viewer: IViewer;
+    dispose(): void;
+    getExtents(target: Box3): Box3;
+    getObjects(): Object3D[];
+    getVisibleObjects(): Object3D[];
+    hasObject(objects: Object3D): boolean;
+    getOwnObjects(objects: Object3D | Object3D[]): Object3D[];
+    getObjectsByHandles(handles: string | string[]): Object3D[];
+    getHandlesByObjects(objects: Object3D | Object3D[]): string[];
+    hideObjects(objects: Object3D | Object3D[]): this;
+    hideAllObjects(): this;
+    isolateObjects(objects: Object3D | Object3D[]): this;
+    showObjects(objects: Object3D | Object3D[]): this;
+    showAllObjects(): this;
+    showOriginalObjects(objects: Object3D | Object3D[]): this;
+    hideOriginalObjects(objects: Object3D | Object3D[]): this;
+    explode(scale: number, coeff?: number): this;
+}

package/lib/Viewer/model/ModelImpl.d.ts

@@ -0,0 +1,30 @@
+import { Box3, Object3D } from "three";
+import { ILoader } from "@inweb/viewer-core";
+import { IModelImpl } from "./IModelImpl";
+import { Viewer } from "../Viewer";
+/**
+ * Basic model implementation.
+ */
+export declare class ModelImpl implements IModelImpl {
+    handle: string;
+    scene: Object3D;
+    loader: ILoader;
+    viewer: Viewer;
+    constructor(scene: Object3D);
+    dispose(): void;
+    getExtents(target: Box3): Box3;
+    getObjects(): Object3D[];
+    getVisibleObjects(): Object3D[];
+    hasObject(object: Object3D): boolean;
+    getOwnObjects(objects: Object3D | Object3D[]): Object3D[];
+    getObjectsByHandles(handles: string | string[]): Object3D[];
+    getHandlesByObjects(objects: Object3D | Object3D[]): string[];
+    hideObjects(objects: Object3D | Object3D[]): this;
+    hideAllObjects(): this;
+    isolateObjects(objects: Object3D | Object3D[]): this;
+    showObjects(objects: Object3D | Object3D[]): this;
+    showAllObjects(): this;
+    showOriginalObjects(objects: Object3D | Object3D[]): this;
+    hideOriginalObjects(objects: Object3D | Object3D[]): this;
+    explode(scale?: number, coeff?: number): this;
+}

package/lib/Viewer/model/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./IModelImpl";
+export * from "./ModelImpl";

package/lib/index.d.ts

@@ -3,6 +3,7 @@ export * from "./Viewer/commands";
 export * from "./Viewer/components";
 export * from "./Viewer/loaders";
 export * from "./Viewer/loaders/GLTFLoadingManager";
+export * from "./Viewer/model";
 export * from "./Viewer/Viewer";
 export * from "@inweb/viewer-core";
 export * from "@inweb/markup";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.6.6",
+  "version": "26.7.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",
@@ -26,15 +26,19 @@
     "plugins"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.js",
-    "test": "karma start karma.conf.js",
+    "build": "npm run build:viewer && npm run build:plugins",
+    "build:viewer": "rollup -c rollup.config.js",
+    "build:plugins": "rollup -c rollup.plugins.config.js",
+    "test": "npm run test:viewer && npm run test:plugins",
+    "test:viewer": "karma start karma.conf.js",
+    "test:plugins": "karma start karma.plugins.conf.js",
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.6.6",
-    "@inweb/eventemitter2": "~26.6.6",
-    "@inweb/markup": "~26.6.6",
-    "@inweb/viewer-core": "~26.6.6"
+    "@inweb/client": "~26.7.0",
+    "@inweb/eventemitter2": "~26.7.0",
+    "@inweb/markup": "~26.7.0",
+    "@inweb/viewer-core": "~26.7.0"
   },
   "devDependencies": {
     "@types/three": "^0.173.0",

package/plugins/components/AxesHelperComponent.ts

@@ -33,8 +33,8 @@ class AxesHelperComponent implements IComponent {
     this.axesHelper1 = new AxesHelper();
     this.axesHelper2 = new AxesHelper();
     this.viewer = viewer;
-    this.viewer.addEventListener("geometryend", this.geometryEnd);
-    this.viewer.addEventListener("clear", this.geometryEnd);
+    this.viewer.addEventListener("geometryend", this.syncHelper);
+    this.viewer.addEventListener("clear", this.syncHelper);
   }
 
   dispose() {
@@ -44,11 +44,11 @@ class AxesHelperComponent implements IComponent {
     this.axesHelper2.removeFromParent();
     this.axesHelper2.dispose();
 
-    this.viewer.removeEventListener("geometryend", this.geometryEnd);
-    this.viewer.removeEventListener("clear", this.geometryEnd);
+    this.viewer.removeEventListener("geometryend", this.syncHelper);
+    this.viewer.removeEventListener("clear", this.syncHelper);
   }
 
-  geometryEnd = () => {
+  syncHelper = () => {
     this.axesHelper1.removeFromParent();
     this.axesHelper1.dispose();
 

package/plugins/components/ExtentsHelperComponent.ts

@@ -31,21 +31,29 @@ class ExtentsHelperComponent implements IComponent {
   constructor(viewer: Viewer) {
     this.boxHelper = new Box3Helper(new Box3(), "#ff0000");
     this.viewer = viewer;
-    this.viewer.on("geometryend", this.geometryEnd);
-    this.viewer.on("explode", this.geometryEnd);
-    this.viewer.on("clear", this.geometryEnd);
+    this.viewer.on("geometryend", this.syncHelper);
+    this.viewer.on("clear", this.syncHelper);
+    this.viewer.on("explode", this.syncHelper);
+    this.viewer.on("hide", this.syncHelper);
+    this.viewer.on("isolate", this.syncHelper);
+    this.viewer.on("show", this.syncHelper);
+    this.viewer.on("showall", this.syncHelper);
   }
 
   dispose() {
     this.boxHelper.removeFromParent();
     this.boxHelper.dispose();
 
-    this.viewer.off("geometryend", this.geometryEnd);
-    this.viewer.off("explode", this.geometryEnd);
-    this.viewer.off("clear", this.geometryEnd);
+    this.viewer.off("geometryend", this.syncHelper);
+    this.viewer.off("clear", this.syncHelper);
+    this.viewer.off("explode", this.syncHelper);
+    this.viewer.off("hide", this.syncHelper);
+    this.viewer.off("isolate", this.syncHelper);
+    this.viewer.off("show", this.syncHelper);
+    this.viewer.off("showall", this.syncHelper);
   }
 
-  geometryEnd = () => {
+  syncHelper = () => {
     this.boxHelper.removeFromParent();
 
     if (this.viewer.extents.isEmpty()) return;

package/plugins/components/LightHelperComponent.ts

@@ -31,8 +31,8 @@ class LightHelperComponent implements IComponent {
   constructor(viewer: Viewer) {
     this.lightHelpers = [];
     this.viewer = viewer;
-    this.viewer.addEventListener("geometryend", this.geometryEnd);
-    this.viewer.addEventListener("clear", this.geometryEnd);
+    this.viewer.addEventListener("geometryend", this.syncHelper);
+    this.viewer.addEventListener("clear", this.syncHelper);
   }
 
   dispose() {
@@ -42,11 +42,11 @@ class LightHelperComponent implements IComponent {
     });
     this.lightHelpers.length = 0;
 
-    this.viewer.removeEventListener("geometryend", this.geometryEnd);
-    this.viewer.removeEventListener("clear", this.geometryEnd);
+    this.viewer.removeEventListener("geometryend", this.syncHelper);
+    this.viewer.removeEventListener("clear", this.syncHelper);
   }
 
-  geometryEnd = () => {
+  syncHelper = () => {
     this.lightHelpers.forEach((helper) => {
       helper.removeFromParent();
       helper.dispose();

package/{src/Viewer/loaders/GLTFCloudModelLoader.ts → plugins/loaders/GLTFCloudLoader.ts}

@@ -22,12 +22,9 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { Loader } from "@inweb/viewer-core";
+import { GLTFLoadingManager, Loader, loaders, ModelImpl, Viewer } from "@inweb/viewer-three";
 
-import { Viewer } from "../Viewer";
-import { GLTFLoadingManager } from "./GLTFLoadingManager";
-
-export class GLTFCloudModelLoader extends Loader {
+class GLTFCloudLoader extends Loader {
   public viewer: Viewer;
 
   constructor(viewer: Viewer) {
@@ -35,12 +32,12 @@ export class GLTFCloudModelLoader extends Loader {
     this.viewer = viewer;
   }
 
-  override isSupport(model: any): boolean {
+  override isSupport(file: any): boolean {
     return (
-      typeof model === "object" &&
-      typeof model.database === "string" &&
-      typeof model.downloadResource === "function" &&
-      /.gltf$/i.test(model.database)
+      typeof file === "object" &&
+      typeof file.database === "string" &&
+      typeof file.downloadResource === "function" &&
+      /.gltf$/i.test(file.database)
     );
   }
 
@@ -60,8 +57,12 @@ export class GLTFCloudModelLoader extends Loader {
     const gltf = await loader.loadAsync(url, progress);
     if (!this.viewer.scene) return this;
 
-    this.viewer.scene.add(gltf.scene);
-    this.viewer.models.push(gltf.scene);
+    const modelImpl = new ModelImpl(gltf.scene);
+    modelImpl.loader = this;
+    modelImpl.viewer = this.viewer;
+
+    this.viewer.scene.add(modelImpl.scene);
+    this.viewer.models.push(modelImpl);
 
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
@@ -72,3 +73,5 @@ export class GLTFCloudModelLoader extends Loader {
     return this;
   }
 }
+
+loaders.registerLoader("gltf-cloud", (viewer: any) => new GLTFCloudLoader(viewer));

package/plugins/loaders/{IFCXCloudFileLoader.ts → IFCXCloudLoader.ts}

@@ -21,10 +21,10 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Loader, Viewer } from "@inweb/viewer-three";
+import { Loader, ModelImpl, Viewer } from "@inweb/viewer-three";
 import { parse, clear } from "./IFCX/render.js";
 
-export class IFCXCloudFileLoader extends Loader {
+export class IFCXCloudLoader extends Loader {
   public viewer: Viewer;
 
   constructor(viewer: Viewer) {
@@ -61,8 +61,12 @@ export class IFCXCloudFileLoader extends Loader {
       handle++;
     });
 
-    this.viewer.scene.add(scene);
-    this.viewer.models.push(scene);
+    const modelImpl = new ModelImpl(scene);
+    modelImpl.loader = this;
+    modelImpl.viewer = this.viewer;
+
+    this.viewer.scene.add(modelImpl.scene);
+    this.viewer.models.push(modelImpl);
 
     this.viewer.syncOptions();
     this.viewer.syncOverlay();

package/plugins/loaders/IFCXFileLoader.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { GLTFLoadingManager, GLTFLoadParams, Loader, Viewer } from "@inweb/viewer-three";
+import { GLTFLoadingManager, GLTFLoadParams, Loader, ModelImpl, Viewer } from "@inweb/viewer-three";
 import { IFCXLoader } from "./IFCX/IFCXLoader";
 
 export class IFCXFileLoader extends Loader {
@@ -62,8 +62,12 @@ export class IFCXFileLoader extends Loader {
       handle++;
     });
 
-    this.viewer.scene.add(scene);
-    this.viewer.models.push(scene);
+    const modelImpl = new ModelImpl(scene);
+    modelImpl.loader = this;
+    modelImpl.viewer = this.viewer;
+
+    this.viewer.scene.add(modelImpl.scene);
+    this.viewer.models.push(modelImpl);
 
     this.viewer.syncOptions();
     this.viewer.syncOverlay();

package/plugins/loaders/IFCXLoader.ts

@@ -24,7 +24,7 @@
 import { loaders } from "@inweb/viewer-three";
 
 import { IFCXFileLoader } from "./IFCXFileLoader";
-import { IFCXCloudFileLoader } from "./IFCXCloudFileLoader";
+import { IFCXCloudLoader } from "./IFCXCloudLoader";
 
 loaders.registerLoader("ifcx-file", (viewer: any) => new IFCXFileLoader(viewer));
-loaders.registerLoader("ifcx-cloud-file", (viewer: any) => new IFCXCloudFileLoader(viewer));
+loaders.registerLoader("ifcx-cloud", (viewer: any) => new IFCXCloudLoader(viewer));

package/src/Viewer/Viewer.ts

@@ -62,6 +62,7 @@ import { draggers } from "./draggers";
 import { commands } from "./commands";
 import { components } from "./components";
 import { loaders } from "./loaders";
+import { IModelImpl } from "./model";
 
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
@@ -82,14 +83,14 @@ export class Viewer
   public helpers: Scene | undefined;
   public camera: PerspectiveCamera | OrthographicCamera | undefined;
   public renderer: WebGLRenderer | undefined;
-  public models: Array<Object3D>;
-  public loaders: Array<ILoader>;
-  public selected: Array<Object3D>;
+  public loaders: ILoader[];
+  public models: IModelImpl[];
+  public selected: Object3D[];
   public extents: Box3;
   public target: Vector3;
 
   private _activeDragger: IDragger | null;
-  private _components: Array<IComponent>;
+  private _components: IComponent[];
 
   private renderNeeded: boolean;
   private renderTime: DOMHighResTimeStamp;
@@ -110,8 +111,8 @@ export class Viewer
     this.canvasEvents = CANVAS_EVENTS;
     this.canvaseventlistener = (event: Event) => this.emit(event);
 
-    this.models = [];
     this.loaders = [];
+    this.models = [];
     this.selected = [];
     this.extents = new Box3();
     this.target = new Vector3();
@@ -154,6 +155,7 @@ export class Viewer
     this.scene = new Scene();
     this.helpers = new Scene();
 
+    const pixelRatio = window.devicePixelRatio;
     const rect = canvas.parentElement.getBoundingClientRect();
     const width = rect.width || 1;
     const height = rect.height || 1;
@@ -161,8 +163,15 @@ export class Viewer
     this.camera = new PerspectiveCamera(45, aspect, 0.01, 1000);
     this.camera.up.set(0, 0, 1);
 
-    this.renderer = new WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true });
-    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer = new WebGLRenderer({
+      canvas,
+      antialias: true,
+      alpha: true,
+      preserveDrawingBuffer: true,
+      powerPreference: "high-performance",
+      logarithmicDepthBuffer: false,
+    });
+    this.renderer.setPixelRatio(pixelRatio);
     this.renderer.setSize(width, height);
     this.renderer.toneMapping = LinearToneMapping;
 
@@ -223,7 +232,13 @@ export class Viewer
     return !!this.renderer;
   }
 
-  public render(time: DOMHighResTimeStamp): void {
+  update(force = false): void {
+    this.renderNeeded = true;
+    if (force) this.render(performance.now());
+    this.emitEvent({ type: "update", data: force });
+  }
+
+  render(time: DOMHighResTimeStamp): void {
     if (!this.renderNeeded) return;
     if (!this.renderer) return;
 
@@ -246,16 +261,6 @@ export class Viewer
     this.emitEvent({ type: "render", time, deltaTime });
   }
 
-  public update(force = false): void {
-    this.renderNeeded = true;
-    if (force) this.render(performance.now());
-    this.emitEvent({ type: "update", data: force });
-  }
-
-  public syncOptions(options: IOptions = this.options): void {
-    // this.update();
-  }
-
   loadReferences(model: Model | File | Assembly): Promise<this> {
     // todo: load reference as text fonts
     return Promise.resolve(this);
@@ -360,7 +365,7 @@ export class Viewer
     if (!format && typeof file === "string") format = file.split(".").pop();
     if (!format && file instanceof globalThis.File) format = file.name.split(".").pop();
 
-    const loader = loaders.createLoader(this, model, format);
+    const loader: ILoader = loaders.createLoader(this, model, format);
     if (!loader) throw new Error(`Format not supported`);
     this.loaders.push(loader);
 
@@ -405,33 +410,20 @@ export class Viewer
   clear(): this {
     if (!this.renderer) return this;
 
-    function disposeMaterial(material: any) {
-      const materials = Array.isArray(material) ? material : [material];
-      materials.forEach((material: any) => material.dispose());
-    }
-
-    function disposeObject(object: any) {
-      if (object.geometry) object.geometry.dispose();
-      if (object.material) disposeMaterial(object.material);
-    }
-
     this.setActiveDragger();
     this.clearSlices();
     this.clearOverlay();
     this.clearSelected();
 
-    this.helpers.traverse(disposeObject);
-    this.helpers.clear();
+    this.loaders.forEach((loader) => loader.dispose());
+    this.loaders = [];
 
-    this.models.forEach((model) => model.traverse(disposeObject));
-    this.models.forEach((model) => model.removeFromParent());
+    this.models.forEach((model) => model.dispose());
     this.models = [];
 
+    this.helpers.clear();
     this.scene.clear();
 
-    this.loaders.forEach((loader) => loader.dispose());
-    this.loaders = [];
-
     this.syncOptions();
     this.syncOverlay();
     this.update(true);
@@ -441,6 +433,10 @@ export class Viewer
     return this;
   }
 
+  syncOptions(options: IOptions = this.options): void {
+    // this.update();
+  }
+
   syncOverlay(): void {
     if (!this.renderer) return;
 

package/src/Viewer/commands/ClearSelected.ts

@@ -22,11 +22,10 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import type { Viewer } from "../Viewer";
+import type { SelectionComponent } from "../components/SelectionComponent";
 
 export function clearSelected(viewer: Viewer): void {
-  const selection: any = viewer.getComponent("SelectionComponent");
-  if (!selection) return;
-
+  const selection = viewer.getComponent("SelectionComponent") as SelectionComponent;
   selection.clearSelection();
 
   viewer.update();