@inweb/viewer-three 26.10.6 → 26.12.0

package/dist/viewer-three.module.js

@@ -21,14 +21,13 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { draggersRegistry, commandsRegistry, Options, componentsRegistry, Loader, loadersRegistry, CANVAS_EVENTS } from '@inweb/viewer-core';
+import { draggersRegistry, commandsRegistry, Options, componentsRegistry, Info, 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, REVISION, 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';
@@ -914,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;
@@ -1032,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;
@@ -1046,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;
@@ -1069,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;
@@ -1119,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 {
@@ -1145,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";
@@ -1157,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();
@@ -1167,7 +1260,7 @@ class MeasureOverlay {
     }
     clear() {
         this.lines.forEach((line) => line.dispose());
-        this.lines = [];
+        this.lines.length = 0;
     }
     render() {
         this.projector.setFromCamera(this.camera);
@@ -1182,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 = {
@@ -1199,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"));
@@ -1253,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";
@@ -2060,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) {
@@ -2149,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) {
@@ -2191,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 = "") {
@@ -2210,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) {
@@ -2233,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);
@@ -2264,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);
@@ -2273,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);
@@ -2325,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)
@@ -2422,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;
@@ -2502,6 +2633,140 @@ class LightComponent {
     }
 }
 
+class InfoComponent {
+    constructor(viewer) {
+        this.initialize = () => {
+            try {
+                const gl = this.viewer.renderer.getContext();
+                const dbgInfo = gl.getExtension("WEBGL_debug_renderer_info");
+                if (dbgInfo) {
+                    this.viewer.info.system.webglRenderer = gl.getParameter(dbgInfo.UNMASKED_RENDERER_WEBGL);
+                    this.viewer.info.system.webglVendor = gl.getParameter(dbgInfo.UNMASKED_VENDOR_WEBGL);
+                }
+            }
+            catch (error) {
+                console.error("Error reading WebGL info.", error);
+            }
+            console.log("THREE.WebGLRenderer:", REVISION);
+            console.log("WebGL Renderer:", this.viewer.info.system.webglRenderer);
+            console.log("WebGL Vendor:", this.viewer.info.system.webglVendor);
+            this.resize();
+            this.optionsChange({ data: this.viewer.options });
+        };
+        this.clear = () => {
+            this.viewer.info.performance.timeToFirstRender = 0;
+            this.viewer.info.performance.loadTime = 0;
+            this.viewer.info.scene.objects = 0;
+            this.viewer.info.scene.triangles = 0;
+            this.viewer.info.scene.points = 0;
+            this.viewer.info.scene.lines = 0;
+            this.viewer.info.scene.edges = 0;
+            this.viewer.info.optimizedScene.objects = 0;
+            this.viewer.info.optimizedScene.triangles = 0;
+            this.viewer.info.optimizedScene.points = 0;
+            this.viewer.info.optimizedScene.lines = 0;
+            this.viewer.info.optimizedScene.edges = 0;
+            this.viewer.info.memory.geometries = 0;
+            this.viewer.info.memory.geometryBytes = 0;
+            this.viewer.info.memory.textures = 0;
+            this.viewer.info.memory.textureBytes = 0;
+            this.viewer.info.memory.materials = 0;
+            this.viewer.info.memory.totalEstimatedGpuBytes = 0;
+            this.viewer.info.memory.usedJSHeapSize = 0;
+        };
+        this.optionsChange = ({ data: options }) => {
+            if (options.antialiasing === false)
+                this.viewer.info.render.antialiasing = "";
+            else if (options.antialiasing === true)
+                this.viewer.info.render.antialiasing = "mxaa";
+            else
+                this.viewer.info.render.antialiasing = options.antialiasing;
+        };
+        this.geometryStart = () => {
+            this.startTime = performance.now();
+        };
+        this.databaseChunk = () => {
+            this.viewer.info.performance.timeToFirstRender += performance.now() - this.startTime;
+            console.log("Time to first render:", this.viewer.info.performance.timeToFirstRender, "ms");
+        };
+        this.geometryEnd = () => {
+            const model = this.viewer.models[this.viewer.models.length - 1];
+            const info = model.getInfo();
+            this.viewer.info.scene.objects += info.scene.objects;
+            this.viewer.info.scene.triangles += info.scene.triangles;
+            this.viewer.info.scene.points += info.scene.points;
+            this.viewer.info.scene.lines += info.scene.lines;
+            this.viewer.info.scene.edges += info.scene.edges;
+            this.viewer.info.optimizedScene.objects += info.optimizedScene.objects;
+            this.viewer.info.optimizedScene.triangles += info.optimizedScene.triangles;
+            this.viewer.info.optimizedScene.points += info.optimizedScene.points;
+            this.viewer.info.optimizedScene.lines += info.optimizedScene.lines;
+            this.viewer.info.optimizedScene.edges += info.optimizedScene.edges;
+            this.viewer.info.memory.geometries += info.memory.geometries;
+            this.viewer.info.memory.geometryBytes += info.memory.geometryBytes;
+            this.viewer.info.memory.textures += info.memory.textures;
+            this.viewer.info.memory.textureBytes += info.memory.textureBytes;
+            this.viewer.info.memory.materials += info.memory.materials;
+            this.viewer.info.memory.totalEstimatedGpuBytes += info.memory.totalEstimatedGpuBytes;
+            const memory = performance["memory"];
+            if (memory)
+                this.viewer.info.memory.usedJSHeapSize = memory.usedJSHeapSize;
+            this.viewer.info.performance.loadTime += performance.now() - this.startTime;
+            console.log("Number of objects:", info.scene.objects);
+            console.log("Number of objects after optimization:", info.optimizedScene.objects);
+            console.log("Total geometry size:", info.memory.totalEstimatedGpuBytes / (1024 * 1024), "MB");
+            console.log("File load time:", this.viewer.info.performance.loadTime, "ms");
+        };
+        this.resize = () => {
+            const rendererSize = this.viewer.renderer.getSize(new Vector2());
+            this.viewer.info.render.viewport.width = rendererSize.x;
+            this.viewer.info.render.viewport.height = rendererSize.y;
+        };
+        this.render = () => {
+            this.viewer.info.render.drawCalls = this.viewer.renderer.info.render.calls;
+            this.viewer.info.render.triangles = this.viewer.renderer.info.render.triangles;
+            this.viewer.info.render.points = this.viewer.renderer.info.render.points;
+            this.viewer.info.render.lines = this.viewer.renderer.info.render.lines;
+        };
+        this.animate = () => {
+            const time = performance.now();
+            this.viewer.info.performance.frameTime = Math.round(time - this.beginTime);
+            this.beginTime = time;
+            this.frames++;
+            if (time - this.prevTime >= 1000) {
+                this.viewer.info.performance.fps = Math.round((this.frames * 1000) / (time - this.prevTime));
+                this.prevTime = time;
+                this.frames = 0;
+            }
+        };
+        this.viewer = viewer;
+        this.startTime = 0;
+        this.beginTime = performance.now();
+        this.prevTime = performance.now();
+        this.frames = 0;
+        this.viewer.addEventListener("initialize", this.initialize);
+        this.viewer.addEventListener("clear", this.clear);
+        this.viewer.addEventListener("optionschange", this.optionsChange);
+        this.viewer.addEventListener("geometrystart", this.geometryStart);
+        this.viewer.addEventListener("databasechunk", this.databaseChunk);
+        this.viewer.addEventListener("geometryend", this.geometryEnd);
+        this.viewer.addEventListener("resize", this.resize);
+        this.viewer.addEventListener("render", this.render);
+        this.viewer.addEventListener("animate", this.animate);
+    }
+    dispose() {
+        this.viewer.removeEventListener("initialize", this.initialize);
+        this.viewer.removeEventListener("clear", this.clear);
+        this.viewer.removeEventListener("optionschange", this.optionsChange);
+        this.viewer.removeEventListener("geometrystart", this.geometryStart);
+        this.viewer.removeEventListener("databasechunk", this.databaseChunk);
+        this.viewer.removeEventListener("geometryend", this.geometryEnd);
+        this.viewer.removeEventListener("resize", this.resize);
+        this.viewer.removeEventListener("render", this.render);
+        this.viewer.addEventListener("animate", this.animate);
+    }
+}
+
 class RenderLoopComponent {
     constructor(viewer) {
         this.animate = (time = 0) => {
@@ -2749,10 +3014,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 });
             });
@@ -2770,6 +3036,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)
@@ -2780,7 +3047,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);
@@ -2796,26 +3062,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));
@@ -3007,6 +3253,7 @@ components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponen
 components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
 components.registerComponent("BackgroundComponent", (viewer) => new BackgroundComponent(viewer));
 components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
+components.registerComponent("InfoComponent", (viewer) => new InfoComponent(viewer));
 components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
 components.registerComponent("HighlighterComponent", (viewer) => new HighlighterComponent(viewer));
@@ -3014,48 +3261,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() {
@@ -3075,6 +3282,144 @@ 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;
+    }
+    getInfo() {
+        const geometries = new Set();
+        const materials = new Set();
+        const textures = new Set();
+        let totalObjects = 0;
+        let totalTriangles = 0;
+        let totalPoints = 0;
+        let totalLines = 0;
+        let totalEdges = 0;
+        let geometryBytes = 0;
+        let textureBytes = 0;
+        this.scene.traverse((object) => {
+            totalObjects++;
+            if (object.geometry) {
+                const geometry = object.geometry;
+                if (!geometries.has(geometry)) {
+                    geometries.add(geometry);
+                    if (geometry.attributes) {
+                        for (const name in geometry.attributes) {
+                            const attribute = geometry.attributes[name];
+                            if (attribute && attribute.array) {
+                                geometryBytes += attribute.array.byteLength;
+                            }
+                        }
+                    }
+                    if (geometry.index && geometry.index.array) {
+                        geometryBytes += geometry.index.array.byteLength;
+                    }
+                }
+                if (geometry.index) {
+                    const indexCount = geometry.index.count;
+                    if (object.isLine || object.isLineSegments) {
+                        totalLines += indexCount / 2;
+                    }
+                    else if (object.isPoints) {
+                        totalPoints += indexCount;
+                    }
+                    else {
+                        totalTriangles += indexCount / 3;
+                    }
+                }
+                else if (geometry.attributes && geometry.attributes.position) {
+                    const positionCount = geometry.attributes.position.count;
+                    if (object.isLine || object.isLineSegments) {
+                        totalLines += positionCount / 2;
+                    }
+                    else if (object.isPoints) {
+                        totalPoints += positionCount;
+                    }
+                    else {
+                        totalTriangles += positionCount / 3;
+                    }
+                }
+                if (object.isLineSegments && geometry.attributes.position) {
+                    totalEdges += geometry.attributes.position.count / 2;
+                }
+            }
+            if (object.material) {
+                const materialsArray = Array.isArray(object.material) ? object.material : [object.material];
+                materialsArray.forEach((material) => {
+                    materials.add(material);
+                    if (material.map && !textures.has(material.map)) {
+                        textures.add(material.map);
+                        textureBytes += estimateTextureSize(material.map);
+                    }
+                    const textureProps = [
+                        "alphaMap",
+                        "aoMap",
+                        "bumpMap",
+                        "displacementMap",
+                        "emissiveMap",
+                        "envMap",
+                        "lightMap",
+                        "metalnessMap",
+                        "normalMap",
+                        "roughnessMap",
+                        "specularMap",
+                        "clearcoatMap",
+                        "clearcoatNormalMap",
+                        "clearcoatRoughnessMap",
+                        "iridescenceMap",
+                        "sheenColorMap",
+                        "sheenRoughnessMap",
+                        "thicknessMap",
+                        "transmissionMap",
+                        "anisotropyMap",
+                        "gradientMap",
+                    ];
+                    textureProps.forEach((prop) => {
+                        const texture = material[prop];
+                        if (texture && !textures.has(texture)) {
+                            textures.add(texture);
+                            textureBytes += estimateTextureSize(texture);
+                        }
+                    });
+                });
+            }
+        });
+        function estimateTextureSize(texture) {
+            if (!texture.image)
+                return 0;
+            const width = texture.image.width || 0;
+            const height = texture.image.height || 0;
+            const bytesPerPixel = 4;
+            const mipmapMultiplier = texture.generateMipmaps ? 1.33 : 1;
+            return width * height * bytesPerPixel * mipmapMultiplier;
+        }
+        const info = new Info();
+        info.scene.objects = totalObjects;
+        info.scene.triangles = Math.floor(totalTriangles);
+        info.scene.points = Math.floor(totalPoints);
+        info.scene.lines = Math.floor(totalLines);
+        info.scene.edges = Math.floor(totalEdges);
+        info.memory.geometries = geometries.size;
+        info.memory.geometryBytes = geometryBytes;
+        info.memory.textures = textures.size;
+        info.memory.textureBytes = Math.floor(textureBytes);
+        info.memory.materials = materials.size;
+        info.memory.totalEstimatedGpuBytes = geometryBytes + Math.floor(textureBytes);
+        info.optimizedScene.objects = info.scene.objects;
+        info.optimizedScene.triangles = info.scene.triangles;
+        info.optimizedScene.points = info.scene.points;
+        info.optimizedScene.lines = info.scene.lines;
+        info.optimizedScene.edges = info.scene.edges;
+        return info;
+    }
     getExtents(target) {
         this.scene.traverseVisible((object) => !object.children.length && target.expandByObject(object));
         return target;
@@ -3097,27 +3442,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 +3496,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,49 +3545,31 @@ class ModelImpl {
             }
             object.children.forEach((x) => explodeObject(x, depth + 1));
         }
-        explodeObject(this.scene, 0);
-        this.scene.updateMatrixWorld();
-        return this;
-    }
-}
-
-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 });
+        explodeObject(this.scene, 0);
+        this.scene.updateMatrixWorld();
         return this;
     }
 }
 
 class DynamicModelImpl extends ModelImpl {
+    getInfo() {
+        const stats = this.gltfLoader.getStats();
+        const info = new Info();
+        info.scene.objects = stats.scene.beforeOptimization.objects;
+        info.scene.triangles = stats.scene.beforeOptimization.triangles;
+        info.scene.lines = stats.scene.beforeOptimization.lines;
+        info.scene.edges = stats.scene.beforeOptimization.edges;
+        info.optimizedScene.objects = stats.scene.afterOptimization.objects;
+        info.optimizedScene.triangles = stats.scene.afterOptimization.triangles;
+        info.optimizedScene.lines = stats.scene.afterOptimization.lines;
+        info.optimizedScene.edges = stats.scene.afterOptimization.edges;
+        info.memory.geometries = stats.memory.geometries.count;
+        info.memory.geometryBytes = stats.memory.geometries.bytes;
+        info.memory.textures = stats.memory.textures.count;
+        info.memory.materials = stats.memory.materials.count;
+        info.memory.totalEstimatedGpuBytes = stats.memory.totalEstimatedGpuBytes;
+        return info;
+    }
     getExtents(target) {
         return target.union(this.gltfLoader.getTotalGeometryExtent());
     }
@@ -3244,31 +3587,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 +3684,16 @@ class GltfStructure {
     this.materials = new Map();
     this.textureCache = new Map();
     this.materialCache = new Map();
+    this.uri = "";
+    this._nextObjectId = 0;
+    this.loadingAborted = false;
+    this.criticalError = null;
   }
   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;
@@ -3352,12 +3709,18 @@ class GltfStructure {
     this.materials.clear();
     this.activeChunkLoads = 0;
     this.chunkQueue = [];
+    this.loadingAborted = false;
+    this.criticalError = null;
   }
   getJson() {
     return this.json;
   }
   scheduleRequest(request) {
     return new Promise((resolve, reject) => {
+      if (this.loadingAborted) {
+        reject(this.criticalError || new Error("Structure loading has been aborted due to critical error"));
+        return;
+      }
       this.pendingRequests.push({
         ...request,
         _resolve: resolve,
@@ -3365,6 +3728,41 @@ class GltfStructure {
       });
     });
   }
+  isCriticalHttpError(error) {
+    if (!error) return false;
+    const status = error.status || error.statusCode || error.code;
+    if (typeof status === "number") {
+      return status >= 400 && status < 600;
+    }
+    if (error.message) {
+      const match = error.message.match(/HTTP\s+(\d{3})/i);
+      if (match) {
+        const code = parseInt(match[1], 10);
+        return code >= 400 && code < 600;
+      }
+    }
+    return false;
+  }
+  abortLoading(error) {
+    if (this.loadingAborted) {
+      return;
+    }
+    this.loadingAborted = true;
+    this.criticalError = error;
+    const requests = [...this.pendingRequests];
+    this.pendingRequests = [];
+    for (const req of requests) {
+      if (req._reject) {
+        req._reject(error);
+      }
+    }
+    console.error(
+      `❌ Critical error for structure "${this.id}". All further loading aborted.`,
+      `\n   Error: ${error.message || error}`,
+      `\n   Rejected ${requests.length} pending chunk requests.`
+    );
+    throw error;
+  }
   async flushBufferRequests() {
     if (!this.pendingRequests || this.pendingRequests.length === 0) return;
     const requests = [...this.pendingRequests];
@@ -3427,10 +3825,16 @@ class GltfStructure {
       }
     }
     const promises = finalRanges.map(async (range, index) => {
+      if (this.loadingAborted) {
+        for (const req of range.requests) {
+          req._reject(this.criticalError || new Error("Structure loading aborted"));
+        }
+        return;
+      }
       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 {
@@ -3443,7 +3847,11 @@ class GltfStructure {
         for (const req of range.requests) {
           req._reject(error);
         }
-        console.warn(`Failed to load chunk ${index + 1}/${finalRanges.length} (${range.start}-${range.end}):`, error);
+        if (this.isCriticalHttpError(error)) {
+          this.abortLoading(error);
+        } else {
+          console.warn(`Failed to load chunk ${index + 1}/${finalRanges.length} (${range.start}-${range.end}):`, error);
+        }
       } finally {
         this.loader.releaseChunkSlot();
       }
@@ -3747,6 +4155,7 @@ class GltfStructure {
   }
 }
 
+const STRUCTURE_ID_SEPARATOR = ":";
 class DynamicGltfLoader {
   constructor(camera, scene, renderer) {
     this.camera = camera;
@@ -3759,6 +4168,7 @@ class DynamicGltfLoader {
       geometryerror: [],
       update: [],
       geometrymemory: [],
+      optimizationprogress: [],
     };
     this.loadDistance = 100;
     this.unloadDistance = 150;
@@ -3800,7 +4210,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 +4218,7 @@ class DynamicGltfLoader {
     this.maxConcurrentChunks = 6;
     this.mergedObjectMap = new Map();
     this.mergedGeometryVisibility = new Map();
+    this._webglInfoCache = null;
   }
   setVisibleEdges(visible) {
     this.visibleEdges = visible;
@@ -3912,6 +4322,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 +4609,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;
@@ -4115,10 +4642,14 @@ class DynamicGltfLoader {
         onLoadFinishCb();
       }
     } catch (error) {
-      if (error.name !== "AbortError") {
-        console.error(`Error loading node ${nodeId}:`, error);
-      }
       node.loading = false;
+      if (error.name === "AbortError") {
+        return;
+      }
+      if (node.structure && node.structure.loadingAborted) {
+        return;
+      }
+      console.error(`Error loading node ${nodeId}:`, error);
     }
   }
   unloadNode(nodeId) {
@@ -4223,12 +4754,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);
@@ -4245,7 +4779,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) {
@@ -4290,7 +4824,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),
@@ -4303,7 +4837,7 @@ class DynamicGltfLoader {
         structure,
         extras: nodeDef.extras,
         geometryExtents,
-        handle,
+        handle: handle || this.getFullHandle(structure.id, structure._nextObjectId++),
       });
     }
     if (nodeDef.children) {
@@ -4376,12 +4910,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 +5236,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 +5302,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 +5352,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 +5398,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");
@@ -4834,8 +5420,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++);
@@ -4871,6 +5455,7 @@ class DynamicGltfLoader {
           }
           const visibilityMaterial = this.createVisibilityMaterial(group.material);
           const mergedMesh = new Mesh(mergedGeometry, visibilityMaterial);
+          mergedMesh.userData.isOptimized = true;
           rootGroup.add(mergedMesh);
           this.mergedMesh.add(mergedMesh);
           this.optimizedOriginalMap.set(mergedMesh, optimizedObjects);
@@ -4894,6 +5479,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 +5491,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 +5511,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;
@@ -4934,12 +5526,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;
@@ -4972,6 +5561,8 @@ 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;
+      mergedLine.userData.isOptimized = true;
       const mergedObjects = [mergedLine];
       if (this.useVAO) {
         this.createVAO(mergedLine);
@@ -4994,9 +5585,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,10 +5604,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++);
@@ -5044,6 +5640,8 @@ 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;
+          mergedLine.userData.isOptimized = true;
           if (this.useVAO) {
             this.createVAO(mergedLine);
           }
@@ -5070,6 +5668,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 +5680,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");
@@ -5090,8 +5693,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);
@@ -5100,6 +5701,7 @@ class DynamicGltfLoader {
         if (geometries.length > 0) {
           const mergedGeometry = mergeGeometries(geometries, false);
           const mergedPoints = new Points(mergedGeometry, group.material);
+          mergedPoints.userData.isOptimized = true;
           if (this.useVAO) {
             this.createVAO(mergedPoints);
           }
@@ -5120,6 +5722,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) => {
@@ -5138,7 +5744,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();
@@ -5172,6 +5777,7 @@ class DynamicGltfLoader {
       }
       const mergedLine = new LineSegments(finalGeometry, material);
       mergedLine.userData.structureId = structureId;
+      mergedLine.userData.isOptimized = true;
       rootGroup.add(mergedLine);
       this.mergedLineSegments.add(mergedLine);
       lineSegmentsArray.forEach((obj) => {
@@ -5355,8 +5961,232 @@ 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 FetchError extends Error {
+    constructor(status, message) {
+        super(message);
+        this.name = "FetchError";
+        this.status = status;
+    }
+}
+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 FetchError(response.status, `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 +6201,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 +6217,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 +6226,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 +6243,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 +6255,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 +6462,26 @@ 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.info = new Info();
+        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 +6489,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;
@@ -5805,6 +6627,8 @@ class Viewer extends EventEmitter2 {
         const deltaTime = (time - this._renderTime) / 1000;
         this._renderTime = time;
         this._renderNeeded = false;
+        this.renderer.info.autoReset = false;
+        this.renderer.info.reset();
         if (this.options.antialiasing === true || this.options.antialiasing === "msaa") {
             this.renderer.render(this.scene, this.camera);
             this.renderer.render(this.helpers, this.camera);
@@ -5821,21 +6645,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 +6690,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 +6710,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 +6752,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 +6820,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 +6873,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 +6895,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 +6944,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 +6955,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 };