@inweb/viewer-three 27.2.2 → 27.3.0

package/dist/viewer-three.module.js

@@ -23,7 +23,7 @@
 
 import { draggersRegistry, commandsRegistry, Options, componentsRegistry, Info, Loader, loadersRegistry, CANVAS_EVENTS } from '@inweb/viewer-core';
 export * from '@inweb/viewer-core';
-import { Line, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, Vector3, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Raycaster, MathUtils, EdgesGeometry, Matrix4, Vector4, Controls, Box3, Clock, 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 { EventDispatcher, Vector3, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Object3D, BufferGeometry, Float32BufferAttribute, Line, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, Line3, Raycaster, MathUtils, EdgesGeometry, Plane, Matrix4, Vector4, Controls, Box3, Clock, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, REVISION, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, TextureLoader, BufferAttribute, PointsMaterial, DataTexture, FloatType, NearestFilter, 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';
@@ -41,41 +41,6 @@ import { EventEmitter2 } from '@inweb/eventemitter2';
 import { Markup } from '@inweb/markup';
 export * from '@inweb/markup';
 
-class PlaneHelper2 extends Line {
-    constructor(size = 1, color = 0xc0c0c0) {
-        const positions = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0];
-        const geometry = new BufferGeometry();
-        geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
-        geometry.computeBoundingSphere();
-        super(geometry, new LineBasicMaterial({ color, toneMapped: false }));
-        this.type = "PlaneHelper2";
-        this.size = size;
-        const positions2 = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0];
-        const geometry2 = new BufferGeometry();
-        geometry2.setAttribute("position", new Float32BufferAttribute(positions2, 3));
-        geometry2.computeBoundingSphere();
-        this.helper = new Mesh(geometry2, new MeshBasicMaterial({
-            color,
-            opacity: 0.2,
-            transparent: true,
-            depthWrite: false,
-            toneMapped: false,
-            side: DoubleSide,
-        }));
-        this.add(this.helper);
-    }
-    dispose() {
-        this.geometry.dispose();
-        this.material.dispose();
-        this.helper.geometry.dispose();
-        this.helper.material.dispose();
-    }
-    updateMatrixWorld(force) {
-        this.scale.set(0.5 * this.size, 0.5 * this.size, 1);
-        super.updateMatrixWorld(force);
-    }
-}
-
 const _changeEvent = { type: "change" };
 const _startEvent = { type: "start" };
 const _endEvent = { type: "end" };
@@ -734,6 +699,166 @@ class OrbitControls extends EventDispatcher {
   }
 }
 
+class PlaneHelper2 extends Object3D {
+    constructor(size = 1, color = 0xf0f0f0, opacity = 0.15) {
+        super();
+        this.type = "PlaneHelper2";
+        this.size = size;
+        const positions = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0];
+        const geometry = new BufferGeometry();
+        geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+        geometry.computeBoundingSphere();
+        this.outline = new Line(geometry, new LineBasicMaterial({ color, toneMapped: false }));
+        const positions2 = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0];
+        const geometry2 = new BufferGeometry();
+        geometry2.setAttribute("position", new Float32BufferAttribute(positions2, 3));
+        geometry2.computeBoundingSphere();
+        this.mesh = new Mesh(geometry2, new MeshBasicMaterial({
+            color,
+            opacity,
+            transparent: true,
+            depthWrite: false,
+            toneMapped: false,
+            side: DoubleSide,
+        }));
+        this.add(this.outline);
+        this.add(this.mesh);
+    }
+    dispose() {
+        this.outline.geometry.dispose();
+        this.outline.material.dispose();
+        this.mesh.geometry.dispose();
+        this.mesh.material.dispose();
+    }
+    updateMatrixWorld(force) {
+        this.scale.set(0.5 * this.size, 0.5 * this.size, 1);
+        super.updateMatrixWorld(force);
+    }
+    getLineMaterial() {
+        return this.outline.material;
+    }
+    getMeshMaterial() {
+        return this.mesh.material;
+    }
+}
+
+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 Snapper {
+    constructor(camera, renderer, canvas) {
+        this.camera = camera;
+        this.renderer = renderer;
+        this.canvas = canvas;
+        this.threshold = 0.0001;
+        this.raycaster = new Raycaster();
+        this.detectRadiusInPixels = this.isMobile() ? MOBILE_SNAP_DISTANCE : DESKTOP_SNAP_DISTANCE;
+        this.edgesCache = new WeakMap();
+    }
+    isMobile() {
+        if (typeof navigator === "undefined")
+            return false;
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent);
+    }
+    getMousePosition(event, target) {
+        return target.set(event.clientX, event.clientY);
+    }
+    getPointerIntersects(mouse, objects, recursive = false, clip = true) {
+        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;
+        const coords = new Vector2(x, y);
+        this.raycaster.setFromCamera(coords, this.camera);
+        this.raycaster.params = {
+            Mesh: {},
+            Line: { threshold: this.threshold },
+            Line2: { threshold: this.threshold },
+            LOD: {},
+            Points: { threshold: this.threshold },
+            Sprite: {},
+        };
+        let intersects = this.raycaster.intersectObjects(objects, recursive);
+        if (clip) {
+            const clippingPlanes = this.renderer.clippingPlanes || [];
+            clippingPlanes.forEach((plane) => {
+                intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
+            });
+        }
+        return intersects;
+    }
+    getDetectRadius(point) {
+        const camera = this.camera;
+        if (camera.isOrthographicCamera) {
+            const fieldHeight = (camera.top - camera.bottom) / camera.zoom;
+            const canvasHeight = this.canvas.height;
+            const worldUnitsPerPixel = fieldHeight / canvasHeight;
+            return this.detectRadiusInPixels * worldUnitsPerPixel;
+        }
+        if (camera.isPerspectiveCamera) {
+            const distance = camera.position.distanceTo(point);
+            const fieldHeight = 2 * Math.tan(MathUtils.degToRad(camera.fov * 0.5)) * distance;
+            const canvasHeight = this.canvas.height;
+            const worldUnitsPerPixel = fieldHeight / canvasHeight;
+            return this.detectRadiusInPixels * worldUnitsPerPixel;
+        }
+        return 0.1;
+    }
+    getSnapPoint(mouse, objects) {
+        const intersections = this.getPointerIntersects(mouse, objects);
+        if (intersections.length === 0)
+            return undefined;
+        const object = intersections[0].object;
+        const intersectionPoint = intersections[0].point;
+        const localPoint = object.worldToLocal(intersectionPoint.clone());
+        let snapPoint;
+        let snapDistance = this.getDetectRadius(intersectionPoint);
+        const geometry = object.geometry;
+        const positions = geometry.attributes.position.array;
+        for (let i = 0; i < positions.length; i += 3) {
+            _vertex.set(positions[i], positions[i + 1], positions[i + 2]);
+            const distance = _vertex.distanceTo(localPoint);
+            if (distance < snapDistance) {
+                snapDistance = distance;
+                snapPoint = _vertex.clone();
+            }
+        }
+        if (snapPoint)
+            return object.localToWorld(snapPoint);
+        let edges = this.edgesCache.get(geometry);
+        if (!edges) {
+            edges = new EdgesGeometry(geometry);
+            this.edgesCache.set(geometry, edges);
+        }
+        const edgePositions = edges.attributes.position.array;
+        for (let i = 0; i < edgePositions.length; i += 6) {
+            _start.set(edgePositions[i], edgePositions[i + 1], edgePositions[i + 2]);
+            _end.set(edgePositions[i + 3], edgePositions[i + 4], edgePositions[i + 5]);
+            _line.set(_start, _end);
+            _line.getCenter(_center);
+            const centerDistance = _center.distanceTo(localPoint);
+            if (centerDistance < snapDistance) {
+                snapDistance = centerDistance;
+                snapPoint = _center.clone();
+                continue;
+            }
+            _line.closestPointToPoint(localPoint, true, _projection);
+            const lineDistance = _projection.distanceTo(localPoint);
+            if (lineDistance < snapDistance) {
+                snapDistance = lineDistance;
+                snapPoint = _projection.clone();
+            }
+        }
+        if (snapPoint)
+            return object.localToWorld(snapPoint);
+        return intersectionPoint.clone();
+    }
+}
+
 class OrbitDragger {
     constructor(viewer) {
         this.updateControls = () => {
@@ -826,12 +951,18 @@ class OrbitDragger {
 }
 
 class CuttingPlaneDragger extends OrbitDragger {
-    constructor(viewer, normal) {
+    constructor(viewer) {
         super(viewer);
+        this.helpers = [];
+        this.activeHelper = null;
         this.transformChange = () => {
-            this.plane.normal.copy(new Vector3(0, 0, -1)).applyQuaternion(this.planeCenter.quaternion);
-            this.plane.constant = -this.planeCenter.position.dot(this.plane.normal);
+            if (!this.activeHelper)
+                return;
+            const plane = this.activeHelper.plane;
+            plane.normal.copy(new Vector3(0, 0, -1)).applyQuaternion(this.activeHelper.quaternion);
+            plane.constant = -this.activeHelper.position.dot(plane.normal);
             this.viewer.update();
+            this.changed = true;
         };
         this.translateDrag = (event) => {
             this.orbit.enabled = !event.value;
@@ -842,45 +973,83 @@ class CuttingPlaneDragger extends OrbitDragger {
             this.translate.enabled = !event.value;
         };
         this.updatePlaneSize = () => {
-            this.planeHelper.size = this.viewer.extents.getSize(new Vector3()).length() || 1;
+            const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
+            this.helpers.forEach((planeHelper) => (planeHelper.size = extentsSize));
             this.viewer.update();
         };
         this.updateTransformCamera = () => {
             this.translate.camera = this.viewer.camera;
             this.rotate.camera = this.viewer.camera;
+            this.snapper.camera = this.viewer.camera;
+        };
+        this.clearHelpers = () => {
+            this.setActiveHelper();
+            this.helpers.forEach((helper) => {
+                helper.removeFromParent();
+                helper.dispose();
+            });
+            this.helpers = [];
+            this.viewer.update();
         };
         this.onKeyDown = (event) => {
             if (event.key === "Shift")
                 this.rotate.setRotationSnap(Math.PI / 4);
+            if (event.key === "Delete" || event.key === "Backspace")
+                this.deleteActivePlane();
+            if (event.key === "Escape" && (this.translate.dragging || this.rotate.dragging))
+                this.reset();
         };
         this.onKeyUp = (event) => {
             if (event.key === "Shift")
                 this.rotate.setRotationSnap(null);
         };
+        this.onPointerDown = (event) => {
+            if (event.button !== 0 || !event.isPrimary)
+                return;
+            this.snapper.getMousePosition(event, this.downPosition);
+            this.saveState();
+        };
+        this.onPointerUp = (event) => {
+            if (event.button !== 0)
+                return;
+            const upPosition = this.snapper.getMousePosition(event, new Vector2());
+            if (upPosition.distanceTo(this.downPosition) !== 0)
+                return;
+            const intersects = this.snapper.getPointerIntersects(upPosition, this.helpers, true, false);
+            if (intersects.length === 0)
+                return;
+            this.setActiveHelper(intersects[0].object.parent);
+        };
+        this.onPointerCancel = (event) => {
+            this.viewer.canvas.dispatchEvent(new PointerEvent("pointerup", event));
+        };
         this.onDoubleClick = (event) => {
-            event.stopPropagation();
-            this.planeCenter.rotateOnAxis(new Vector3(0, 1, 0), Math.PI);
+            if (!this.activeHelper)
+                return;
+            const mousePosition = this.snapper.getMousePosition(event, new Vector2());
+            const intersects = this.snapper.getPointerIntersects(mousePosition, [this.activeHelper], true, false);
+            if (intersects.length === 0)
+                return;
+            this.activeHelper.rotateOnAxis(new Vector3(0, 1, 0), Math.PI);
             this.transformChange();
+            event.stopPropagation();
         };
-        const extentsSize = viewer.extents.getSize(new Vector3()).length() || 1;
-        const extentsCenter = viewer.extents.getCenter(new Vector3());
-        const constant = -extentsCenter.dot(normal);
-        this.plane = new Plane(normal, constant);
         if (!viewer.renderer.clippingPlanes)
             viewer.renderer.clippingPlanes = [];
-        viewer.renderer.clippingPlanes.push(this.plane);
-        this.planeCenter = new Object3D();
-        this.planeCenter.position.copy(extentsCenter);
-        this.planeCenter.quaternion.setFromUnitVectors(new Vector3(0, 0, -1), normal);
-        this.viewer.helpers.add(this.planeCenter);
-        this.planeHelper = new PlaneHelper2(extentsSize);
-        this.planeCenter.add(this.planeHelper);
+        this.clippingPlanes = viewer.renderer.clippingPlanes;
+        this.clippingPlanes.forEach((plane) => this.addHelper(plane));
+        const extentsSize = viewer.extents.getSize(new Vector3()).length() || 1;
+        this.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
+        this.snapper.threshold = extentsSize / 10000;
+        this.downPosition = new Vector2();
+        this.position0 = new Vector3();
+        this.quaternion0 = new Quaternion();
         this.translate = new TransformControls(viewer.camera, viewer.canvas);
+        this.translate.setMode("translate");
         this.translate.setSpace("local");
         this.translate.showX = false;
         this.translate.showY = false;
         this.translate.showZ = true;
-        this.translate.attach(this.planeCenter);
         this.translate.addEventListener("change", this.transformChange);
         this.translate.addEventListener("dragging-changed", this.translateDrag);
         this.viewer.helpers.add(this.translate.getHelper());
@@ -890,14 +1059,18 @@ class CuttingPlaneDragger extends OrbitDragger {
         this.rotate.showX = true;
         this.rotate.showY = true;
         this.rotate.showZ = false;
-        this.rotate.attach(this.planeCenter);
         this.rotate.addEventListener("change", this.transformChange);
         this.rotate.addEventListener("dragging-changed", this.rotateDrag);
         this.viewer.helpers.add(this.rotate.getHelper());
+        this.setActiveHelper(this.helpers[this.helpers.length - 1]);
         this.viewer.addEventListener("explode", this.updatePlaneSize);
         this.viewer.addEventListener("show", this.updatePlaneSize);
         this.viewer.addEventListener("showall", this.updatePlaneSize);
         this.viewer.addEventListener("changecameramode", this.updateTransformCamera);
+        this.viewer.addEventListener("clearslices", this.clearHelpers);
+        this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown, true);
+        this.viewer.canvas.addEventListener("pointerup", this.onPointerUp, true);
+        this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel, true);
         this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
         window.addEventListener("keydown", this.onKeyDown);
         window.addEventListener("keyup", this.onKeyUp);
@@ -908,6 +1081,10 @@ class CuttingPlaneDragger extends OrbitDragger {
         this.viewer.removeEventListener("show", this.updatePlaneSize);
         this.viewer.removeEventListener("showall", this.updatePlaneSize);
         this.viewer.removeEventListener("changecameramode", this.updateTransformCamera);
+        this.viewer.removeEventListener("clearslices", this.clearHelpers);
+        this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown, true);
+        this.viewer.canvas.removeEventListener("pointerup", this.onPointerUp, true);
+        this.viewer.canvas.removeEventListener("pointercancel", this.onPointerCancel, true);
         this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
         window.removeEventListener("keydown", this.onKeyDown);
         window.removeEventListener("keyup", this.onKeyUp);
@@ -921,28 +1098,108 @@ class CuttingPlaneDragger extends OrbitDragger {
         this.rotate.getHelper().removeFromParent();
         this.rotate.detach();
         this.rotate.dispose();
-        this.planeHelper.removeFromParent();
-        this.planeHelper.dispose();
-        this.planeCenter.removeFromParent();
+        this.helpers.forEach((helper) => {
+            helper.removeFromParent();
+            helper.dispose();
+        });
+        this.helpers = [];
+        this.activeHelper = null;
         super.dispose();
     }
+    addHelper(plane) {
+        const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
+        const extentsCenter = this.viewer.extents.getCenter(new Vector3());
+        const helper = new PlaneHelper2(extentsSize);
+        helper.plane = plane;
+        helper.position.copy(plane.projectPoint(extentsCenter, new Vector3()));
+        helper.quaternion.setFromUnitVectors(new Vector3(0, 0, -1), plane.normal);
+        this.helpers.push(helper);
+        this.viewer.helpers.add(helper);
+        return helper;
+    }
+    setActiveHelper(helper) {
+        if (helper === this.activeHelper)
+            return;
+        if (this.activeHelper) {
+            this.activeHelper.getLineMaterial().color.setHex(0xf0f0f0);
+            this.activeHelper.getMeshMaterial().opacity = 0.15;
+            this.translate.detach();
+            this.rotate.detach();
+        }
+        this.activeHelper = helper;
+        if (this.activeHelper) {
+            this.activeHelper.getLineMaterial().color.setHex(0xd0d0d0);
+            this.activeHelper.getMeshMaterial().opacity = 0.3;
+            this.translate.attach(this.activeHelper);
+            this.rotate.attach(this.activeHelper);
+        }
+        this.viewer.update();
+    }
+    saveState() {
+        if (!this.activeHelper)
+            return;
+        this.position0.copy(this.activeHelper.position);
+        this.quaternion0.copy(this.activeHelper.quaternion);
+    }
+    reset() {
+        if (!this.activeHelper)
+            return;
+        this.translate.dragging = false;
+        this.rotate.dragging = false;
+        this.orbit.state = STATE.NONE;
+        this.activeHelper.position.copy(this.position0);
+        this.activeHelper.quaternion.copy(this.quaternion0);
+        this.transformChange();
+    }
+    addPlane(normal) {
+        const extentsCenter = this.viewer.extents.getCenter(new Vector3());
+        const constant = -extentsCenter.dot(normal);
+        const plane = new Plane(normal, constant);
+        this.clippingPlanes.push(plane);
+        const helper = this.addHelper(plane);
+        this.setActiveHelper(helper);
+    }
+    addPlaneX() {
+        this.addPlane(new Vector3(-1, 0, 0));
+    }
+    addPlaneY() {
+        this.addPlane(new Vector3(0, -1, 0));
+    }
+    addPlaneZ() {
+        this.addPlane(new Vector3(0, 0, -1));
+    }
+    deleteActivePlane() {
+        if (!this.activeHelper)
+            return;
+        const helper = this.activeHelper;
+        const index = this.clippingPlanes.indexOf(helper.plane);
+        if (index !== -1)
+            this.clippingPlanes.splice(index, 1);
+        this.helpers = this.helpers.filter((x) => x !== helper);
+        helper.removeFromParent();
+        helper.dispose();
+        this.setActiveHelper(this.helpers[this.helpers.length - 1]);
+    }
 }
 
 class CuttingPlaneXAxisDragger extends CuttingPlaneDragger {
     constructor(viewer) {
-        super(viewer, new Vector3(-1, 0, 0));
+        super(viewer);
+        this.addPlaneX();
     }
 }
 
 class CuttingPlaneYAxisDragger extends CuttingPlaneDragger {
     constructor(viewer) {
-        super(viewer, new Vector3(0, -1, 0));
+        super(viewer);
+        this.addPlaneY();
     }
 }
 
 class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
     constructor(viewer) {
-        super(viewer, new Vector3(0, 0, -1));
+        super(viewer);
+        this.addPlaneZ();
     }
 }
 
@@ -1019,120 +1276,6 @@ function formatDistance(distance, units, precision = 2) {
     }
 }
 
-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 Snapper {
-    constructor(camera, renderer, canvas) {
-        this.camera = camera;
-        this.renderer = renderer;
-        this.canvas = canvas;
-        this.threshold = 0.0001;
-        this.raycaster = new Raycaster();
-        this.detectRadiusInPixels = this.isMobile() ? MOBILE_SNAP_DISTANCE : DESKTOP_SNAP_DISTANCE;
-        this.edgesCache = new WeakMap();
-    }
-    isMobile() {
-        if (typeof navigator === "undefined")
-            return false;
-        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent);
-    }
-    getMousePosition(event, target) {
-        return target.set(event.clientX, event.clientY);
-    }
-    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;
-        const coords = new Vector2(x, y);
-        this.raycaster.setFromCamera(coords, this.camera);
-        this.raycaster.params = {
-            Mesh: {},
-            Line: { threshold: this.threshold },
-            Line2: { threshold: this.threshold },
-            LOD: {},
-            Points: { threshold: this.threshold },
-            Sprite: {},
-        };
-        let intersects = this.raycaster.intersectObjects(objects, false);
-        (this.renderer.clippingPlanes || []).forEach((plane) => {
-            intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
-        });
-        return intersects;
-    }
-    getDetectRadius(point) {
-        const camera = this.camera;
-        if (camera.isOrthographicCamera) {
-            const fieldHeight = (camera.top - camera.bottom) / camera.zoom;
-            const canvasHeight = this.canvas.height;
-            const worldUnitsPerPixel = fieldHeight / canvasHeight;
-            return this.detectRadiusInPixels * worldUnitsPerPixel;
-        }
-        if (camera.isPerspectiveCamera) {
-            const distance = camera.position.distanceTo(point);
-            const fieldHeight = 2 * Math.tan(MathUtils.degToRad(camera.fov * 0.5)) * distance;
-            const canvasHeight = this.canvas.height;
-            const worldUnitsPerPixel = fieldHeight / canvasHeight;
-            return this.detectRadiusInPixels * worldUnitsPerPixel;
-        }
-        return 0.1;
-    }
-    getSnapPoint(mouse, objects) {
-        const intersections = this.getPointerIntersects(mouse, objects);
-        if (intersections.length === 0)
-            return undefined;
-        const object = intersections[0].object;
-        const intersectionPoint = intersections[0].point;
-        const localPoint = object.worldToLocal(intersectionPoint.clone());
-        let snapPoint;
-        let snapDistance = this.getDetectRadius(intersectionPoint);
-        const geometry = object.geometry;
-        const positions = geometry.attributes.position.array;
-        for (let i = 0; i < positions.length; i += 3) {
-            _vertex.set(positions[i], positions[i + 1], positions[i + 2]);
-            const distance = _vertex.distanceTo(localPoint);
-            if (distance < snapDistance) {
-                snapDistance = distance;
-                snapPoint = _vertex.clone();
-            }
-        }
-        if (snapPoint)
-            return object.localToWorld(snapPoint);
-        let edges = this.edgesCache.get(geometry);
-        if (!edges) {
-            edges = new EdgesGeometry(geometry);
-            this.edgesCache.set(geometry, edges);
-        }
-        const edgePositions = edges.attributes.position.array;
-        for (let i = 0; i < edgePositions.length; i += 6) {
-            _start.set(edgePositions[i], edgePositions[i + 1], edgePositions[i + 2]);
-            _end.set(edgePositions[i + 3], edgePositions[i + 4], edgePositions[i + 5]);
-            _line.set(_start, _end);
-            _line.getCenter(_center);
-            const centerDistance = _center.distanceTo(localPoint);
-            if (centerDistance < snapDistance) {
-                snapDistance = centerDistance;
-                snapPoint = _center.clone();
-                continue;
-            }
-            _line.closestPointToPoint(localPoint, true, _projection);
-            const lineDistance = _projection.distanceTo(localPoint);
-            if (lineDistance < snapDistance) {
-                snapDistance = lineDistance;
-                snapPoint = _projection.clone();
-            }
-        }
-        if (snapPoint)
-            return object.localToWorld(snapPoint);
-        return intersectionPoint.clone();
-    }
-}
-
 const _downPoint = new Vector2();
 class MeasureLineDragger extends OrbitDragger {
     constructor(viewer) {
@@ -1616,14 +1759,20 @@ class WalkControls extends Controls {
             }
         };
         this.onKeyUp = (event) => {
-            if (this.moveKeys.delete(event.code))
+            if (this.moveKeys.delete(event.code)) {
+                if (this.moveKeys.size === 0) {
+                    this._rebuildGroundBox(this.object.position);
+                }
                 this.update();
+            }
         };
         this.camera = camera;
         this.groundObjects = groundObjects;
         for (const obj of groundObjects) {
             this._groundObjectBoxes.set(obj, new Box3().setFromObject(obj));
         }
+        const pos = this.object.position;
+        this._rebuildGroundBox(pos);
         this.raycaster = new Raycaster();
         this.raycaster.near = 0;
         this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
@@ -2232,6 +2381,7 @@ draggers.registerDragger("Pan", (viewer) => new PanDragger(viewer));
 draggers.registerDragger("Orbit", (viewer) => new OrbitDragger(viewer));
 draggers.registerDragger("Zoom", (viewer) => new ZoomDragger(viewer));
 draggers.registerDragger("MeasureLine", (viewer) => new MeasureLineDragger(viewer));
+draggers.registerDragger("CuttingPlane", (viewer) => new CuttingPlaneDragger(viewer));
 draggers.registerDragger("CuttingPlaneXAxis", (viewer) => new CuttingPlaneXAxisDragger(viewer));
 draggers.registerDragger("CuttingPlaneYAxis", (viewer) => new CuttingPlaneYAxisDragger(viewer));
 draggers.registerDragger("CuttingPlaneZAxis", (viewer) => new CuttingPlaneZAxisDragger(viewer));
@@ -3127,7 +3277,7 @@ class SelectionComponent {
             this.getMousePosition(event, this.downPosition);
         };
         this.onPointerUp = (event) => {
-            if (!event.isPrimary)
+            if (!event.isPrimary || event.button !== 0)
                 return;
             const upPosition = this.getMousePosition(event, new Vector2());
             if (upPosition.distanceTo(this.downPosition) !== 0)
@@ -3656,19 +3806,19 @@ class ModelImpl {
         return this;
     }
     explode(scale = 0, coeff = 4) {
-        const centers = new Map();
-        const getObjectCenter = (object, target) => {
+        const centersCache = new Map();
+        const calcObjectCenter = (object, target) => {
             const extents = new Box3().setFromObject(object);
             const handle = object.userData.handle;
             if (!handle)
                 return extents.getCenter(target);
-            const center = centers.get(handle);
+            const center = centersCache.get(handle);
             if (center)
                 return target.copy(center);
             const objects = this.getObjectsByHandles(handle);
             objects.forEach((x) => extents.expandByObject(x));
             extents.getCenter(target);
-            centers.set(handle, target.clone());
+            centersCache.set(handle, target.clone());
             return target;
         };
         function calcExplodeDepth(object, depth) {
@@ -3679,13 +3829,14 @@ class ModelImpl {
                     result = objectDepth;
             });
             object.userData.originalPosition = object.position.clone();
-            object.userData.originalCenter = getObjectCenter(object, new Vector3());
+            object.userData.originalCenter = calcObjectCenter(object, new Vector3());
             return result;
         }
         const explodeScale = scale / 100;
         const explodeRoot = this.scene;
-        if (!explodeRoot.userData.explodeDepth)
+        if (!explodeRoot.userData.explodeDepth) {
             explodeRoot.userData.explodeDepth = calcExplodeDepth(explodeRoot, 1);
+        }
         const maxDepth = explodeRoot.userData.explodeDepth;
         const scaledExplodeDepth = explodeScale * maxDepth + 1;
         const explodeDepth = 0 | scaledExplodeDepth;
@@ -3702,8 +3853,8 @@ class ModelImpl {
                     objectScale *= currentSegmentFraction;
                 const parentCenter = object.parent.userData.originalCenter;
                 const objectCenter = object.userData.originalCenter;
-                const objectOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
-                object.position.add(objectOffset);
+                const localOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
+                object.position.add(localOffset);
             }
             object.children.forEach((x) => explodeObject(x, depth + 1));
         }
@@ -3795,67 +3946,73 @@ class DynamicModelImpl extends ModelImpl {
         return this;
     }
     explode(scale = 0, coeff = 4) {
-        const centers = new Map();
+        const centersCache = new Map();
         const calcObjectCenter = (object, target) => {
             const extents = new Box3().setFromObject(object);
             const handle = object.userData.handle;
             if (!handle)
                 return extents.getCenter(target);
-            const center = centers.get(handle);
+            const center = centersCache.get(handle);
             if (center)
                 return target.copy(center);
             const objects = this.getObjectsByHandles(handle);
             objects.forEach((x) => extents.expandByObject(x));
             extents.getCenter(target);
-            centers.set(handle, target.clone());
+            centersCache.set(handle, target.clone());
             return target;
         };
-        function calcExplodeDepth(object, depth) {
-            let result = depth;
-            object.children
-                .filter((x) => !x.userData.isOptimized)
-                .forEach((x) => {
-                const objectDepth = calcExplodeDepth(x, depth + 1);
-                if (result < objectDepth)
-                    result = objectDepth;
-            });
+        const calcObjectDepth = (object) => {
+            if (object.userData.depth !== undefined)
+                return object.userData.depth;
+            const parent = object.parent;
+            const depth = parent && object !== explodeRoot ? calcObjectDepth(parent) + 1 : 0;
+            object.userData.depth = depth;
             object.userData.originalPosition = object.position.clone();
             object.userData.originalCenter = calcObjectCenter(object, new Vector3());
-            return result;
-        }
+            return depth;
+        };
         const explodeScale = scale / 100;
         const explodeRoot = this.scene.children[0];
-        if (!explodeRoot.userData.explodeDepth)
-            explodeRoot.userData.explodeDepth = calcExplodeDepth(explodeRoot, 1);
+        if (!explodeRoot.userData.explodeDepth) {
+            let maxDepth = 0;
+            this.gltfLoader.originalObjects.forEach((object) => {
+                const depth = calcObjectDepth(object);
+                if (depth > maxDepth)
+                    maxDepth = depth;
+            });
+            explodeRoot.userData.explodeDepth = maxDepth;
+        }
         const maxDepth = explodeRoot.userData.explodeDepth;
         const scaledExplodeDepth = explodeScale * maxDepth + 1;
         const explodeDepth = 0 | scaledExplodeDepth;
         const currentSegmentFraction = scaledExplodeDepth - explodeDepth;
-        const transformMap = new Map();
-        function explodeObject(object, depth) {
-            if (object.isCamera)
-                return;
-            if (object.userData.isHighlightWireframe)
-                return;
-            object.position.copy(object.userData.originalPosition);
-            if (depth > 0 && depth <= explodeDepth && !object.userData.isExplodeLocked) {
+        const offsetCache = new Map();
+        const calcObjectOffset = (object, target) => {
+            if (offsetCache.has(object))
+                return target.copy(offsetCache.get(object));
+            const parent = object.parent;
+            if (parent && object !== explodeRoot)
+                calcObjectOffset(parent, target);
+            const depth = object.userData.depth;
+            if (depth > 0 && depth <= explodeDepth) {
                 let objectScale = explodeScale * coeff;
                 if (depth === explodeDepth)
                     objectScale *= currentSegmentFraction;
-                const parentCenter = object.parent.userData.originalCenter;
+                const parentCenter = parent.userData.originalCenter;
                 const objectCenter = object.userData.originalCenter;
-                const objectOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
-                object.position.add(objectOffset);
-                const matrix = new Matrix4().makeTranslation(objectOffset.x, objectOffset.y, objectOffset.z);
-                transformMap.set(object, matrix);
+                const localOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
+                target.add(localOffset);
             }
-            object.children
-                .filter((x) => !x.userData.isOptimized)
-                .forEach((x) => explodeObject(x, depth + 1));
-        }
-        explodeObject(explodeRoot, 0);
-        this.scene.updateMatrixWorld();
+            offsetCache.set(object, target.clone());
+            return target;
+        };
+        const transformMap = new Map();
+        this.gltfLoader.originalObjects.forEach((object) => {
+            const globalOffset = calcObjectOffset(object, new Vector3());
+            transformMap.set(object, new Matrix4().makeTranslation(globalOffset));
+        });
         this.gltfLoader.applyObjectTransforms(transformMap);
+        this.scene.updateMatrixWorld();
         return this;
     }
 }
@@ -4432,6 +4589,8 @@ class DynamicGltfLoader {
     this.oldOptimizeObjects = new Set();
     this.objectTransforms = new Map();
     this.transformedGeometries = new Map();
+    this.syncTransformsToOriginalObjects = true;
+    this._originalObjectMatrices = new Map();
     this.activeChunkLoads = 0;
     this.chunkQueue = [];
     this.objectIdToIndex = new Map();
@@ -4441,6 +4600,81 @@ class DynamicGltfLoader {
     this.mergedObjectMap = new Map();
     this.mergedGeometryVisibility = new Map();
     this._webglInfoCache = null;
+    this.transformTextureSize = 1024;
+    this.transformTexture = this.createDummyTexture();
+    this.transformData = null;
+    this.identityTransformData = null;
+    this.visibilityMaterials = new Set();
+  }
+  createDummyTexture() {
+    const data = new Float32Array(16);
+    const identity = new Matrix4();
+    identity.toArray(data);
+    const dummyData = new Float32Array(16);
+    identity.toArray(dummyData);
+    const dummyTexture = new DataTexture(dummyData, 4, 1, RGBAFormat, FloatType);
+    dummyTexture.minFilter = NearestFilter;
+    dummyTexture.magFilter = NearestFilter;
+    dummyTexture.needsUpdate = true;
+    return dummyTexture;
+  }
+  initTransformTexture() {
+    if (this.transformTexture) {
+      this.transformTexture.dispose();
+    }
+    const maxInstanceCount = this.maxObjectId + 1;
+    let size = Math.sqrt(maxInstanceCount * 4);
+    size = Math.ceil(size / 4) * 4;
+    size = Math.max(size, 4);
+    this.transformTextureSize = size;
+    const arraySize = size * size * 4;
+    this.transformData = new Float32Array(arraySize);
+    this.identityTransformData = new Float32Array(arraySize);
+    for (let i = 0; i <= this.maxObjectId; i++) {
+      const base = i * 16;
+      if (base + 15 < arraySize) {
+        this.identityTransformData[base + 0] = 1;
+        this.identityTransformData[base + 5] = 1;
+        this.identityTransformData[base + 10] = 1;
+        this.identityTransformData[base + 15] = 1;
+      }
+    }
+    this._resetTransformData(false);
+    this.transformTexture = new DataTexture(this.transformData, size, size, RGBAFormat, FloatType);
+    this.transformTexture.needsUpdate = true;
+    this.transformTexture.generateMipmaps = false;
+    console.log(`Initialized transform texture: ${size}x${size} for ${maxInstanceCount} objects`);
+    this.updateMaterialUniforms();
+    this.visibilityMaterials.forEach((material) => {
+      material.needsUpdate = true;
+    });
+  }
+  _resetTransformData(updateTexture = true) {
+    if (!this.transformData || !this.identityTransformData) return;
+    this.transformData.set(this.identityTransformData);
+    if (updateTexture) {
+      this.updateTransformTexture();
+    }
+  }
+  updateMaterialUniforms() {
+    if (
+      this._lastTransformTexture === this.transformTexture &&
+      this._lastTransformTextureSize === this.transformTextureSize
+    ) {
+      return;
+    }
+    this._lastTransformTexture = this.transformTexture;
+    this._lastTransformTextureSize = this.transformTextureSize;
+    this.visibilityMaterials.forEach((material) => {
+      if (material.userData && material.userData.visibilityUniforms) {
+        material.userData.visibilityUniforms.transformTexture.value = this.transformTexture;
+        material.userData.visibilityUniforms.transformTextureSize.value = this.transformTextureSize;
+      }
+    });
+  }
+  updateTransformTexture() {
+    if (!this.transformTexture) return;
+    this.transformTexture.needsUpdate = true;
   }
   setVisibleEdges(visible) {
     this.visibleEdges = visible;
@@ -5330,36 +5564,82 @@ class DynamicGltfLoader {
     }
   }
   createVisibilityMaterial(material) {
+    this.visibilityMaterials.add(material);
+    const uniforms = {
+      transformTexture: { value: this.transformTexture },
+      transformTextureSize: { value: this.transformTextureSize },
+    };
+    material.userData.visibilityUniforms = uniforms;
     material.onBeforeCompile = (shader) => {
+      shader.uniforms.transformTexture = uniforms.transformTexture;
+      shader.uniforms.transformTextureSize = uniforms.transformTextureSize;
       shader.vertexShader = shader.vertexShader.replace(
         "#include <common>",
         `
         #include <common>
+        
         attribute float visibility;
+        attribute float objectId;
         varying float vVisibility;
+        uniform highp sampler2D transformTexture;
+        uniform float transformTextureSize;
+
+        mat4 getTransformMatrix(float instanceId) {
+            int size = int(transformTextureSize);
+            int index = int(instanceId) * 4;
+            
+            int x0 = index % size;
+            int y0 = index / size;
+            
+            vec4 row0 = texelFetch(transformTexture, ivec2(x0, y0), 0);
+            vec4 row1 = texelFetch(transformTexture, ivec2(x0 + 1, y0), 0);
+            vec4 row2 = texelFetch(transformTexture, ivec2(x0 + 2, y0), 0);
+            vec4 row3 = texelFetch(transformTexture, ivec2(x0 + 3, y0), 0);
+            
+            return mat4(row0, row1, row2, row3);
+        }
         `
       );
-      shader.fragmentShader = shader.fragmentShader.replace(
-        "#include <common>",
+      shader.vertexShader = shader.vertexShader.replace(
+        "void main() {",
         `
-        #include <common>
-        varying float vVisibility;
+        void main() {
+            mat4 batchingMatrix = getTransformMatrix(objectId);
+            vVisibility = visibility;
         `
       );
+      if (shader.vertexShader.includes("#include <beginnormal_vertex>")) {
+        shader.vertexShader = shader.vertexShader.replace(
+          "#include <beginnormal_vertex>",
+          `
+            vec3 objectNormal = vec3( normal );
+            mat3 bm = mat3( batchingMatrix );
+            objectNormal = bm * objectNormal;
+            `
+        );
+      }
       shader.vertexShader = shader.vertexShader.replace(
-        "void main() {",
+        "#include <begin_vertex>",
         `
-        void main() {
-          vVisibility = visibility;
+        vec3 transformed = vec3( position );
+        transformed = ( batchingMatrix * vec4( transformed, 1.0 ) ).xyz;
         `
       );
-      shader.fragmentShader = shader.fragmentShader.replace(
-        "void main() {",
+      shader.fragmentShader = shader.fragmentShader
+        .replace(
+          "#include <common>",
+          `
+        #include <common>
+        varying float vVisibility;
         `
+        )
+        .replace(
+          "void main() {",
+          `
         void main() {
           if (vVisibility < 0.5) discard;
         `
-      );
+        );
     };
     material.needsUpdate = true;
     return material;
@@ -5465,6 +5745,7 @@ class DynamicGltfLoader {
     this.isolatedObjects = [];
     this.objectTransforms.clear();
     this.transformedGeometries.clear();
+    this._originalObjectMatrices.clear();
     this.totalLoadedObjects = 0;
     this.currentMemoryUsage = 0;
     this.pendingMemoryUsage = 0;
@@ -5474,6 +5755,8 @@ class DynamicGltfLoader {
     this.objectIdToIndex.clear();
     this.maxObjectId = 0;
     this.objectVisibility = new Float32Array();
+    this.meshToNodeMap = null;
+    this.visibilityMaterials.clear();
   }
   setStructureTransform(structureId, matrix) {
     const rootGroup = this.structureRoots.get(structureId);
@@ -5589,12 +5872,15 @@ class DynamicGltfLoader {
     });
     this.originalObjects.clear();
     this.originalObjectsToSelection.clear();
+    this.objectIdToIndex.clear();
+    this.maxObjectId = 0;
     const structureGroups = new Map();
     this.dispatchEvent("optimizationprogress", {
       phase: "collecting",
       progress: 5,
       message: "Collecting scene objects...",
     });
+    let totalObjectsToMerge = 0;
     this.scene.traverse((object) => {
       if (object.userData.structureId) {
         const structureId = object.userData.structureId;
@@ -5612,17 +5898,32 @@ class DynamicGltfLoader {
           });
         }
         const group = structureGroups.get(structureId);
+        let added = false;
         if (object instanceof Mesh) {
           this.addToMaterialGroup(object, group.mapMeshes, group.meshes);
+          added = true;
         } else if (object instanceof LineSegments) {
           this.addToMaterialGroup(object, group.mapLineSegments, group.lineSegments);
+          added = true;
         } else if (object instanceof Line) {
           this.addToMaterialGroup(object, group.mapLines, group.lines);
+          added = true;
         } else if (object instanceof Points) {
           this.addToMaterialGroup(object, group.mapPoints, group.points);
+          added = true;
+        }
+        if (added) {
+          totalObjectsToMerge++;
         }
       }
     });
+    if (totalObjectsToMerge > 0) {
+      console.log(`Pre-allocating transform texture for ${totalObjectsToMerge} objects`);
+      this.maxObjectId = totalObjectsToMerge;
+      this.initTransformTexture();
+      this.initializeObjectVisibility();
+      this.maxObjectId = 0;
+    }
     let processedGroups = 0;
     const totalGroups = structureGroups.size;
     this.dispatchEvent("optimizationprogress", {
@@ -5667,7 +5968,6 @@ class DynamicGltfLoader {
         this.originalObjectsToSelection.add(obj);
       }
     });
-    this.initializeObjectVisibility();
     console.log(`Optimization complete. Total objects: ${this.maxObjectId}`);
     this.dispatchEvent("optimizationprogress", {
       phase: "complete",
@@ -5736,6 +6036,7 @@ class DynamicGltfLoader {
           }
           const visibilityMaterial = this.createVisibilityMaterial(group.material);
           const mergedMesh = new Mesh(mergedGeometry, visibilityMaterial);
+          mergedMesh.frustumCulled = false;
           mergedMesh.userData.isOptimized = true;
           rootGroup.add(mergedMesh);
           this.mergedMesh.add(mergedMesh);
@@ -5852,6 +6153,7 @@ class DynamicGltfLoader {
       geometry.setAttribute("visibility", new BufferAttribute(visibilityArray, 1));
       const visibilityMaterial = this.createVisibilityMaterial(group.material);
       const mergedLine = new LineSegments(geometry, visibilityMaterial);
+      mergedLine.frustumCulled = false;
       mergedLine.userData.isEdge = isEdge;
       mergedLine.userData.isOptimized = true;
       const mergedObjects = [mergedLine];
@@ -5940,6 +6242,7 @@ class DynamicGltfLoader {
           mergedGeometry.setAttribute("visibility", new BufferAttribute(visibilityArray, 1));
           const visibilityMaterial = this.createVisibilityMaterial(group.material);
           const mergedLine = new LineSegments(mergedGeometry, visibilityMaterial);
+          mergedLine.frustumCulled = false;
           mergedLine.userData.isEdge = isEdge;
           mergedLine.userData.isOptimized = true;
           if (this.useVAO) {
@@ -6009,7 +6312,27 @@ class DynamicGltfLoader {
         const mergedObjects = [];
         if (geometries.length > 0) {
           const mergedGeometry = mergeGeometries(geometries, false);
-          const mergedPoints = new Points(mergedGeometry, group.material);
+          const totalVertices = mergedGeometry.attributes.position.count;
+          const objectIds = new Float32Array(totalVertices);
+          let vertexOffset = 0;
+          group.objects.forEach((points) => {
+            const handle = points.userData.handle;
+            if (!this.objectIdToIndex.has(handle)) {
+              this.objectIdToIndex.set(handle, this.maxObjectId++);
+            }
+            const objectId = this.objectIdToIndex.get(handle);
+            const count = points.geometry.attributes.position.count;
+            for (let i = 0; i < count; i++) {
+              objectIds[vertexOffset++] = objectId;
+            }
+          });
+          mergedGeometry.setAttribute("objectId", new BufferAttribute(objectIds, 1));
+          const visibilityArray = new Float32Array(totalVertices);
+          visibilityArray.fill(1.0);
+          mergedGeometry.setAttribute("visibility", new BufferAttribute(visibilityArray, 1));
+          const visibilityMaterial = this.createVisibilityMaterial(group.material);
+          const mergedPoints = new Points(mergedGeometry, visibilityMaterial);
+          mergedPoints.frustumCulled = false;
           mergedPoints.userData.isOptimized = true;
           if (this.useVAO) {
             this.createVAO(mergedPoints);
@@ -6078,13 +6401,33 @@ class DynamicGltfLoader {
         geometriesWithIndex.push(clonedGeometry);
       });
       const finalGeometry = mergeGeometries(geometriesWithIndex, false);
+      const totalVertices = finalGeometry.attributes.position.count;
+      const objectIds = new Float32Array(totalVertices);
+      let vertexOffset = 0;
+      lineSegmentsArray.forEach((segment) => {
+        const handle = segment.userData.handle;
+        if (!this.objectIdToIndex.has(handle)) {
+          this.objectIdToIndex.set(handle, this.maxObjectId++);
+        }
+        const objectId = this.objectIdToIndex.get(handle);
+        const count = segment.geometry.attributes.position.count;
+        for (let i = 0; i < count; i++) {
+          objectIds[vertexOffset++] = objectId;
+        }
+      });
+      finalGeometry.setAttribute("objectId", new BufferAttribute(objectIds, 1));
+      const visibilityArray = new Float32Array(totalVertices);
+      visibilityArray.fill(1.0);
+      finalGeometry.setAttribute("visibility", new BufferAttribute(visibilityArray, 1));
       const material = new LineBasicMaterial({
         vertexColors: true,
       });
+      const visibilityMaterial = this.createVisibilityMaterial(material);
       if (this.useVAO) {
         this.createVAO(finalGeometry);
       }
-      const mergedLine = new LineSegments(finalGeometry, material);
+      const mergedLine = new LineSegments(finalGeometry, visibilityMaterial);
+      mergedLine.frustumCulled = false;
       mergedLine.userData.structureId = structureId;
       mergedLine.userData.isOptimized = true;
       rootGroup.add(mergedLine);
@@ -6203,18 +6546,91 @@ class DynamicGltfLoader {
       console.warn("No merged objects to transform");
       return;
     }
-    this.objectTransforms = new Map(objectTransformMap);
-    for (const mesh of this.mergedMesh) {
-      this._applyTransformToMergedObject(mesh);
+    if (!this.transformData) {
+      console.warn("Transform texture not initialized");
+      return;
     }
-    for (const line of this.mergedLines) {
-      this._applyTransformToMergedObject(line);
+    this.objectTransforms = objectTransformMap;
+    this._resetTransformData(false);
+    const transformData = this.transformData;
+    const objectIdToIndex = this.objectIdToIndex;
+    let textureNeedsUpdate = false;
+    if (objectTransformMap instanceof Map) {
+      for (const [object, matrix] of objectTransformMap.entries()) {
+        const userData = object.userData;
+        if (!userData) continue;
+        const handle = userData.handle;
+        if (handle === undefined) continue;
+        const objectId = objectIdToIndex.get(handle);
+        if (objectId !== undefined) {
+          transformData.set(matrix.elements, objectId * 16);
+          textureNeedsUpdate = true;
+        }
+      }
+    } else {
+      const len = objectTransformMap.length;
+      for (let i = 0; i < len; i++) {
+        const pair = objectTransformMap[i];
+        const userData = pair[0].userData;
+        if (!userData) continue;
+        const handle = userData.handle;
+        if (handle === undefined) continue;
+        const objectId = objectIdToIndex.get(handle);
+        if (objectId !== undefined) {
+          transformData.set(pair[1].elements, objectId * 16);
+          textureNeedsUpdate = true;
+        }
+      }
+    }
+    if (textureNeedsUpdate) {
+      this.updateTransformTexture();
+      if (
+        this._lastTransformTexture !== this.transformTexture ||
+        this._lastTransformTextureSize !== this.transformTextureSize
+      ) {
+        this.updateMaterialUniforms();
+      }
     }
-    for (const lineSegment of this.mergedLineSegments) {
-      this._applyTransformToMergedObject(lineSegment);
+    if (this.syncTransformsToOriginalObjects) {
+      this._syncOriginalObjectTransforms(objectTransformMap);
     }
-    for (const point of this.mergedPoints) {
-      this._applyTransformToMergedObject(point);
+  }
+  _syncOriginalObjectTransforms(objectTransformMap) {
+    for (const [obj, savedPos] of this._originalObjectMatrices) {
+      obj.position.copy(savedPos);
+      if (obj.userData.highlight) {
+        obj.userData.highlight.position.copy(savedPos);
+      }
+    }
+    this._originalObjectMatrices.clear();
+    const _offset = new Vector3();
+    const _parentInverse = new Matrix4();
+    if (objectTransformMap instanceof Map) {
+      for (const [object, matrix] of objectTransformMap.entries()) {
+        if (!object.userData?.handle) continue;
+        if (!this._originalObjectMatrices.has(object)) {
+          this._originalObjectMatrices.set(object, object.position.clone());
+        }
+        _offset.setFromMatrixPosition(matrix);
+        if (object.userData.structureId) {
+          const rootGroup = this.structureRoots.get(object.userData.structureId);
+          if (rootGroup && object.parent && object.parent !== rootGroup) {
+            const origin = new Vector3(0, 0, 0);
+            origin.applyMatrix4(rootGroup.matrixWorld);
+            _offset.applyMatrix4(rootGroup.matrixWorld);
+            _offset.sub(origin);
+            const parentOrigin = new Vector3(0, 0, 0);
+            _parentInverse.copy(object.parent.matrixWorld).invert();
+            parentOrigin.applyMatrix4(_parentInverse);
+            _offset.applyMatrix4(_parentInverse);
+            _offset.sub(parentOrigin);
+          }
+        }
+        object.position.add(_offset);
+        if (object.userData.highlight) {
+          object.userData.highlight.position.copy(object.position);
+        }
+      }
     }
   }
   createExplodeTransforms(objects = null, explodeCenter = null, explodeFactor = 1.5) {
@@ -6231,21 +6647,66 @@ class DynamicGltfLoader {
         ? objects
         : Array.from(objects)
       : Array.from(this.originalObjects);
+    const structureInverseMatrices = new Map();
+    if (!this.meshToNodeMap) {
+      this.meshToNodeMap = new Map();
+      for (const node of this.nodes.values()) {
+        if (node.object) {
+          this.meshToNodeMap.set(node.object, node);
+        }
+      }
+    }
     for (const obj of objectsArray) {
       if (!obj.geometry || !obj.geometry.attributes.position) continue;
-      const boundingBox = new Box3().setFromBufferAttribute(obj.geometry.attributes.position);
-      if (obj.matrixWorld) {
-        boundingBox.applyMatrix4(obj.matrixWorld);
-      }
-      if (boundingBox.isEmpty()) continue;
-      const objectCenter = new Vector3();
-      boundingBox.getCenter(objectCenter);
-      const direction = objectCenter.clone().sub(explodeCenter);
-      const distance = direction.length();
+      if (!obj.userData.explodeVector) {
+        let center = null;
+        const node = this.meshToNodeMap.get(obj);
+        if (node && node.geometryExtents) {
+          const box = node.geometryExtents.clone();
+          box.applyMatrix4(obj.matrixWorld);
+          center = new Vector3();
+          box.getCenter(center);
+        }
+        if (!center) {
+          if (!obj.geometry.boundingBox) obj.geometry.computeBoundingBox();
+          const box = obj.geometry.boundingBox.clone();
+          box.applyMatrix4(obj.matrixWorld);
+          center = new Vector3();
+          box.getCenter(center);
+        }
+        const explodeVector = center.sub(explodeCenter);
+        obj.userData.explodeVector = explodeVector;
+      }
+      const explodeVector = obj.userData.explodeVector;
+      const distance = explodeVector.length();
       if (distance > 0) {
-        direction.normalize();
-        const offset = direction.multiplyScalar(distance * (explodeFactor - 1.0));
-        const matrix = new Matrix4().makeTranslation(offset.x, offset.y, offset.z);
+        const offset = explodeVector.clone().multiplyScalar(explodeFactor - 1.0);
+        const localOffset = offset.clone();
+        if (obj.userData.structureId) {
+          const structureId = obj.userData.structureId;
+          let inverseMatrix = structureInverseMatrices.get(structureId);
+          if (!inverseMatrix) {
+            const rootGroup = this.structureRoots.get(structureId);
+            if (rootGroup) {
+              if (!rootGroup.userData.inverseWorldMatrix) {
+                rootGroup.userData.inverseWorldMatrix = new Matrix4().copy(rootGroup.matrixWorld).invert();
+              }
+              inverseMatrix = rootGroup.userData.inverseWorldMatrix;
+              structureInverseMatrices.set(structureId, inverseMatrix);
+            }
+          }
+          if (inverseMatrix) {
+            const zero = new Vector3(0, 0, 0).applyMatrix4(inverseMatrix);
+            const vec = offset.clone().applyMatrix4(inverseMatrix).sub(zero);
+            localOffset.copy(vec);
+          }
+        }
+        let matrix = obj.userData.explodeMatrix;
+        if (!matrix) {
+          matrix = new Matrix4();
+          obj.userData.explodeMatrix = matrix;
+        }
+        matrix.makeTranslation(localOffset.x, localOffset.y, localOffset.z);
         transformMap.set(obj, matrix);
       }
     }
@@ -6253,115 +6714,19 @@ class DynamicGltfLoader {
   }
   clearTransforms() {
     this.objectTransforms.clear();
-    for (const mesh of this.mergedMesh) {
-      this._restoreOriginalGeometry(mesh);
-    }
-    for (const line of this.mergedLines) {
-      this._restoreOriginalGeometry(line);
-    }
-    for (const lineSegment of this.mergedLineSegments) {
-      this._restoreOriginalGeometry(lineSegment);
-    }
-    for (const point of this.mergedPoints) {
-      this._restoreOriginalGeometry(point);
-    }
-  }
-  clearHandleTransforms() {
-    this.clearTransforms();
-  }
-  _applyTransformToMergedObject(mergedObject) {
-    const objectData = this.mergedObjectMap.get(mergedObject.uuid);
-    if (!objectData || !objectData.objectMapping) return;
-    const geometry = mergedObject.geometry;
-    if (!geometry || !geometry.attributes.position) return;
-    const positionAttr = geometry.attributes.position;
-    const positions = positionAttr.array;
-    if (!this.transformedGeometries.has(mergedObject.uuid)) {
-      this.transformedGeometries.set(mergedObject.uuid, new Float32Array(positions));
-    }
-    const originalPositions = this.transformedGeometries.get(mergedObject.uuid);
-    const tempVector = new Vector3();
-    for (const [originalMesh, mappingData] of objectData.objectMapping) {
-      const transform = this.objectTransforms.get(originalMesh);
-      if (!transform) {
-        const startIdx = mappingData.startVertexIndex * 3;
-        const endIdx = (mappingData.startVertexIndex + mappingData.vertexCount) * 3;
-        for (let i = startIdx; i < endIdx; i++) {
-          positions[i] = originalPositions[i];
-        }
-        continue;
-      }
-      const startVertex = mappingData.startVertexIndex;
-      const vertexCount = mappingData.vertexCount;
-      for (let i = 0; i < vertexCount; i++) {
-        const idx = (startVertex + i) * 3;
-        tempVector.set(originalPositions[idx], originalPositions[idx + 1], originalPositions[idx + 2]);
-        tempVector.applyMatrix4(transform);
-        positions[idx] = tempVector.x;
-        positions[idx + 1] = tempVector.y;
-        positions[idx + 2] = tempVector.z;
-      }
-    }
-    if (geometry.attributes.normal) {
-      this._updateNormalsForTransform(geometry, objectData, originalPositions);
-    }
-    positionAttr.needsUpdate = true;
-    geometry.computeBoundingSphere();
-    geometry.computeBoundingBox();
-  }
-  _updateNormalsForTransform(geometry, objectData, originalPositions) {
-    const normalAttr = geometry.attributes.normal;
-    if (!normalAttr) return;
-    const normals = normalAttr.array;
-    const tempVector = new Vector3();
-    const normalMatrix = new Matrix4();
-    const normalsKey = `${geometry.uuid}_normals`;
-    if (!this.transformedGeometries.has(normalsKey)) {
-      this.transformedGeometries.set(normalsKey, new Float32Array(normals));
-    }
-    const originalNormals = this.transformedGeometries.get(normalsKey);
-    for (const [originalMesh, mappingData] of objectData.objectMapping) {
-      const transform = this.objectTransforms.get(originalMesh);
-      if (!transform) {
-        const startIdx = mappingData.startVertexIndex * 3;
-        const endIdx = (mappingData.startVertexIndex + mappingData.vertexCount) * 3;
-        for (let i = startIdx; i < endIdx; i++) {
-          normals[i] = originalNormals[i];
+    this._resetTransformData(true);
+    if (this.syncTransformsToOriginalObjects) {
+      for (const [obj, savedPos] of this._originalObjectMatrices) {
+        obj.position.copy(savedPos);
+        if (obj.userData.highlight) {
+          obj.userData.highlight.position.copy(savedPos);
         }
-        continue;
-      }
-      normalMatrix.copy(transform).invert().transpose();
-      const startVertex = mappingData.startVertexIndex;
-      const vertexCount = mappingData.vertexCount;
-      for (let i = 0; i < vertexCount; i++) {
-        const idx = (startVertex + i) * 3;
-        tempVector.set(originalNormals[idx], originalNormals[idx + 1], originalNormals[idx + 2]);
-        tempVector.applyMatrix4(normalMatrix).normalize();
-        normals[idx] = tempVector.x;
-        normals[idx + 1] = tempVector.y;
-        normals[idx + 2] = tempVector.z;
       }
+      this._originalObjectMatrices.clear();
     }
-    normalAttr.needsUpdate = true;
   }
-  _restoreOriginalGeometry(mergedObject) {
-    const geometry = mergedObject.geometry;
-    if (!geometry || !geometry.attributes.position) return;
-    const originalPositions = this.transformedGeometries.get(mergedObject.uuid);
-    if (originalPositions) {
-      const positions = geometry.attributes.position.array;
-      positions.set(originalPositions);
-      geometry.attributes.position.needsUpdate = true;
-    }
-    const normalsKey = `${geometry.uuid}_normals`;
-    const originalNormals = this.transformedGeometries.get(normalsKey);
-    if (originalNormals && geometry.attributes.normal) {
-      const normals = geometry.attributes.normal.array;
-      normals.set(originalNormals);
-      geometry.attributes.normal.needsUpdate = true;
-    }
-    geometry.computeBoundingSphere();
-    geometry.computeBoundingBox();
+  clearHandleTransforms() {
+    this.clearTransforms();
   }
   syncHiddenObjects() {
     if (this.mergedObjectMap.size === 0) {