@inweb/viewer-three 26.10.6 → 26.11.1

package/dist/viewer-three.module.js

@@ -23,12 +23,11 @@
 
 import { draggersRegistry, commandsRegistry, Options, componentsRegistry, Loader, loadersRegistry, CANVAS_EVENTS } from '@inweb/viewer-core';
 export * from '@inweb/viewer-core';
-import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Matrix4, Vector4, MathUtils, Raycaster, EdgesGeometry, Controls, Clock, Sphere, Box3, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
+import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Matrix4, Vector4, MathUtils, Raycaster, EdgesGeometry, Controls, Clock, Sphere, Box3, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, LoadingManager, LoaderUtils, FileLoader, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
 import { Wireframe } from 'three/examples/jsm/lines/Wireframe.js';
 import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
@@ -2060,7 +2059,8 @@ function clearSelected(viewer) {
     const selection = viewer.getComponent("SelectionComponent");
     selection.clearSelection();
     viewer.update();
-    viewer.emitEvent({ type: "select", data: undefined, handles: [] });
+    viewer.emitEvent({ type: "select", handles: [] });
+    viewer.emitEvent({ type: "select2", handles: [] });
 }
 
 function clearSlices(viewer) {
@@ -2149,22 +2149,31 @@ function getDefaultViewPositions() {
 }
 
 function getModels(viewer) {
-    return viewer.models.map((model) => model.handle);
+    return viewer.models.map((model) => model.id);
 }
 
 function getSelected(viewer) {
-    const handles = [];
-    viewer.models.forEach((model) => handles.push(...model.getHandlesByObjects(viewer.selected)));
+    const handles2 = viewer.executeCommand("getSelected2");
+    const handles = handles2.map((handle) => handle.slice(handle.indexOf(":") + 1));
     return handles;
 }
 
+function getSelected2(viewer) {
+    const handles2 = [];
+    viewer.models.forEach((model) => {
+        handles2.push(...model.getHandlesByObjects(viewer.selected));
+    });
+    return handles2;
+}
+
 function hideSelected(viewer) {
     viewer.models.forEach((model) => model.hideObjects(viewer.selected));
     const selection = viewer.getComponent("SelectionComponent");
     selection.clearSelection();
     viewer.update();
     viewer.emitEvent({ type: "hide" });
-    viewer.emitEvent({ type: "select", data: undefined, handles: [] });
+    viewer.emitEvent({ type: "select", handles: [] });
+    viewer.emitEvent({ type: "select2", handles: [] });
 }
 
 function isolateSelected(viewer) {
@@ -2191,14 +2200,13 @@ function resetView(viewer) {
     viewer.emit({ type: "resetview" });
 }
 
-function selectModel(viewer, handle) {
+function selectModel(viewer, id) {
     const selection = viewer.getComponent("SelectionComponent");
     selection.clearSelection();
-    viewer.models
-        .filter((model) => model.handle === handle)
-        .forEach((model) => selection.select(model.getObjects(), model));
+    viewer.models.filter((model) => model.id === id).forEach((model) => selection.select(model.getObjects(), model));
     viewer.update();
-    viewer.emit({ type: "select", data: [] });
+    viewer.emitEvent({ type: "select", handles: viewer.getSelected() });
+    viewer.emitEvent({ type: "select2", handles: viewer.getSelected2() });
 }
 
 function setActiveDragger(viewer, dragger = "") {
@@ -2210,16 +2218,31 @@ function setMarkupColor(viewer, r = 255, g = 0, b = 0) {
 }
 
 function setSelected(viewer, handles = []) {
-    const selection = viewer.getComponent("SelectionComponent");
-    selection.clearSelection();
+    const handles2 = [];
+    handles.forEach((handle) => {
+        if (handle.includes(":")) {
+            handles2.push(handle);
+        }
+        else
+            viewer.models.forEach((model) => {
+                handles2.push(`${model.id}:${handle}`);
+            });
+    });
+    viewer.executeCommand("setSelected2", handles2);
+}
+
+function setSelected2(viewer, handles = []) {
+    const selectionComponent = viewer.getComponent("SelectionComponent");
+    selectionComponent.clearSelection();
     viewer.models.forEach((model) => {
         const objects = model.getObjectsByHandles(handles);
         model.showObjects(objects);
-        selection.select(objects, model);
+        selectionComponent.select(objects, model);
     });
     viewer.update();
     viewer.emitEvent({ type: "show" });
-    viewer.emitEvent({ type: "select", data: undefined, handles });
+    viewer.emitEvent({ type: "select", data: undefined, handles: viewer.getSelected() });
+    viewer.emitEvent({ type: "select2", data: undefined, handles });
 }
 
 function showAll(viewer) {
@@ -2233,21 +2256,19 @@ function zoomToExtents(viewer) {
 }
 
 function zoomToObjects(viewer, handles = []) {
-    const handleSet = new Set(handles);
-    const objects = [];
-    viewer.scene.traverseVisible((child) => {
-        var _a;
-        if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle))
-            objects.push(child);
+    const extents = new Box3();
+    viewer.models.forEach((model) => {
+        const objects = model.getObjectsByHandles(handles);
+        objects.forEach((object) => extents.expandByObject(object));
     });
-    const extents = objects.reduce((result, object) => result.expandByObject(object), new Box3());
     if (extents.isEmpty())
         extents.copy(viewer.extents);
     zoomTo(viewer, extents);
 }
 
 function zoomToSelected(viewer) {
-    const extents = viewer.selected.reduce((result, object) => result.expandByObject(object), new Box3());
+    const extents = new Box3();
+    viewer.selected.forEach((object) => extents.expandByObject(object));
     if (extents.isEmpty())
         extents.copy(viewer.extents);
     zoomTo(viewer, extents);
@@ -2264,6 +2285,7 @@ commands.registerCommand("explode", explode);
 commands.registerCommand("getDefaultViewPositions", getDefaultViewPositions);
 commands.registerCommand("getModels", getModels);
 commands.registerCommand("getSelected", getSelected);
+commands.registerCommand("getSelected2", getSelected2);
 commands.registerCommand("hideSelected", hideSelected);
 commands.registerCommand("isolateSelected", isolateSelected);
 commands.registerCommand("regenerateAll", regenerateAll);
@@ -2273,6 +2295,7 @@ commands.registerCommand("setActiveDragger", setActiveDragger);
 commands.registerCommand("setDefaultViewPosition", setDefaultViewPosition);
 commands.registerCommand("setMarkupColor", setMarkupColor);
 commands.registerCommand("setSelected", setSelected);
+commands.registerCommand("setSelected2", setSelected2);
 commands.registerCommand("showAll", showAll);
 commands.registerCommand("zoomToExtents", zoomToExtents);
 commands.registerCommand("zoomToObjects", zoomToObjects);
@@ -2325,6 +2348,10 @@ class CameraComponent {
             this.switchCameraMode(this.viewer.options.cameraMode);
         };
         this.geometryEnd = () => {
+            if (this.viewer.models.length > 1) {
+                this.switchCamera(this.viewer.camera);
+                return;
+            }
             let camera;
             this.viewer.scene.traverse((object) => {
                 if (object.isCamera)
@@ -2422,6 +2449,8 @@ class ExtentsComponent {
             const extents = new Box3();
             this.viewer.models.forEach((model) => model.getExtents(extents));
             this.viewer.extents.copy(extents);
+            if (this.viewer.models.length > 1)
+                return;
             this.viewer.extents.getCenter(this.viewer.target);
         };
         this.viewer = viewer;
@@ -2770,6 +2799,7 @@ class SelectionComponent {
             }
             this.viewer.update();
             this.viewer.emitEvent({ type: "select", data: undefined, handles: this.viewer.getSelected() });
+            this.viewer.emitEvent({ type: "select2", data: undefined, handles: this.viewer.getSelected2() });
         };
         this.onDoubleClick = (event) => {
             if (event.button !== 0)
@@ -3014,48 +3044,8 @@ components.registerComponent("SelectionComponent", (viewer) => new SelectionComp
 components.registerComponent("WCSHelperComponent", (viewer) => new WCSHelperComponent(viewer));
 components.registerComponent("ResetComponent", (viewer) => new ResetComponent(viewer));
 
-class GLTFLoadingManager extends LoadingManager {
-    constructor(file, params = {}) {
-        super();
-        this.path = "";
-        this.resourcePath = "";
-        this.fileURL = "";
-        this.dataURLs = new Map();
-        this.path = params.path || "";
-        const externalFiles = params.externalFiles || new Map();
-        if (typeof file === "string") {
-            this.fileURL = file;
-            this.resourcePath = LoaderUtils.extractUrlBase(file);
-        }
-        else {
-            externalFiles.forEach((value, key) => (this.fileURL = value === file ? key : this.fileURL));
-            externalFiles.set(this.fileURL, file);
-        }
-        externalFiles.forEach((value, key) => {
-            let dataURL;
-            if (typeof value === "string")
-                dataURL = value;
-            else
-                dataURL = URL.createObjectURL(new Blob([value]));
-            this.dataURLs.set(key, dataURL);
-        });
-        this.setURLModifier((url) => {
-            const key = decodeURI(url)
-                .replace(this.path, "")
-                .replace(this.resourcePath, "")
-                .replace(/^(\.?\/)/, "");
-            const dataURL = this.dataURLs.get(key);
-            return dataURL !== null && dataURL !== void 0 ? dataURL : url;
-        });
-    }
-    dispose() {
-        this.dataURLs.forEach(URL.revokeObjectURL);
-    }
-}
-
 class ModelImpl {
     constructor(scene) {
-        this.handle = "1";
         this.scene = scene;
     }
     dispose() {
@@ -3097,27 +3087,45 @@ class ModelImpl {
         }
         return false;
     }
+    hasHandle(handle) {
+        return !handle.includes(":") || handle.split(":", 1)[0] === this.id + "";
+    }
     getOwnObjects(objects) {
         if (!Array.isArray(objects))
             objects = [objects];
         return objects.filter((object) => this.hasObject(object));
     }
+    getOwnHandles(handles) {
+        if (!Array.isArray(handles))
+            handles = [handles];
+        return handles.filter((handle) => this.hasHandle(handle));
+    }
     getObjectsByHandles(handles) {
-        const handleSet = new Set(handles);
+        const ownHandles = this.getOwnHandles(handles);
+        if (ownHandles.length === 0)
+            return [];
+        const handleSet = new Set(ownHandles.map((handle) => handle.slice(handle.indexOf(":") + 1)));
         const objects = [];
-        this.scene.traverse((object) => handleSet.has(object.userData.handle) && objects.push(object));
+        this.scene.traverse((object) => {
+            const handle = object.userData.handle;
+            if (handle && handleSet.has(handle))
+                objects.push(object);
+        });
         return objects;
     }
     getHandlesByObjects(objects) {
-        if (!Array.isArray(objects))
-            objects = [objects];
-        const handlesSet = new Set();
-        this.getOwnObjects(objects).forEach((object) => handlesSet.add(object.userData.handle));
-        return Array.from(handlesSet);
+        const ownObjects = this.getOwnObjects(objects);
+        if (ownObjects.length === 0)
+            return [];
+        const handleSet = new Set();
+        ownObjects.forEach((object) => {
+            const handle = object.userData.handle;
+            if (handle)
+                handleSet.add(`${this.id}:${handle}`);
+        });
+        return Array.from(handleSet);
     }
     hideObjects(objects) {
-        if (!Array.isArray(objects))
-            objects = [objects];
         this.getOwnObjects(objects).forEach((object) => (object.visible = false));
         return this;
     }
@@ -3133,8 +3141,6 @@ class ModelImpl {
         return this;
     }
     showObjects(objects) {
-        if (!Array.isArray(objects))
-            objects = [objects];
         this.getOwnObjects(objects).forEach((object) => {
             object.visible = true;
             object.traverseAncestors((parent) => (parent.visible = true));
@@ -3190,42 +3196,6 @@ class ModelImpl {
     }
 }
 
-class GLTFFileLoader extends Loader {
-    constructor(viewer) {
-        super();
-        this.viewer = viewer;
-    }
-    isSupport(file, format) {
-        return ((typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
-            /(gltf|glb)$/i.test(format));
-    }
-    async load(file, format, params) {
-        const manager = new GLTFLoadingManager(file, params);
-        const loader = new GLTFLoader(manager);
-        loader.setPath(manager.path);
-        loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
-        loader.setWithCredentials(params.withCredentials || loader.withCredentials);
-        const progress = (event) => {
-            const { lengthComputable, loaded, total } = event;
-            const progress = lengthComputable ? loaded / total : 1;
-            this.viewer.emitEvent({ type: "geometryprogress", data: progress, file });
-        };
-        const gltf = await loader.loadAsync(manager.fileURL, progress);
-        if (!this.viewer.scene)
-            return this;
-        const modelImpl = new ModelImpl(gltf.scene);
-        modelImpl.loader = this;
-        modelImpl.viewer = this.viewer;
-        this.viewer.scene.add(gltf.scene);
-        this.viewer.models.push(modelImpl);
-        this.viewer.syncOptions();
-        this.viewer.syncOverlay();
-        this.viewer.update();
-        this.viewer.emitEvent({ type: "databasechunk", data: gltf.scene, file });
-        return this;
-    }
-}
-
 class DynamicModelImpl extends ModelImpl {
     getExtents(target) {
         return target.union(this.gltfLoader.getTotalGeometryExtent());
@@ -3244,31 +3214,40 @@ class DynamicModelImpl extends ModelImpl {
         return this.gltfLoader.originalObjects.has(object);
     }
     getObjectsByHandles(handles) {
-        const handlesSet = new Set(handles);
+        const ownHandles = this.getOwnHandles(handles);
+        if (ownHandles.length === 0)
+            return [];
+        const handlesSet = new Set(ownHandles);
         const objects = [];
         handlesSet.forEach((handle) => {
-            const handle2 = `${this.modelId}_${handle}`;
-            const handles = this.gltfLoader.handleToObjects.get(handle2) || [];
-            objects.push(...Array.from(handles));
+            objects.push(...this.gltfLoader.getObjectsByHandle(handle));
         });
         return objects;
     }
     getHandlesByObjects(objects) {
-        const handles = super.getHandlesByObjects(objects);
-        return handles.map((x) => x.split("_").pop());
+        const ownObjects = this.getOwnObjects(objects);
+        if (ownObjects.length === 0)
+            return [];
+        const handleSet = new Set();
+        ownObjects.forEach((object) => {
+            const handle = object.userData.handle;
+            if (handle)
+                handleSet.add(handle);
+        });
+        return Array.from(handleSet);
     }
     hideObjects(objects) {
-        const handles = super.getHandlesByObjects(objects);
+        const handles = this.getHandlesByObjects(objects);
         this.gltfLoader.hideObjects(handles);
         return this;
     }
     isolateObjects(objects) {
-        const handles = super.getHandlesByObjects(objects);
+        const handles = this.getHandlesByObjects(objects);
         this.gltfLoader.isolateObjects(new Set(handles));
         return this;
     }
     showObjects(objects) {
-        const handles = super.getHandlesByObjects(objects);
+        const handles = this.getHandlesByObjects(objects);
         this.gltfLoader.showObjects(handles);
         return this;
     }
@@ -3332,11 +3311,13 @@ class GltfStructure {
     this.materials = new Map();
     this.textureCache = new Map();
     this.materialCache = new Map();
+    this.uri = "";
   }
   async initialize(loader) {
     this.json = await this.loadController.loadJson();
     this.baseUrl = await this.loadController.baseUrl();
     this.loader = loader;
+    this.uri = this.json.buffers[0].uri || "";
   }
   clear() {
     this.json = null;
@@ -3430,7 +3411,7 @@ class GltfStructure {
       await this.loader.waitForChunkSlot();
       try {
         const length = range.end - range.start;
-        const buffer = await this.loadController.loadBinaryData([{ offset: range.start, length }]);
+        const buffer = await this.loadController.loadBinaryData([{ offset: range.start, length }], this.uri);
         for (const req of range.requests) {
           const relOffset = req.offset - range.start;
           try {
@@ -3747,6 +3728,7 @@ class GltfStructure {
   }
 }
 
+const STRUCTURE_ID_SEPARATOR = ":";
 class DynamicGltfLoader {
   constructor(camera, scene, renderer) {
     this.camera = camera;
@@ -3759,6 +3741,7 @@ class DynamicGltfLoader {
       geometryerror: [],
       update: [],
       geometrymemory: [],
+      optimizationprogress: [],
     };
     this.loadDistance = 100;
     this.unloadDistance = 150;
@@ -3800,7 +3783,6 @@ class DynamicGltfLoader {
     this.hiddenHandles = new Set();
     this.newOptimizedObjects = new Set();
     this.oldOptimizeObjects = new Set();
-    this.maxConcurrentChunks = 8;
     this.activeChunkLoads = 0;
     this.chunkQueue = [];
     this.objectIdToIndex = new Map();
@@ -3809,6 +3791,7 @@ class DynamicGltfLoader {
     this.maxConcurrentChunks = 6;
     this.mergedObjectMap = new Map();
     this.mergedGeometryVisibility = new Map();
+    this._webglInfoCache = null;
   }
   setVisibleEdges(visible) {
     this.visibleEdges = visible;
@@ -3912,6 +3895,123 @@ class DynamicGltfLoader {
     this.updateMemoryIndicator();
     console.log(`Final memory usage: ${Math.round(currentMemoryUsage / (1024 * 1024))}MB`);
   }
+  getStats() {
+    let totalObjects = 0;
+    let renderedObjects = 0;
+    let totalTriangles = 0;
+    let renderedTriangles = 0;
+    let totalLines = 0;
+    let renderedLines = 0;
+    let totalEdges = 0;
+    let renderedEdges = 0;
+    this.scene.traverse((object) => {
+      totalObjects++;
+      const geometry = object.geometry;
+      if (!geometry) return;
+      let triCount = 0;
+      if (geometry.index) {
+        triCount = Math.floor(geometry.index.count / 3);
+      } else if (geometry.attributes && geometry.attributes.position) {
+        triCount = Math.floor(geometry.attributes.position.count / 3);
+      }
+      totalTriangles += triCount;
+      let lineCount = 0;
+      if (geometry.index) {
+        lineCount = Math.floor(geometry.index.count / 2);
+      } else if (geometry.attributes && geometry.attributes.position) {
+        lineCount = Math.floor(geometry.attributes.position.count / 2);
+      }
+      if (object.type === "Line" || object.type === "LineSegments" || object.type === "LineLoop") {
+        if (object.userData.isEdge) {
+          totalEdges += lineCount;
+        } else {
+          totalLines += lineCount;
+        }
+      }
+      if (object.visible !== false) {
+        if (object.isMesh || object.isLine || object.isPoints) {
+          renderedObjects++;
+          if (object.isMesh) {
+            renderedTriangles += triCount;
+          } else if (object.type === "Line" || object.type === "LineSegments" || object.type === "LineLoop") {
+            if (object.userData.isEdge) {
+              renderedEdges += lineCount;
+            } else {
+              renderedLines += lineCount;
+            }
+          }
+        }
+      }
+    });
+    const geometryCount = this.geometryCache ? this.geometryCache.size : 0;
+    const geometryMemoryBytes = Array.from(this.geometryCache?.values?.() || []).reduce((a, b) => a + b, 0);
+    const uniqueMaterialIds = new Set();
+    const uniqueTextureIds = new Set();
+    if (Array.isArray(this.structures)) {
+      for (const structure of this.structures) {
+        console.log(structure.materialCache.values());
+        try {
+          for (const entry of structure.materialCache.values()) {
+            if (entry?.mesh?.uuid) uniqueMaterialIds.add(entry.mesh.uuid);
+            if (entry?.points?.uuid) uniqueMaterialIds.add(entry.points.uuid);
+            if (entry?.lines?.uuid) uniqueMaterialIds.add(entry.lines.uuid);
+          }
+        } catch (exp) {
+          console.error("Error adding material to uniqueMaterialIds", exp);
+        }
+      }
+    }
+    const materialCount = uniqueMaterialIds.size;
+    const textureCount = uniqueTextureIds.size;
+    const estimatedGpuMemoryBytes = geometryMemoryBytes;
+    if (!this._webglInfoCache) {
+      try {
+        const gl = this.renderer.getContext();
+        const dbgInfo = gl.getExtension("WEBGL_debug_renderer_info");
+        if (dbgInfo) {
+          const rendererStr = gl.getParameter(dbgInfo.UNMASKED_RENDERER_WEBGL);
+          const vendorStr = gl.getParameter(dbgInfo.UNMASKED_VENDOR_WEBGL);
+          this._webglInfoCache = { renderer: rendererStr, vendor: vendorStr };
+        } else {
+          this._webglInfoCache = { renderer: null, vendor: null };
+        }
+      } catch (e) {
+        console.error("Error getting webgl info", e);
+        this._webglInfoCache = { renderer: null, vendor: null };
+      }
+    }
+    const size = new Vector2();
+    if (this.renderer && this.renderer.getSize) {
+      this.renderer.getSize(size);
+    }
+    return {
+      scene: {
+        beforeOptimization: {
+          objects: totalObjects - renderedObjects,
+          triangles: totalTriangles - renderedTriangles,
+          lines: totalLines - renderedLines,
+          edges: totalEdges - renderedEdges,
+        },
+        afterOptimization: {
+          objects: renderedObjects,
+          triangles: renderedTriangles,
+          lines: renderedLines,
+          edges: renderedEdges,
+        },
+      },
+      memory: {
+        geometries: { count: geometryCount, bytes: geometryMemoryBytes },
+        textures: { count: textureCount },
+        materials: { count: materialCount },
+        totalEstimatedGpuBytes: estimatedGpuMemoryBytes,
+      },
+      system: {
+        webglRenderer: this._webglInfoCache?.renderer || "",
+        webglVendor: this._webglInfoCache?.vendor || "",
+        viewport: { width: size.x || 0, height: size.y || 0 },
+      },
+    };
+  }
   async loadNode(nodeId, onLoadFinishCb) {
     const node = this.nodes.get(nodeId);
     if (!node || node.loaded || node.loading) return;
@@ -4082,7 +4182,7 @@ class DynamicGltfLoader {
         if (node.handle) {
           mesh.userData.handle = node.handle;
         } else {
-          mesh.userData.handle = `${node.structure.id}_${mesh.userData.handle}`;
+          mesh.userData.handle = `${node.structure.id}${STRUCTURE_ID_SEPARATOR}${mesh.userData.handle}`;
         }
         if (mesh.material.name === "edges") {
           mesh.userData.isEdge = true;
@@ -4228,7 +4328,7 @@ class DynamicGltfLoader {
     let nodeGroup = null;
     let handle = null;
     if (nodeDef.extras?.handle) {
-      handle = `${structure.id}_${nodeDef.extras.handle}`;
+      handle = `${structure.id}${STRUCTURE_ID_SEPARATOR}${nodeDef.extras.handle}`;
     }
     if (nodeDef.camera !== undefined) {
       const camera = this.loadCamera(structure, nodeDef.camera, nodeDef);
@@ -4245,7 +4345,7 @@ class DynamicGltfLoader {
       if (nodeDef.extras) {
         nodeGroup.userData = { ...nodeDef.extras };
         if (nodeGroup.userData.handle) {
-          nodeGroup.userData.handle = `${structure.id}_${nodeGroup.userData.handle}`;
+          nodeGroup.userData.handle = `${structure.id}${STRUCTURE_ID_SEPARATOR}${nodeGroup.userData.handle}`;
         }
       }
       if (nodeDef.matrix) {
@@ -4290,7 +4390,7 @@ class DynamicGltfLoader {
         this.edgeNodes.push(uniqueNodeId);
       }
       if (meshDef.extras && meshDef.extras.handle) {
-        handle = `${structure.id}_${meshDef.extras.handle}`;
+        handle = `${structure.id}${STRUCTURE_ID_SEPARATOR}${meshDef.extras.handle}`;
       }
       this.nodes.set(uniqueNodeId, {
         position: nodeGroup ? nodeGroup.position.clone() : new Vector3().setFromMatrixPosition(nodeMatrix),
@@ -4376,12 +4476,12 @@ class DynamicGltfLoader {
     }
   }
   async loadNodes() {
-    console.time("process nodes");
+    console.time("Process nodes");
     await this.processNodes();
-    console.timeEnd("process nodes");
-    console.time("optimize scene");
+    console.timeEnd("Process nodes");
+    console.time("Optimize scene");
     await this.optimizeScene();
-    console.timeEnd("optimize scene");
+    console.timeEnd("Optimize scene");
   }
   cleanupPartialLoad() {
     this.nodesToLoad.forEach((nodeId) => {
@@ -4702,7 +4802,7 @@ class DynamicGltfLoader {
       this.handleToObjects.set(fullHandle, new Set());
     }
     this.handleToObjects.get(fullHandle).add(object);
-    object.userData.structureId = object.userData.handle.split("_")[0];
+    object.userData.structureId = object.userData.handle.split(STRUCTURE_ID_SEPARATOR)[0];
   }
   getObjectsByHandle(handle) {
     if (!handle) return [];
@@ -4768,10 +4868,28 @@ class DynamicGltfLoader {
     }
     this.originalObjects.add(object);
   }
-  optimizeScene() {
+  yieldToUI() {
+    return new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        setTimeout(resolve, 0);
+      });
+    });
+  }
+  async optimizeScene() {
+    console.log("Starting scene optimization...");
+    this.dispatchEvent("optimizationprogress", {
+      phase: "start",
+      progress: 0,
+      message: "Starting optimization...",
+    });
     this.originalObjects.clear();
     this.originalObjectsToSelection.clear();
     const structureGroups = new Map();
+    this.dispatchEvent("optimizationprogress", {
+      phase: "collecting",
+      progress: 5,
+      message: "Collecting scene objects...",
+    });
     this.scene.traverse((object) => {
       if (object.userData.structureId) {
         const structureId = object.userData.structureId;
@@ -4800,16 +4918,44 @@ class DynamicGltfLoader {
         }
       }
     });
+    let processedGroups = 0;
+    const totalGroups = structureGroups.size;
+    this.dispatchEvent("optimizationprogress", {
+      phase: "merging",
+      progress: 10,
+      message: `Merging ${totalGroups} structure groups...`,
+      current: 0,
+      total: totalGroups,
+    });
     for (const group of structureGroups.values()) {
       group.mapMeshes.clear();
       group.mapLines.clear();
       group.mapLineSegments.clear();
       group.mapPoints.clear();
-      this.mergeMeshGroups(group.meshes, group.rootGroup);
-      this.mergeLineGroups(group.lines, group.rootGroup);
-      this.mergeLineSegmentGroups(group.lineSegments, group.rootGroup);
-      this.mergePointsGroups(group.points, group.rootGroup);
+      await this.mergeMeshGroups(group.meshes, group.rootGroup);
+      await this.yieldToUI();
+      await this.mergeLineGroups(group.lines, group.rootGroup);
+      await this.yieldToUI();
+      await this.mergeLineSegmentGroups(group.lineSegments, group.rootGroup);
+      await this.yieldToUI();
+      await this.mergePointsGroups(group.points, group.rootGroup);
+      processedGroups++;
+      const progress = 10 + Math.round((processedGroups / totalGroups) * 80);
+      this.dispatchEvent("optimizationprogress", {
+        phase: "merging",
+        progress,
+        message: `Processing structure ${processedGroups}/${totalGroups}...`,
+        current: processedGroups,
+        total: totalGroups,
+      });
+      console.log(`Optimization progress: ${processedGroups}/${totalGroups} structure groups processed (${progress}%)`);
+      await this.yieldToUI();
     }
+    this.dispatchEvent("optimizationprogress", {
+      phase: "finalizing",
+      progress: 95,
+      message: "Finalizing optimization...",
+    });
     this.originalObjects.forEach((obj) => {
       obj.visible = false;
       if (!(obj instanceof Points) && !obj.userData.isEdge) {
@@ -4818,9 +4964,15 @@ class DynamicGltfLoader {
     });
     this.initializeObjectVisibility();
     console.log(`Optimization complete. Total objects: ${this.maxObjectId}`);
+    this.dispatchEvent("optimizationprogress", {
+      phase: "complete",
+      progress: 100,
+      message: `Optimization complete! ${this.maxObjectId} objects processed.`,
+    });
     this.dispatchEvent("update");
   }
-  mergeMeshGroups(materialGroups, rootGroup) {
+  async mergeMeshGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
         console.warn("Skipping mesh group with null material");
@@ -4894,6 +5046,10 @@ class DynamicGltfLoader {
             this.handleToOptimizedObjects.set(handle, mergedObjects);
           }
         });
+        processedGroups++;
+        if (processedGroups % 5 === 0) {
+          await this.yieldToUI();
+        }
       } catch (error) {
         console.error("Failed to merge meshes for material:", error);
         group.objects.forEach((mesh) => {
@@ -4902,7 +5058,8 @@ class DynamicGltfLoader {
       }
     }
   }
-  mergeLineGroups(materialGroups, rootGroup) {
+  async mergeLineGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (group.objects.length === 0) continue;
       if (!group.material) {
@@ -4921,7 +5078,9 @@ class DynamicGltfLoader {
       let posOffset = 0;
       const indices = [];
       let vertexOffset = 0;
+      let isEdge = false;
       group.objects.forEach((line) => {
+        isEdge = line.userData.isEdge;
         const geometry = line.geometry;
         const positionAttr = geometry.attributes.position;
         const vertexCount = positionAttr.count;
@@ -4972,6 +5131,7 @@ class DynamicGltfLoader {
       geometry.setAttribute("visibility", new BufferAttribute(visibilityArray, 1));
       const visibilityMaterial = this.createVisibilityMaterial(group.material);
       const mergedLine = new LineSegments(geometry, visibilityMaterial);
+      mergedLine.userData.isEdge = isEdge;
       const mergedObjects = [mergedLine];
       if (this.useVAO) {
         this.createVAO(mergedLine);
@@ -4994,9 +5154,14 @@ class DynamicGltfLoader {
           this.handleToOptimizedObjects.set(handle, mergedObjects);
         }
       });
+      processedGroups++;
+      if (processedGroups % 5 === 0) {
+        await this.yieldToUI();
+      }
     }
   }
-  mergeLineSegmentGroups(materialGroups, rootGroup) {
+  async mergeLineSegmentGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
         console.warn("Skipping line segment group with null material");
@@ -5008,7 +5173,9 @@ class DynamicGltfLoader {
         const handles = new Set();
         const objectMapping = new Map();
         let currentVertexOffset = 0;
+        let isEdge = false;
         for (const line of group.objects) {
+          isEdge = line.userData.isEdge;
           const geometry = line.geometry.clone();
           line.updateWorldMatrix(true, false);
           geometry.applyMatrix4(line.matrixWorld);
@@ -5044,6 +5211,7 @@ class DynamicGltfLoader {
           mergedGeometry.setAttribute("visibility", new BufferAttribute(visibilityArray, 1));
           const visibilityMaterial = this.createVisibilityMaterial(group.material);
           const mergedLine = new LineSegments(mergedGeometry, visibilityMaterial);
+          mergedLine.userData.isEdge = isEdge;
           if (this.useVAO) {
             this.createVAO(mergedLine);
           }
@@ -5070,6 +5238,10 @@ class DynamicGltfLoader {
             this.handleToOptimizedObjects.set(handle, mergedObjects);
           }
         });
+        processedGroups++;
+        if (processedGroups % 5 === 0) {
+          await this.yieldToUI();
+        }
       } catch (error) {
         console.warn("Failed to merge line segments for material:", error);
         group.objects.forEach((line) => {
@@ -5078,7 +5250,8 @@ class DynamicGltfLoader {
       }
     }
   }
-  mergePointsGroups(materialGroups, rootGroup) {
+  async mergePointsGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
         console.warn("Skipping points group with null material");
@@ -5120,6 +5293,10 @@ class DynamicGltfLoader {
             this.handleToOptimizedObjects.set(handle, mergedObjects);
           }
         });
+        processedGroups++;
+        if (processedGroups % 5 === 0) {
+          await this.yieldToUI();
+        }
       } catch (error) {
         console.warn("Failed to merge points for material:", error);
         group.objects.forEach((points) => {
@@ -5355,8 +5532,225 @@ class DynamicGltfLoader {
   }
 }
 
-class GLTFCloudDynamicLoader {
+class GLTFLoadingManager extends LoadingManager {
+    constructor(file, params = {}) {
+        super();
+        this.path = "";
+        this.resourcePath = "";
+        this.fileURL = "";
+        this.dataURLs = new Map();
+        this.path = params.path || "";
+        const externalFiles = params.externalFiles || new Map();
+        if (typeof file === "string") {
+            this.fileURL = file;
+            this.resourcePath = LoaderUtils.extractUrlBase(file);
+        }
+        else {
+            externalFiles.forEach((value, key) => (this.fileURL = value === file ? key : this.fileURL));
+            externalFiles.set(this.fileURL, file);
+        }
+        externalFiles.forEach((value, key) => {
+            let dataURL;
+            if (typeof value === "string")
+                dataURL = value;
+            else
+                dataURL = URL.createObjectURL(new Blob([value]));
+            this.dataURLs.set(key, dataURL);
+        });
+        this.setURLModifier((url) => {
+            const key = decodeURI(url)
+                .replace(this.path, "")
+                .replace(this.resourcePath, "")
+                .replace(/^(\.?\/)/, "");
+            const dataURL = this.dataURLs.get(key);
+            return dataURL !== null && dataURL !== void 0 ? dataURL : url;
+        });
+    }
+    dispose() {
+        this.dataURLs.forEach((dataURL) => URL.revokeObjectURL(dataURL));
+    }
+}
+
+const BINARY_EXTENSION_HEADER_MAGIC = "glTF";
+const BINARY_EXTENSION_HEADER_LENGTH = 12;
+const BINARY_EXTENSION_CHUNK_TYPES = { JSON: 0x4e4f534a, BIN: 0x004e4042 };
+class GLTFBinaryExtension {
+    constructor(data) {
+        const headerView = new DataView(data, 0, BINARY_EXTENSION_HEADER_LENGTH);
+        const textDecoder = new TextDecoder();
+        const magic = textDecoder.decode(new Uint8Array(data.slice(0, 4)));
+        if (magic !== BINARY_EXTENSION_HEADER_MAGIC) {
+            this.content = textDecoder.decode(data);
+            return;
+        }
+        const header = {
+            magic,
+            version: headerView.getUint32(4, true),
+            length: headerView.getUint32(8, true),
+        };
+        if (header.magic !== BINARY_EXTENSION_HEADER_MAGIC) {
+            throw new Error("Unsupported glTF-Binary header.");
+        }
+        if (header.version < 2.0) {
+            throw new Error("Legacy binary file detected.");
+        }
+        const chunkContentsLength = header.length - BINARY_EXTENSION_HEADER_LENGTH;
+        const chunkView = new DataView(data, BINARY_EXTENSION_HEADER_LENGTH);
+        let chunkIndex = 0;
+        while (chunkIndex < chunkContentsLength) {
+            const chunkLength = chunkView.getUint32(chunkIndex, true);
+            chunkIndex += 4;
+            const chunkType = chunkView.getUint32(chunkIndex, true);
+            chunkIndex += 4;
+            if (chunkType === BINARY_EXTENSION_CHUNK_TYPES.JSON) {
+                const contentArray = new Uint8Array(data, BINARY_EXTENSION_HEADER_LENGTH + chunkIndex, chunkLength);
+                this.content = textDecoder.decode(contentArray);
+            }
+            else if (chunkType === BINARY_EXTENSION_CHUNK_TYPES.BIN) {
+                const byteOffset = BINARY_EXTENSION_HEADER_LENGTH + chunkIndex;
+                this.body = data.slice(byteOffset, byteOffset + chunkLength);
+            }
+            chunkIndex += chunkLength;
+        }
+        if (typeof this.content === "undefined") {
+            throw new Error("JSON content not found.");
+        }
+    }
+}
+
+class RangesLoader {
+    constructor() {
+        this.requestHeader = {};
+        this.withCredentials = false;
+        this.abortSignal = undefined;
+    }
+    setRequestHeader(requestHeader) {
+        this.requestHeader = requestHeader;
+    }
+    setWithCredentials(withCredentials) {
+        this.withCredentials = withCredentials;
+    }
+    setAbortSignal(abortSignal) {
+        this.abortSignal = abortSignal;
+    }
+    async load(url, ranges) {
+        const init = {
+            headers: {
+                ...this.requestHeader,
+                Range: "bytes=" + ranges.map((x) => `${x.offset}-${x.offset + x.length - 1}`).join(","),
+            },
+            credentials: this.withCredentials ? "include" : "same-origin",
+            signal: this.abortSignal,
+        };
+        const response = await fetch(url, init);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch "${url}", status ${response.status}`);
+        }
+        if (response.status !== 206) {
+            const arrayBuffer = await response.arrayBuffer();
+            return this.extractRanges(arrayBuffer, ranges);
+        }
+        return response.arrayBuffer();
+    }
+    extractRanges(arrayBuffer, ranges) {
+        const totalLength = ranges.reduce((sum, range) => sum + range.length, 0);
+        const result = new Uint8Array(totalLength);
+        let offset = 0;
+        for (const range of ranges) {
+            const chunk = new Uint8Array(arrayBuffer, range.offset, range.length);
+            result.set(chunk, offset);
+            offset += range.length;
+        }
+        return result.buffer;
+    }
+}
+
+class GLTFFileDynamicLoader extends Loader {
     constructor(viewer) {
+        super();
+        this.viewer = viewer;
+    }
+    dispose() {
+        if (this.gltfLoader)
+            this.gltfLoader.clear();
+        if (this.manager)
+            this.manager.dispose();
+    }
+    isSupport(file, format) {
+        return ((typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
+            /(gltf|glb)$/i.test(format));
+    }
+    async load(file, format, params) {
+        this.manager = new GLTFLoadingManager(file, params);
+        const scene = new Group();
+        this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
+        this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
+        this.gltfLoader.visibleEdges = this.viewer.options.edgeModel;
+        const modelImpl = new DynamicModelImpl(scene);
+        modelImpl.id = params.modelId || this.extractFileName(file);
+        modelImpl.gltfLoader = this.gltfLoader;
+        this.gltfLoader.addEventListener("databasechunk", () => {
+            this.viewer.scene.add(scene);
+            this.viewer.models.push(modelImpl);
+            this.viewer.syncOptions();
+            this.viewer.syncOverlay();
+            this.viewer.update();
+            this.viewer.emitEvent({ type: "databasechunk", data: scene, file });
+        });
+        this.gltfLoader.addEventListener("geometryerror", (data) => {
+            this.viewer.emitEvent({ type: "geometryerror", data, file });
+        });
+        this.gltfLoader.addEventListener("update", (data) => {
+            this.viewer.update();
+        });
+        const loadController = {
+            loadJson: async () => {
+                const loader = new FileLoader(this.manager);
+                loader.setPath(this.manager.path);
+                loader.setRequestHeader(params.requestHeader || {});
+                loader.setWithCredentials(params.withCredentials || loader.withCredentials);
+                loader.setResponseType("arraybuffer");
+                const progress = (event) => {
+                    const { lengthComputable, loaded, total } = event;
+                    const progress = lengthComputable ? loaded / total : 1;
+                    this.viewer.emitEvent({ type: "geometryprogress", data: progress, file });
+                };
+                const data = await loader.loadAsync(this.manager.fileURL, progress);
+                const extension = new GLTFBinaryExtension(data);
+                this.gltf = JSON.parse(extension.content);
+                this.bin = extension.body;
+                return this.gltf;
+            },
+            loadBinaryData: (ranges, uri = "") => {
+                const loader = new RangesLoader();
+                loader.setRequestHeader(params.requestHeader || {});
+                loader.setWithCredentials(params.withCredentials || false);
+                loader.setAbortSignal(this.gltfLoader.abortController.signal);
+                if (this.bin)
+                    return loader.extractRanges(this.bin, ranges);
+                const path = this.manager.path || this.manager.resourcePath;
+                const url = LoaderUtils.resolveURL(uri, path);
+                return loader.load(this.manager.resolveURL(url), ranges);
+            },
+            baseUrl: () => {
+                const path = this.manager.path || this.manager.resourcePath;
+                return Promise.resolve(path);
+            },
+        };
+        const structure = new GltfStructure(modelImpl.id, loadController);
+        await this.gltfLoader.loadStructure(structure);
+        await this.gltfLoader.loadNodes();
+        return this;
+    }
+    cancel() {
+        if (this.gltfLoader)
+            this.gltfLoader.abortLoading();
+    }
+}
+
+class GLTFCloudDynamicLoader extends Loader {
+    constructor(viewer) {
+        super();
         this.requestId = 0;
         this.viewer = viewer;
     }
@@ -5371,17 +5765,15 @@ class GLTFCloudDynamicLoader {
             typeof file.downloadResourceRange === "function" &&
             /.gltf$/i.test(file.database));
     }
-    async load(model, format, params) {
+    async load(model, format, params = {}) {
         const scene = new Group();
         this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
         this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
         this.gltfLoader.setVisibleEdges(this.viewer.options.edgeModel);
+        const modelImpl = new DynamicModelImpl(scene);
+        modelImpl.id = model.file.id;
+        modelImpl.gltfLoader = this.gltfLoader;
         this.gltfLoader.addEventListener("databasechunk", (data) => {
-            const modelImpl = new DynamicModelImpl(scene);
-            modelImpl.loader = this;
-            modelImpl.viewer = this.viewer;
-            modelImpl.gltfLoader = this.gltfLoader;
-            modelImpl.modelId = model.id;
             this.viewer.scene.add(scene);
             this.viewer.models.push(modelImpl);
             this.viewer.syncOptions();
@@ -5389,10 +5781,6 @@ class GLTFCloudDynamicLoader {
             this.viewer.update();
             this.viewer.emitEvent({ type: "databasechunk", data: scene, file: model.file, model });
         });
-        this.gltfLoader.addEventListener("geometryprogress", (data) => {
-            const progress = data.loaded / data.total;
-            this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
-        });
         this.gltfLoader.addEventListener("geometryerror", (data) => {
             this.viewer.emitEvent({ type: "geometryerror", data, file: model.file, model });
         });
@@ -5402,7 +5790,7 @@ class GLTFCloudDynamicLoader {
         const loadController = {
             loadJson: async () => {
                 const progress = (progress) => {
-                    this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model });
+                    this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
                 };
                 const arrayBuffer = await model.downloadResource(model.database, progress, this.gltfLoader.getAbortController().signal);
                 const text = new TextDecoder().decode(arrayBuffer);
@@ -5419,7 +5807,7 @@ class GLTFCloudDynamicLoader {
             },
             baseUrl: () => Promise.resolve(`${model.httpClient.serverUrl}${model.path}/`),
         };
-        const structure = new GltfStructure(model.id, loadController);
+        const structure = new GltfStructure(modelImpl.id, loadController);
         await this.gltfLoader.loadStructure(structure);
         await this.gltfLoader.loadNodes();
         return this;
@@ -5431,7 +5819,7 @@ class GLTFCloudDynamicLoader {
 }
 
 const loaders = loadersRegistry("threejs");
-loaders.registerLoader("gltf-file", (viewer) => new GLTFFileLoader(viewer));
+loaders.registerLoader("gltf-file", (viewer) => new GLTFFileDynamicLoader(viewer));
 loaders.registerLoader("gltf-cloud", (viewer) => new GLTFCloudDynamicLoader(viewer));
 
 class SSAARenderPass extends Pass {
@@ -5638,24 +6026,25 @@ class Helpers extends Scene {
 class Viewer extends EventEmitter2 {
     constructor(client) {
         super();
-        this._options = new Options(this);
         this.client = client;
-        this.canvasEvents = CANVAS_EVENTS;
-        this.canvaseventlistener = (event) => this.emit(event);
+        this.options = new Options(this);
         this.loaders = [];
         this.models = [];
+        this.canvasEvents = CANVAS_EVENTS.slice();
+        this.canvaseventlistener = (event) => this.emit(event);
         this.selected = [];
         this.extents = new Box3();
-        this.target = new Vector3();
+        this.target = new Vector3(0, 0, 0);
         this._activeDragger = null;
         this._components = [];
+        this._renderNeeded = false;
         this._renderTime = 0;
         this.render = this.render.bind(this);
         this.update = this.update.bind(this);
         this._markup = new Markup();
     }
-    get options() {
-        return this._options;
+    get markup() {
+        return this._markup;
     }
     get draggers() {
         return [...draggers.getDraggers().keys()];
@@ -5663,14 +6052,10 @@ class Viewer extends EventEmitter2 {
     get components() {
         return [...components.getComponents().keys()];
     }
-    get markup() {
-        return this._markup;
-    }
     initialize(canvas, onProgress) {
         this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
         this.scene = new Scene();
         this.helpers = new Helpers();
-        this.target = new Vector3(0, 0, 0);
         const pixelRatio = window.devicePixelRatio;
         const rect = canvas.parentElement.getBoundingClientRect();
         const width = rect.width || 1;
@@ -5821,21 +6206,25 @@ class Viewer extends EventEmitter2 {
     async open(file, params = {}) {
         if (!this.renderer)
             return this;
-        if (params.mode !== "a" && params.mode !== "append") {
+        const mode = params.mode || "file";
+        if (mode !== "assembly" && mode !== "a" && mode !== "append") {
             this.cancel();
             this.clear();
         }
-        this.emitEvent({ type: "open", file });
+        this.emitEvent({ type: "open", mode, file });
         let model = file;
         if (model && typeof model.getModels === "function") {
             const models = await model.getModels();
             model = models.find((model) => model.default) || models[0] || file;
         }
+        if (model && typeof model.database === "string") {
+            file = model.file;
+        }
         if (!model)
             throw new Error(`Format not supported`);
         let format = params.format;
-        if (!format && typeof model.type === "string")
-            format = model.type.split(".").pop();
+        if (!format && typeof file["type"] === "string")
+            format = file["type"].split(".").pop();
         if (!format && typeof file === "string")
             format = file.split(".").pop();
         if (!format && file instanceof globalThis.File)
@@ -5862,7 +6251,7 @@ class Viewer extends EventEmitter2 {
     }
     loadGltfFile(file, externalFiles, params = {}) {
         console.warn("Viewer.loadGltfFile() has been deprecated since 26.4 and will be removed in a future release, use Viewer.open() instead.");
-        return this.open(file, { ...params, format: "gltf", externalFiles, mode: "append" });
+        return this.open(file, { ...params, format: "gltf", externalFiles, mode: "assembly" });
     }
     cancel() {
         this.loaders.forEach((loader) => loader.cancel());
@@ -5882,12 +6271,17 @@ class Viewer extends EventEmitter2 {
         this.models = [];
         this.scene.clear();
         this.helpers.clear();
+        this.extents.makeEmpty();
+        this.target.set(0, 0, 0);
         this.syncOptions();
         this.syncOverlay();
         this.update(true);
         this.emitEvent({ type: "clear" });
         return this;
     }
+    is3D() {
+        return true;
+    }
     syncOptions(options = this.options) {
         if (!this.renderer)
             return;
@@ -5919,9 +6313,15 @@ class Viewer extends EventEmitter2 {
     getSelected() {
         return this.executeCommand("getSelected");
     }
+    getSelected2() {
+        return this.executeCommand("getSelected2");
+    }
     setSelected(handles) {
         this.executeCommand("setSelected", handles);
     }
+    setSelected2(handles) {
+        this.executeCommand("setSelected2", handles);
+    }
     clearSelected() {
         this.executeCommand("clearSelected");
     }
@@ -5981,37 +6381,8 @@ class Viewer extends EventEmitter2 {
     getComponent(name) {
         return this._components.find((component) => component.name === name);
     }
-    is3D() {
-        return true;
-    }
-    screenToWorld(position) {
-        if (!this.renderer)
-            return { x: position.x, y: position.y, z: 0 };
-        const rect = this.canvas.getBoundingClientRect();
-        const x = position.x / (rect.width / 2) - 1;
-        const y = -position.y / (rect.height / 2) + 1;
-        const point = new Vector3(x, y, -1);
-        point.unproject(this.camera);
-        return { x: point.x, y: point.y, z: point.z };
-    }
-    worldToScreen(position) {
-        if (!this.renderer)
-            return { x: position.x, y: position.y };
-        const point = new Vector3(position.x, position.y, position.z);
-        point.project(this.camera);
-        const rect = this.canvas.getBoundingClientRect();
-        const x = (point.x + 1) * (rect.width / 2);
-        const y = (-point.y + 1) * (rect.height / 2);
-        return { x, y };
-    }
-    getScale() {
-        return { x: 1, y: 1, z: 1 };
-    }
-    executeCommand(id, ...args) {
-        return commands.executeCommand(id, this, ...args);
-    }
     drawViewpoint(viewpoint) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!this.renderer)
             return;
         const getVector3FromPoint3d = ({ x, y, z }) => new Vector3(x, y, z);
@@ -6063,11 +6434,13 @@ class Viewer extends EventEmitter2 {
             }
         };
         const setClippingPlanes = (clipping_planes) => {
-            clipping_planes === null || clipping_planes === void 0 ? void 0 : clipping_planes.forEach((clipping_plane) => {
-                const plane = new Plane();
-                plane.setFromNormalAndCoplanarPoint(getVector3FromPoint3d(clipping_plane.direction), getVector3FromPoint3d(clipping_plane.location));
-                this.renderer.clippingPlanes.push(plane);
-            });
+            if (clipping_planes) {
+                clipping_planes.forEach((clipping_plane) => {
+                    const plane = new Plane();
+                    plane.setFromNormalAndCoplanarPoint(getVector3FromPoint3d(clipping_plane.direction), getVector3FromPoint3d(clipping_plane.location));
+                    this.renderer.clippingPlanes.push(plane);
+                });
+            }
         };
         const setSelection = (selection) => {
             if (selection)
@@ -6083,9 +6456,9 @@ class Viewer extends EventEmitter2 {
         setOrthogonalCamera(viewpoint.orthogonal_camera);
         setPerspectiveCamera(viewpoint.perspective_camera);
         setClippingPlanes(viewpoint.clipping_planes);
-        setSelection(viewpoint.selection);
+        setSelection(((_b = viewpoint.custom_fields) === null || _b === void 0 ? void 0 : _b.selection2) || viewpoint.selection);
         this._markup.setViewpoint(viewpoint);
-        this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === void 0 ? void 0 : _b.camera_target) !== null && _c !== void 0 ? _c : this.target);
+        this.target.copy(getVector3FromPoint3d((_d = (_c = viewpoint.custom_fields) === null || _c === void 0 ? void 0 : _c.camera_target) !== null && _d !== void 0 ? _d : this.target));
         this.setActiveDragger(draggerName);
         this.emitEvent({ type: "drawviewpoint", data: viewpoint });
         this.update();
@@ -6132,6 +6505,9 @@ class Viewer extends EventEmitter2 {
         const getSelection = () => {
             return this.getSelected().map((handle) => ({ handle }));
         };
+        const getSelection2 = () => {
+            return this.getSelected2().map((handle) => ({ handle }));
+        };
         const viewpoint = { custom_fields: {} };
         viewpoint.orthogonal_camera = getOrthogonalCamera();
         viewpoint.perspective_camera = getPerspectiveCamera();
@@ -6140,9 +6516,36 @@ class Viewer extends EventEmitter2 {
         viewpoint.description = new Date().toDateString();
         this._markup.getViewpoint(viewpoint);
         viewpoint.custom_fields.camera_target = getPoint3dFromVector3(this.target);
+        viewpoint.custom_fields.selection2 = getSelection2();
         this.emitEvent({ type: "createviewpoint", data: viewpoint });
         return viewpoint;
     }
+    screenToWorld(position) {
+        if (!this.renderer)
+            return { x: position.x, y: position.y, z: 0 };
+        const rect = this.canvas.getBoundingClientRect();
+        const x = position.x / (rect.width / 2) - 1;
+        const y = -position.y / (rect.height / 2) + 1;
+        const point = new Vector3(x, y, -1);
+        point.unproject(this.camera);
+        return { x: point.x, y: point.y, z: point.z };
+    }
+    worldToScreen(position) {
+        if (!this.renderer)
+            return { x: position.x, y: position.y };
+        const point = new Vector3(position.x, position.y, position.z);
+        point.project(this.camera);
+        const rect = this.canvas.getBoundingClientRect();
+        const x = (point.x + 1) * (rect.width / 2);
+        const y = (-point.y + 1) * (rect.height / 2);
+        return { x, y };
+    }
+    getScale() {
+        return { x: 1, y: 1, z: 1 };
+    }
+    executeCommand(id, ...args) {
+        return commands.executeCommand(id, this, ...args);
+    }
 }
 
 export { GLTFLoadingManager, ModelImpl, Viewer, commands, components, draggers, loaders };