@inweb/viewer-three 26.10.5 → 26.11.0

package/dist/viewer-three.module.js

@@ -21,14 +21,13 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { draggersRegistry, commandsRegistry, componentsRegistry, Loader, loadersRegistry, Options, CANVAS_EVENTS } from '@inweb/viewer-core';
+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, Raycaster, MathUtils, EdgesGeometry, Matrix4, Vector4, 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';
@@ -752,6 +751,9 @@ class OrbitDragger {
             this.orbit.object = this.viewer.camera;
             this.orbit.update();
         };
+        this.optionsChange = ({ data: options }) => {
+            this.orbit.zoomSpeed = Math.abs(this.orbit.zoomSpeed) * (options.reverseZoomWheel ? -1 : 1);
+        };
         this.controlsStart = () => {
             this.changed = false;
         };
@@ -807,6 +809,7 @@ class OrbitDragger {
         this.viewer.addEventListener("zoom", this.updateControls);
         this.viewer.addEventListener("drawviewpoint", this.updateControls);
         this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
+        this.viewer.addEventListener("optionschange", this.optionsChange);
         this.viewer.addEventListener("contextmenu", this.stopContextMenu);
         this.updateControls();
     }
@@ -817,6 +820,7 @@ class OrbitDragger {
         this.viewer.removeEventListener("zoom", this.updateControls);
         this.viewer.removeEventListener("drawviewpoint", this.updateControls);
         this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
+        this.viewer.removeEventListener("optionschange", this.optionsChange);
         this.viewer.removeEventListener("contextmenu", this.stopContextMenu);
         this.orbit.removeEventListener("start", this.controlsStart);
         this.orbit.removeEventListener("change", this.controlsChange);
@@ -909,116 +913,91 @@ class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
     }
 }
 
-const PRECISION = 0.01;
-const DESKTOP_SNAP_DISTANCE = 10;
-const MOBILE_SNAP_DISTANCE = 50;
-class MeasureLineDragger extends OrbitDragger {
-    constructor(viewer) {
-        super(viewer);
-        this.onPointerDown = (event) => {
-            if (event.button !== 0)
-                return;
-            this.line.startPoint = this.snapper.getSnapPoint(event);
-            this.line.render();
-            this.viewer.canvas.setPointerCapture(event.pointerId);
-            this.orbit.enabled = !this.line.startPoint;
-        };
-        this.onPointerMove = (event) => {
-            if (this.orbit.enabled && this.orbit.state !== -1)
-                return;
-            const snapPoint = this.snapper.getSnapPoint(event);
-            if (snapPoint && this.line.endPoint && snapPoint.equals(this.line.endPoint))
-                return;
-            this.line.endPoint = snapPoint;
-            this.line.render();
-            if (this.line.startPoint)
-                this.changed = true;
-        };
-        this.onPointerUp = (event) => {
-            if (this.line.startPoint && this.line.endPoint && this.line.getDistance() >= PRECISION) {
-                this.line = new MeasureLine(this.overlay);
-                this.overlay.addLine(this.line);
-            }
-            else {
-                this.line.startPoint = undefined;
-                this.line.endPoint = undefined;
-                this.line.render();
-            }
-            this.viewer.canvas.releasePointerCapture(event.pointerId);
-            this.orbit.enabled = true;
-        };
-        this.onPointerCancel = (event) => {
-            this.viewer.canvas.dispatchEvent(new PointerEvent("pointerup", event));
-        };
-        this.onPointerLeave = () => {
-            this.line.endPoint = undefined;
-            this.line.render();
-        };
-        this.renderOverlay = () => {
-            this.overlay.render();
-        };
-        this.updateSnapper = () => {
-            this.snapper.setFromViewer(this.viewer);
-        };
-        this.updateSnapperCamera = () => {
-            this.snapper.camera = this.viewer.camera;
-            this.overlay.camera = this.viewer.camera;
-        };
-        this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
-        this.overlay.attach();
-        this.line = new MeasureLine(this.overlay);
-        this.overlay.addLine(this.line);
-        this.snapper = new MeasureSnapper(viewer.camera, viewer.canvas);
-        this.updateSnapper();
-        this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown);
-        this.viewer.canvas.addEventListener("pointermove", this.onPointerMove);
-        this.viewer.canvas.addEventListener("pointerup", this.onPointerUp);
-        this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel);
-        this.viewer.canvas.addEventListener("pointerleave", this.onPointerLeave);
-        this.viewer.addEventListener("render", this.renderOverlay);
-        this.viewer.addEventListener("hide", this.updateSnapper);
-        this.viewer.addEventListener("isolate", this.updateSnapper);
-        this.viewer.addEventListener("show", this.updateSnapper);
-        this.viewer.addEventListener("showall", this.updateSnapper);
-        this.viewer.addEventListener("changecameramode", this.updateSnapperCamera);
-    }
-    dispose() {
-        this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown);
-        this.viewer.canvas.removeEventListener("pointermove", this.onPointerMove);
-        this.viewer.canvas.removeEventListener("pointerup", this.onPointerUp);
-        this.viewer.canvas.removeEventListener("pointercancel", this.onPointerCancel);
-        this.viewer.canvas.removeEventListener("pointerleave", this.onPointerLeave);
-        this.viewer.removeEventListener("render", this.renderOverlay);
-        this.viewer.removeEventListener("hide", this.updateSnapper);
-        this.viewer.removeEventListener("isolate", this.updateSnapper);
-        this.viewer.removeEventListener("show", this.updateSnapper);
-        this.viewer.removeEventListener("showall", this.updateSnapper);
-        this.viewer.removeEventListener("changecameramode", this.updateSnapperCamera);
-        this.snapper.dispose();
-        this.overlay.detach();
-        this.overlay.dispose();
-        super.dispose();
+const ModelUnits = {
+    Meters: { name: "Meters", type: "m", scale: 1.0 },
+    Centimeters: { name: "Centimeters", type: "cm", scale: 0.01 },
+    Millimeters: { name: "Millimeters", type: "mm", scale: 0.001 },
+    Feet: { name: "Feet", type: "ft", scale: 0.3048 },
+    Inches: { name: "Inches", type: "in", scale: 0.0254 },
+    Yards: { name: "Yards", type: "yd", scale: 0.9144 },
+    Kilometers: { name: "Kilometers", type: "km", scale: 1000.0 },
+    Miles: { name: "Miles", type: "mi", scale: 1609.344 },
+    Micrometers: { name: "Micrometers", type: "µm", scale: 0.000001 },
+    Mils: { name: "Mils", type: "mil", scale: 0.0000254 },
+    MicroInches: { name: "Micro-inches", type: "µin", scale: 0.0000000254 },
+    Default: { name: "File units", type: "unit", scale: 1.0 },
+};
+function convertUnits(fromUnits, toUnits, distance) {
+    const fromFactor = 1 / (ModelUnits[fromUnits] || ModelUnits.Default).scale;
+    const toFactor = (ModelUnits[toUnits] || ModelUnits.Default).scale || 1;
+    return distance * fromFactor * toFactor;
+}
+
+function getDisplayUnit(units) {
+    return (ModelUnits[units] || ModelUnits.Default).type;
+}
+function calculatePrecision(value) {
+    const distance = Math.abs(value);
+    if (distance >= 1000)
+        return 0;
+    if (distance >= 10)
+        return 1;
+    if (distance >= 0.1)
+        return 2;
+    if (distance >= 0.001)
+        return 3;
+    return distance > 0 ? Math.floor(-Math.log10(distance)) + 1 : 2;
+}
+function formatNumber(distance, digits, precision) {
+    let result = distance.toFixed(digits);
+    if (precision === "Auto")
+        result = result.replace(/\.0+$/, "").replace(/\.$/, "");
+    if (+result !== distance)
+        result = "~ " + result;
+    return result;
+}
+function formatDistance(distance, units, precision = 2) {
+    let digits;
+    if (precision === "Auto")
+        digits = calculatePrecision(distance);
+    else if (Number.isFinite(precision))
+        digits = precision;
+    else
+        digits = parseFloat(precision);
+    if (!Number.isFinite(digits))
+        digits = 2;
+    else if (digits < 0)
+        digits = 0;
+    else if (digits > 10)
+        digits = 10;
+    if (ModelUnits[units]) {
+        return formatNumber(distance, digits, precision) + " " + ModelUnits[units].type;
+    }
+    else if (units) {
+        return formatNumber(distance, digits, precision) + " " + units;
+    }
+    else {
+        return formatNumber(distance, digits, precision);
     }
 }
+
+const DESKTOP_SNAP_DISTANCE = 10;
+const MOBILE_SNAP_DISTANCE = 50;
 const _vertex = new Vector3();
 const _start = new Vector3();
 const _end = new Vector3();
 const _line = new Line3();
 const _center = new Vector3();
 const _projection = new Vector3();
-class MeasureSnapper {
-    constructor(camera, canvas) {
+class Snapper {
+    constructor(camera, renderer, canvas) {
         this.camera = camera;
+        this.renderer = renderer;
         this.canvas = canvas;
-        this.objects = [];
-        this.clippingPlanes = [];
         this.raycaster = new Raycaster();
         this.detectRadiusInPixels = this.isMobile() ? MOBILE_SNAP_DISTANCE : DESKTOP_SNAP_DISTANCE;
         this.edgesCache = new WeakMap();
     }
-    dispose() {
-        this.objects = [];
-    }
     isMobile() {
         if (typeof navigator === "undefined")
             return false;
@@ -1027,7 +1006,7 @@ class MeasureSnapper {
     getMousePosition(event, target) {
         return target.set(event.clientX, event.clientY);
     }
-    getPointerIntersects(mouse) {
+    getPointerIntersects(mouse, objects) {
         const rect = this.canvas.getBoundingClientRect();
         const x = ((mouse.x - rect.left) / rect.width) * 2 - 1;
         const y = (-(mouse.y - rect.top) / rect.height) * 2 + 1;
@@ -1041,8 +1020,8 @@ class MeasureSnapper {
             Points: { threshold: 0.01 },
             Sprite: {},
         };
-        let intersects = this.raycaster.intersectObjects(this.objects, false);
-        this.clippingPlanes.forEach((plane) => {
+        let intersects = this.raycaster.intersectObjects(objects, false);
+        (this.renderer.clippingPlanes || []).forEach((plane) => {
             intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
         });
         return intersects;
@@ -1064,9 +1043,8 @@ class MeasureSnapper {
         }
         return 0.1;
     }
-    getSnapPoint(event) {
-        const mouse = this.getMousePosition(event, new Vector2());
-        const intersections = this.getPointerIntersects(mouse);
+    getSnapPoint(mouse, objects) {
+        const intersections = this.getPointerIntersects(mouse, objects);
         if (intersections.length === 0)
             return undefined;
         const object = intersections[0].object;
@@ -1114,13 +1092,133 @@ class MeasureSnapper {
             return object.localToWorld(snapPoint);
         return intersectionPoint.clone();
     }
-    setFromViewer(viewer) {
+}
+
+const _downPoint = new Vector2();
+class MeasureLineDragger extends OrbitDragger {
+    constructor(viewer) {
+        super(viewer);
+        this.scale = 1.0;
+        this.units = "";
+        this.precision = 2;
+        this.onPointerDown = (event) => {
+            if (event.button !== 0)
+                return;
+            const mouse = this.snapper.getMousePosition(event, _downPoint);
+            this.line.startPoint = this.snapper.getSnapPoint(mouse, this.objects);
+            this.line.render();
+            this.viewer.canvas.setPointerCapture(event.pointerId);
+            this.orbit.enabled = !this.line.startPoint;
+        };
+        this.onPointerMove = (event) => {
+            if (this.orbit.enabled && this.orbit.state !== -1)
+                return;
+            const mouse = this.snapper.getMousePosition(event, _downPoint);
+            const snapPoint = this.snapper.getSnapPoint(mouse, this.objects);
+            if (snapPoint && this.line.endPoint && snapPoint.equals(this.line.endPoint))
+                return;
+            this.line.endPoint = snapPoint;
+            this.line.render();
+            if (this.line.startPoint)
+                this.changed = true;
+        };
+        this.onPointerUp = (event) => {
+            if (this.line.startPoint && this.line.endPoint && this.line.getDistance() > 0) {
+                this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
+                this.overlay.addLine(this.line);
+            }
+            else {
+                this.line.startPoint = undefined;
+                this.line.endPoint = undefined;
+                this.line.render();
+            }
+            this.viewer.canvas.releasePointerCapture(event.pointerId);
+            this.orbit.enabled = true;
+        };
+        this.onPointerCancel = (event) => {
+            this.viewer.canvas.dispatchEvent(new PointerEvent("pointerup", event));
+        };
+        this.onPointerLeave = () => {
+            this.line.endPoint = undefined;
+            this.line.render();
+        };
+        this.clearOverlay = () => {
+            this.overlay.clear();
+            this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
+            this.overlay.addLine(this.line);
+        };
+        this.renderOverlay = () => {
+            this.overlay.render();
+        };
+        this.updateObjects = () => {
+            this.objects.length = 0;
+            this.viewer.models.forEach((model) => {
+                model.getVisibleObjects().forEach((object) => this.objects.push(object));
+            });
+        };
+        this.updateSnapperCamera = () => {
+            this.snapper.camera = this.viewer.camera;
+            this.overlay.camera = this.viewer.camera;
+        };
+        this.updateUnits = () => {
+            var _a, _b;
+            const model = this.viewer.models[0];
+            const units = (_a = this.viewer.options.rulerUnit) !== null && _a !== void 0 ? _a : "Default";
+            const precision = (_b = this.viewer.options.rulerPrecision) !== null && _b !== void 0 ? _b : "Default";
+            if (units === "Default") {
+                this.scale = model.getUnitScale();
+                this.units = model.getUnitString();
+            }
+            else {
+                this.scale = convertUnits(model.getUnits(), units, 1);
+                this.units = units;
+            }
+            if (precision === "Default") {
+                this.precision = model.getPrecision();
+            }
+            else {
+                this.precision = precision;
+            }
+            this.overlay.updateLineUnits(this.scale, this.units, this.precision);
+        };
+        this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
+        this.overlay.attach();
+        this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
+        this.overlay.addLine(this.line);
+        this.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
+        this.objects = [];
+        this.updateObjects();
+        this.updateUnits();
+        this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown);
+        this.viewer.canvas.addEventListener("pointermove", this.onPointerMove);
+        this.viewer.canvas.addEventListener("pointerup", this.onPointerUp);
+        this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel);
+        this.viewer.canvas.addEventListener("pointerleave", this.onPointerLeave);
+        this.viewer.addEventListener("render", this.renderOverlay);
+        this.viewer.addEventListener("hide", this.updateObjects);
+        this.viewer.addEventListener("isolate", this.updateObjects);
+        this.viewer.addEventListener("show", this.updateObjects);
+        this.viewer.addEventListener("showall", this.updateObjects);
+        this.viewer.addEventListener("changecameramode", this.updateSnapperCamera);
+        this.viewer.addEventListener("optionschange", this.updateUnits);
+    }
+    dispose() {
+        this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown);
+        this.viewer.canvas.removeEventListener("pointermove", this.onPointerMove);
+        this.viewer.canvas.removeEventListener("pointerup", this.onPointerUp);
+        this.viewer.canvas.removeEventListener("pointercancel", this.onPointerCancel);
+        this.viewer.canvas.removeEventListener("pointerleave", this.onPointerLeave);
+        this.viewer.removeEventListener("render", this.renderOverlay);
+        this.viewer.removeEventListener("hide", this.updateObjects);
+        this.viewer.removeEventListener("isolate", this.updateObjects);
+        this.viewer.removeEventListener("show", this.updateObjects);
+        this.viewer.removeEventListener("showall", this.updateObjects);
+        this.viewer.removeEventListener("changecameramode", this.updateSnapperCamera);
+        this.viewer.removeEventListener("optionschange", this.updateUnits);
         this.objects.length = 0;
-        viewer.models.forEach((model) => {
-            model.getVisibleObjects().forEach((object) => this.objects.push(object));
-        });
-        this.camera = viewer.camera;
-        this.clippingPlanes = viewer.renderer.clippingPlanes || [];
+        this.overlay.detach();
+        this.overlay.dispose();
+        super.dispose();
     }
 }
 class MeasureOverlay {
@@ -1140,6 +1238,9 @@ class MeasureOverlay {
         this.projector = new MeasureProjector(camera, canvas);
         this.resizeObserver = new ResizeObserver(this.resizeContainer);
     }
+    dispose() {
+        this.clear();
+    }
     attach() {
         this.container = document.createElement("div");
         this.container.id = "measure-container";
@@ -1152,9 +1253,6 @@ class MeasureOverlay {
         this.canvas.parentElement.appendChild(this.container);
         this.resizeObserver.observe(this.canvas);
     }
-    dispose() {
-        this.clear();
-    }
     detach() {
         this.resizeObserver.disconnect();
         this.container.remove();
@@ -1162,7 +1260,7 @@ class MeasureOverlay {
     }
     clear() {
         this.lines.forEach((line) => line.dispose());
-        this.lines = [];
+        this.lines.length = 0;
     }
     render() {
         this.projector.setFromCamera(this.camera);
@@ -1177,13 +1275,18 @@ class MeasureOverlay {
     removeLine(line) {
         this.lines = this.lines.filter((x) => x !== line);
     }
+    updateLineUnits(scale, units, precision) {
+        this.lines.forEach((line) => {
+            line.scale = scale;
+            line.units = units;
+            line.precision = precision;
+        });
+    }
 }
 const _middlePoint = new Vector3();
 class MeasureLine {
-    constructor(overlay) {
+    constructor(overlay, scale, units, precision) {
         this.id = MathUtils.generateUUID();
-        this.unit = "";
-        this.scale = 1.0;
         this.size = 10.0;
         this.lineWidth = 2;
         this.style = {
@@ -1194,6 +1297,9 @@ class MeasureLine {
             font: "1rem system-ui",
         };
         this.overlay = overlay;
+        this.scale = scale;
+        this.units = units;
+        this.precision = precision;
         this.elementStartPoint = overlay.container.appendChild(document.createElement("div"));
         this.elementEndPoint = overlay.container.appendChild(document.createElement("div"));
         this.elementLine = overlay.container.appendChild(document.createElement("div"));
@@ -1248,10 +1354,10 @@ class MeasureLine {
             _middlePoint.lerpVectors(this.startPoint, this.endPoint, 0.5);
             const { point, visible } = projector.projectPoint(_middlePoint);
             const distance = this.getDistance();
-            this.elementLabel.style.display = visible && distance >= PRECISION ? "block" : "none";
+            this.elementLabel.style.display = visible && distance > 0 ? "block" : "none";
             this.elementLabel.style.left = `${point.x}px`;
             this.elementLabel.style.top = `${point.y}px`;
-            this.elementLabel.innerHTML = `${distance.toFixed(2)} ${this.unit}`;
+            this.elementLabel.innerHTML = formatDistance(distance, this.units, this.precision);
         }
         else {
             this.elementLabel.style.display = "none";
@@ -2055,7 +2161,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) {
@@ -2144,22 +2251,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) {
@@ -2186,14 +2302,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 = "") {
@@ -2205,16 +2320,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) {
@@ -2228,21 +2358,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);
@@ -2259,6 +2387,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);
@@ -2268,6 +2397,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);
@@ -2320,6 +2450,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)
@@ -2417,6 +2551,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;
@@ -2703,8 +2839,9 @@ class HighlighterComponent {
         });
     }
     syncHighlightColors() {
-        const { facesColor, facesTransparancy, facesOverlap } = this.viewer.options;
-        const { edgesColor, edgesVisibility, edgesOverlap } = this.viewer.options;
+        const options = this.viewer.options.enableCustomHighlight ? this.viewer.options : Options.defaults();
+        const { facesColor, facesTransparancy, facesOverlap } = options;
+        const { edgesColor, edgesVisibility, edgesOverlap } = options;
         this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
         this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
         this.facesMaterial.depthTest = !facesOverlap;
@@ -2743,10 +2880,11 @@ class SelectionComponent {
             const upPosition = this.getMousePosition(event, new Vector2());
             if (upPosition.distanceTo(this.downPosition) !== 0)
                 return;
+            const snapper = new Snapper(this.viewer.camera, this.viewer.renderer, this.viewer.canvas);
             let intersections = [];
             this.viewer.models.forEach((model) => {
                 const objects = model.getVisibleObjects();
-                const intersects = this.getPointerIntersects(upPosition, objects);
+                const intersects = snapper.getPointerIntersects(upPosition, objects);
                 if (intersects.length > 0)
                     intersections.push({ ...intersects[0], model });
             });
@@ -2764,6 +2902,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)
@@ -2774,7 +2913,6 @@ class SelectionComponent {
             this.highlighter = this.viewer.getComponent("HighlighterComponent");
         };
         this.viewer = viewer;
-        this.raycaster = new Raycaster();
         this.downPosition = new Vector2();
         this.viewer.addEventListener("pointerdown", this.onPointerDown);
         this.viewer.addEventListener("pointerup", this.onPointerUp);
@@ -2790,26 +2928,6 @@ class SelectionComponent {
     getMousePosition(event, target) {
         return target.set(event.clientX, event.clientY);
     }
-    getPointerIntersects(mouse, objects) {
-        const rect = this.viewer.canvas.getBoundingClientRect();
-        const x = ((mouse.x - rect.left) / rect.width) * 2 - 1;
-        const y = (-(mouse.y - rect.top) / rect.height) * 2 + 1;
-        const coords = new Vector2(x, y);
-        this.raycaster.setFromCamera(coords, this.viewer.camera);
-        this.raycaster.params = {
-            Mesh: {},
-            Line: { threshold: 0.05 },
-            Line2: { threshold: 0.05 },
-            LOD: {},
-            Points: { threshold: 0.01 },
-            Sprite: {},
-        };
-        let intersects = this.raycaster.intersectObjects(objects, false);
-        (this.viewer.renderer.clippingPlanes || []).forEach((plane) => {
-            intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
-        });
-        return intersects;
-    }
     select(objects, model) {
         if (!model) {
             this.viewer.models.forEach((model) => this.select(objects, model));
@@ -3008,48 +3126,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() {
@@ -3069,6 +3147,18 @@ class ModelImpl {
         this.scene.traverse(disposeObject);
         this.scene.clear();
     }
+    getUnits() {
+        return "Meters";
+    }
+    getUnitScale() {
+        return convertUnits(this.getUnits(), "Meters", 1);
+    }
+    getUnitString() {
+        return getDisplayUnit(this.getUnits());
+    }
+    getPrecision() {
+        return 2;
+    }
     getExtents(target) {
         this.scene.traverseVisible((object) => !object.children.length && target.expandByObject(object));
         return target;
@@ -3091,27 +3181,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;
     }
@@ -3127,8 +3235,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));
@@ -3184,42 +3290,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());
@@ -3238,31 +3308,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;
     }
@@ -3326,11 +3405,14 @@ class GltfStructure {
     this.materials = new Map();
     this.textureCache = new Map();
     this.materialCache = new Map();
+    this.uri = "";
+    this._nextObjectId = 0;
   }
   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;
@@ -3424,7 +3506,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 {
@@ -3741,6 +3823,7 @@ class GltfStructure {
   }
 }
 
+const STRUCTURE_ID_SEPARATOR = ":";
 class DynamicGltfLoader {
   constructor(camera, scene, renderer) {
     this.camera = camera;
@@ -3753,6 +3836,7 @@ class DynamicGltfLoader {
       geometryerror: [],
       update: [],
       geometrymemory: [],
+      optimizationprogress: [],
     };
     this.loadDistance = 100;
     this.unloadDistance = 150;
@@ -3794,7 +3878,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();
@@ -3803,6 +3886,7 @@ class DynamicGltfLoader {
     this.maxConcurrentChunks = 6;
     this.mergedObjectMap = new Map();
     this.mergedGeometryVisibility = new Map();
+    this._webglInfoCache = null;
   }
   setVisibleEdges(visible) {
     this.visibleEdges = visible;
@@ -3906,6 +3990,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;
@@ -4076,7 +4277,7 @@ class DynamicGltfLoader {
         if (node.handle) {
           mesh.userData.handle = node.handle;
         } else {
-          mesh.userData.handle = `${node.structure.id}_${mesh.userData.handle}`;
+          mesh.userData.handle = this.getFullHandle(node.structure.id, mesh.userData.handle);
         }
         if (mesh.material.name === "edges") {
           mesh.userData.isEdge = true;
@@ -4217,12 +4418,15 @@ class DynamicGltfLoader {
       })),
     });
   }
+  getFullHandle(structureId, originalHandle) {
+    return `${structureId}${STRUCTURE_ID_SEPARATOR}${originalHandle}`;
+  }
   async processNodeHierarchy(structure, nodeId, parentGroup) {
     const nodeDef = structure.json.nodes[nodeId];
     let nodeGroup = null;
     let handle = null;
     if (nodeDef.extras?.handle) {
-      handle = `${structure.id}_${nodeDef.extras.handle}`;
+      handle = this.getFullHandle(structure.id, nodeDef.extras.handle);
     }
     if (nodeDef.camera !== undefined) {
       const camera = this.loadCamera(structure, nodeDef.camera, nodeDef);
@@ -4239,7 +4443,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 = this.getFullHandle(structure.id, nodeGroup.userData.handle);
         }
       }
       if (nodeDef.matrix) {
@@ -4284,7 +4488,7 @@ class DynamicGltfLoader {
         this.edgeNodes.push(uniqueNodeId);
       }
       if (meshDef.extras && meshDef.extras.handle) {
-        handle = `${structure.id}_${meshDef.extras.handle}`;
+        handle = this.getFullHandle(structure.id, meshDef.extras.handle);
       }
       this.nodes.set(uniqueNodeId, {
         position: nodeGroup ? nodeGroup.position.clone() : new Vector3().setFromMatrixPosition(nodeMatrix),
@@ -4297,7 +4501,7 @@ class DynamicGltfLoader {
         structure,
         extras: nodeDef.extras,
         geometryExtents,
-        handle,
+        handle: handle || this.getFullHandle(structure.id, structure._nextObjectId++),
       });
     }
     if (nodeDef.children) {
@@ -4370,12 +4574,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) => {
@@ -4696,7 +4900,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 [];
@@ -4762,10 +4966,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;
@@ -4794,16 +5016,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) {
@@ -4812,9 +5062,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");
@@ -4828,8 +5084,6 @@ class DynamicGltfLoader {
         let currentVertexOffset = 0;
         for (const mesh of group.objects) {
           const geometry = mesh.geometry.clone();
-          mesh.updateWorldMatrix(true, false);
-          geometry.applyMatrix4(mesh.matrixWorld);
           const handle = mesh.userData.handle;
           if (!this.objectIdToIndex.has(handle)) {
             this.objectIdToIndex.set(handle, this.maxObjectId++);
@@ -4888,6 +5142,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) => {
@@ -4896,7 +5154,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) {
@@ -4915,7 +5174,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;
@@ -4928,12 +5189,9 @@ class DynamicGltfLoader {
           vertexCount,
         });
         currentVertexOffset += vertexCount;
-        line.updateWorldMatrix(true, false);
-        const matrix = line.matrixWorld;
         const vector = new Vector3();
         for (let i = 0; i < vertexCount; i++) {
           vector.fromBufferAttribute(positionAttr, i);
-          vector.applyMatrix4(matrix);
           positions[posOffset++] = vector.x;
           positions[posOffset++] = vector.y;
           positions[posOffset++] = vector.z;
@@ -4966,6 +5224,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);
@@ -4988,9 +5247,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");
@@ -5002,10 +5266,10 @@ 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);
           const handle = line.userData.handle;
           if (!this.objectIdToIndex.has(handle)) {
             this.objectIdToIndex.set(handle, this.maxObjectId++);
@@ -5038,6 +5302,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);
           }
@@ -5064,6 +5329,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) => {
@@ -5072,7 +5341,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");
@@ -5084,8 +5354,6 @@ class DynamicGltfLoader {
         const handles = new Set();
         for (const points of group.objects) {
           const geometry = points.geometry.clone();
-          points.updateWorldMatrix(true, false);
-          geometry.applyMatrix4(points.matrixWorld);
           geometries.push(geometry);
           optimizedObjects.push(points);
           handles.add(points.userData.handle);
@@ -5114,6 +5382,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) => {
@@ -5132,7 +5404,6 @@ class DynamicGltfLoader {
       const hasNormals = lineSegmentsArray.some((segment) => segment.geometry.attributes.normal !== undefined);
       lineSegmentsArray.forEach((segment) => {
         const clonedGeometry = segment.geometry.clone();
-        segment.updateWorldMatrix(true, false);
         clonedGeometry.applyMatrix4(segment.matrixWorld);
         if (hasNormals && !clonedGeometry.attributes.normal) {
           clonedGeometry.computeVertexNormals();
@@ -5349,8 +5620,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;
     }
@@ -5365,17 +5853,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();
@@ -5383,10 +5869,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 });
         });
@@ -5396,7 +5878,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);
@@ -5413,7 +5895,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;
@@ -5425,7 +5907,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 {
@@ -5632,24 +6114,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()];
@@ -5657,14 +6140,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;
@@ -5815,21 +6294,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)
@@ -5856,7 +6339,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());
@@ -5876,12 +6359,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;
@@ -5913,9 +6401,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");
     }
@@ -5975,37 +6469,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);
@@ -6057,11 +6522,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)
@@ -6077,9 +6544,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();
@@ -6126,6 +6593,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();
@@ -6134,9 +6604,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 };