@inweb/viewer-three 27.4.7 → 27.6.0

package/dist/viewer-three.js

@@ -159,8 +159,7 @@
             this.abortController = new AbortController();
         }
         dispose() {
-            this.abortController.abort();
-            this.abortController = undefined;
+            this.cancel();
         }
         isSupport(file, format) {
             return false;
@@ -179,10 +178,10 @@
         extractFileName(file) {
             const regex = /[^/\\?#:]+(?=\?|#|$)/;
             if (typeof file === "string")
-                return (file.match(regex) || [])[0];
+                return (file.match(regex) || [])[0] || "";
             else if (file instanceof globalThis.File)
-                return (file.name.match(regex) || [])[0];
-            return undefined;
+                return (file.name.match(regex) || [])[0] || "";
+            return "";
         }
     };
     class Loaders {
@@ -235,6 +234,15 @@
             enablePartialMode: false,
             memoryLimit: 3294967296,
             cuttingPlaneFillColor: { red: 0xff, green: 0x98, blue: 0x00 },
+            enableSectionFill: true,
+            sectionFillColor: { r: 0xff, g: 0x98, b: 0x00 },
+            sectionUseObjectColor: false,
+            enableSectionHatch: true,
+            sectionHatchColor: { r: 0, g: 0, b: 0 },
+            sectionHatchScale: 8,
+            enableSectionOutline: true,
+            sectionOutlineColor: { r: 0, g: 0, b: 0 },
+            sectionOutlineWidth: 2,
             edgesColor: { r: 0xff, g: 0x98, b: 0x00 },
             facesColor: { r: 0xff, g: 0x98, b: 0x00 },
             edgesVisibility: true,
@@ -293,230 +301,301 @@
                 }
         }
         resetToDefaults(fields) {
+            const defaults = Options.defaults();
             if (fields !== undefined) {
-                const defaults = Options.defaults();
-                const resetData = fields.reduce((acc, field) => {
-                    acc[field] = defaults[field];
-                    return acc;
-                }, {});
-                this.data = { ...this.data, ...resetData };
+                const resetData = {};
+                for (const field of fields) {
+                    if (field in defaults)
+                        resetData[field] = defaults[field];
+                }
+                this.data = resetData;
             }
             else {
-                this.data = { ...this.data, ...Options.defaults() };
+                this.data = defaults;
+            }
+        }
+        setProperty(key, value = Options.defaults()[key]) {
+            if (this._data[key] !== value) {
+                this._data[key] = value;
+                this.change();
             }
         }
         get data() {
             return this._data;
         }
         set data(value) {
-            const enablePartialMode = value.enableStreamingMode ? value.enablePartialMode : false;
-            const sceneGraph = enablePartialMode ? false : value.sceneGraph;
-            this._data = { ...Options.defaults(), ...this._data, ...value, enablePartialMode, sceneGraph };
+            const defaults = Options.defaults();
+            const merged = { ...defaults, ...this._data, ...value };
+            for (const key of Object.keys(defaults)) {
+                if (merged[key] === undefined)
+                    merged[key] = defaults[key];
+            }
+            this._data = merged;
+            if (this._data.enablePartialMode) {
+                this._data.enableStreamingMode = true;
+                this._data.sceneGraph = false;
+            }
+            if (!value.sectionFillColor && value.cuttingPlaneFillColor)
+                this._data.sectionFillColor = {
+                    r: value.cuttingPlaneFillColor.red,
+                    g: value.cuttingPlaneFillColor.green,
+                    b: value.cuttingPlaneFillColor.blue,
+                };
             this.change();
         }
         get showWCS() {
             return this._data.showWCS;
         }
         set showWCS(value) {
-            this._data.showWCS = value;
-            this.change();
+            this.setProperty("showWCS", value);
         }
         get cameraAnimation() {
             return this._data.cameraAnimation;
         }
         set cameraAnimation(value) {
-            this._data.cameraAnimation = value;
-            this.change();
+            this.setProperty("cameraAnimation", value);
         }
         get antialiasing() {
             return this._data.antialiasing;
         }
         set antialiasing(value) {
-            this._data.antialiasing = value;
-            this.change();
+            this.setProperty("antialiasing", value);
         }
         get groundShadow() {
             return this._data.groundShadow;
         }
         set groundShadow(value) {
-            this._data.groundShadow = value;
-            this.change();
+            this.setProperty("groundShadow", value);
         }
         get shadows() {
             return this._data.shadows;
         }
         set shadows(value) {
-            this._data.shadows = value;
-            this.change();
+            this.setProperty("shadows", value);
         }
         get cameraAxisXSpeed() {
             return this._data.cameraAxisXSpeed;
         }
         set cameraAxisXSpeed(value) {
-            this._data.cameraAxisXSpeed = value;
-            this.change();
+            this.setProperty("cameraAxisXSpeed", value);
         }
         get cameraAxisYSpeed() {
             return this._data.cameraAxisYSpeed;
         }
         set cameraAxisYSpeed(value) {
-            this.cameraAxisYSpeed = value;
-            this.change();
+            this.setProperty("cameraAxisYSpeed", value);
         }
         get ambientOcclusion() {
             return this._data.ambientOcclusion;
         }
         set ambientOcclusion(value) {
-            this._data.ambientOcclusion = value;
-            this.change();
+            this.setProperty("ambientOcclusion", value);
         }
         get enableStreamingMode() {
             return this._data.enableStreamingMode;
         }
         set enableStreamingMode(value) {
-            this._data.enableStreamingMode = value;
-            if (!value)
-                this._data.enablePartialMode = false;
-            this.change();
+            this.setProperty("enableStreamingMode", value);
+            if (!value) {
+                this.setProperty("enablePartialMode", false);
+            }
         }
         get enablePartialMode() {
             return this._data.enablePartialMode;
         }
         set enablePartialMode(value) {
-            this._data.enablePartialMode = value;
+            this.setProperty("enablePartialMode", value);
             if (value) {
-                this._data.enableStreamingMode = true;
-                this._data.sceneGraph = false;
+                this.setProperty("enableStreamingMode", true);
+                this.setProperty("sceneGraph", false);
             }
-            this.change();
         }
         get memoryLimit() {
             return this._data.memoryLimit;
         }
         set memoryLimit(value) {
-            this._data.memoryLimit = value;
-            this.change();
+            this.setProperty("memoryLimit", value);
         }
         get cuttingPlaneFillColor() {
-            return this._data.cuttingPlaneFillColor;
+            console.warn("Options.cuttingPlaneFillColor has been deprecated since 27.5 and will be removed in a future release, use sectionFillColor instead");
+            return {
+                red: this._data.sectionFillColor.r,
+                green: this._data.sectionFillColor.g,
+                blue: this._data.sectionFillColor.b,
+            };
         }
         set cuttingPlaneFillColor(value) {
-            this._data.cuttingPlaneFillColor = value;
-            this.change();
+            console.warn("Options.cuttingPlaneFillColor has been deprecated since 27.5 and will be removed in a future release, use sectionFillColor instead");
+            this.setProperty("sectionFillColor", {
+                r: value.red,
+                g: value.green,
+                b: value.blue,
+            });
+        }
+        get enableSectionFill() {
+            return this._data.enableSectionFill;
+        }
+        set enableSectionFill(value) {
+            this.setProperty("enableSectionFill", value);
+        }
+        get sectionFillColor() {
+            return this._data.sectionFillColor;
+        }
+        set sectionFillColor(value) {
+            this.setProperty("sectionFillColor", value);
+        }
+        get sectionUseObjectColor() {
+            return this._data.sectionUseObjectColor;
+        }
+        set sectionUseObjectColor(value) {
+            this.setProperty("sectionUseObjectColor", value);
+        }
+        get enableSectionHatch() {
+            return this._data.enableSectionHatch;
+        }
+        set enableSectionHatch(value) {
+            this.setProperty("enableSectionHatch", value);
+        }
+        get sectionHatchColor() {
+            return this._data.sectionHatchColor;
+        }
+        set sectionHatchColor(value) {
+            this.setProperty("sectionHatchColor", value);
+        }
+        get sectionHatchScale() {
+            return this._data.sectionHatchScale;
+        }
+        set sectionHatchScale(value) {
+            this.setProperty("sectionHatchScale", value);
+        }
+        get enableSectionOutline() {
+            return this._data.enableSectionOutline;
+        }
+        set enableSectionOutline(value) {
+            this.setProperty("enableSectionOutline", value);
+        }
+        get sectionOutlineColor() {
+            return this._data.sectionOutlineColor;
+        }
+        set sectionOutlineColor(value) {
+            this.setProperty("sectionOutlineColor", value);
+        }
+        get sectionOutlineWidth() {
+            return this._data.sectionOutlineWidth;
+        }
+        set sectionOutlineWidth(value) {
+            this.setProperty("sectionOutlineWidth", value);
         }
         get edgesColor() {
             return this._data.edgesColor;
         }
         set edgesColor(value) {
-            this._data.edgesColor = value;
-            this.change();
+            this.setProperty("edgesColor", value);
         }
         get facesColor() {
             return this._data.facesColor;
         }
         set facesColor(value) {
-            this._data.facesColor = value;
-            this.change();
+            this.setProperty("facesColor", value);
         }
         get edgesVisibility() {
             return this._data.edgesVisibility;
         }
         set edgesVisibility(value) {
-            this._data.edgesVisibility = value;
-            this.change();
+            this.setProperty("edgesVisibility", value);
         }
         get edgesOverlap() {
             return this._data.edgesOverlap;
         }
         set edgesOverlap(value) {
-            this._data.edgesOverlap = value;
-            this.change();
+            this.setProperty("edgesOverlap", value);
         }
         get facesOverlap() {
             return this._data.facesOverlap;
         }
         set facesOverlap(value) {
-            this._data.facesOverlap = value;
-            this.change();
+            this.setProperty("facesOverlap", value);
         }
         get facesTransparancy() {
             return this._data.facesTransparancy;
         }
         set facesTransparancy(value) {
-            this._data.facesTransparancy = value;
-            this.change();
+            this.setProperty("facesTransparancy", value);
         }
         get enableCustomHighlight() {
             return this._data.enableCustomHighlight;
         }
         set enableCustomHighlight(value) {
-            this._data.enableCustomHighlight = value;
-            this.change();
+            this.setProperty("enableCustomHighlight", value);
         }
         get sceneGraph() {
             return this._data.sceneGraph;
         }
         set sceneGraph(value) {
-            this._data.sceneGraph = value;
-            if (value)
-                this._data.enablePartialMode = false;
-            this.change();
+            this.setProperty("sceneGraph", value);
+            if (value) {
+                this.setProperty("enablePartialMode", false);
+            }
         }
         get edgeModel() {
             return Boolean(this._data.edgeModel);
         }
         set edgeModel(value) {
-            this._data.edgeModel = Boolean(value);
-            this.change();
+            this.setProperty("edgeModel", value);
         }
         get reverseZoomWheel() {
             return this._data.reverseZoomWheel;
         }
         set reverseZoomWheel(value) {
-            this._data.reverseZoomWheel = !!value;
-            this.change();
+            this.setProperty("reverseZoomWheel", value);
         }
         get enableZoomWheel() {
             return this._data.enableZoomWheel;
         }
         set enableZoomWheel(value) {
-            this._data.enableZoomWheel = !!value;
-            this.change();
+            this.setProperty("enableZoomWheel", value);
         }
         get enableGestures() {
             return this._data.enableGestures;
         }
         set enableGestures(value) {
-            this._data.enableGestures = !!value;
-            this.change();
+            this.setProperty("enableGestures", value);
         }
         get geometryType() {
             return this._data.geometryType;
         }
         set geometryType(value) {
-            this._data.geometryType = value;
-            this.change();
+            this.setProperty("geometryType", value);
         }
         get rulerUnit() {
             return this._data.rulerUnit;
         }
         set rulerUnit(value) {
-            this._data.rulerUnit = value;
-            this.change();
+            this.setProperty("rulerUnit", value);
         }
         get rulerPrecision() {
             return this._data.rulerPrecision;
         }
         set rulerPrecision(value) {
-            this._data.rulerPrecision = value;
-            this.change();
+            this.setProperty("rulerPrecision", value);
         }
         get cameraMode() {
             return this._data.cameraMode || "perspective";
         }
         set cameraMode(value) {
-            this._data.cameraMode = value;
-            this.change();
+            this.setProperty("cameraMode", value);
+        }
+        get snapshotMimeType() {
+            return this._data.snapshotMimeType;
+        }
+        set snapshotMimeType(value) {
+            this.setProperty("snapshotMimeType", value);
+        }
+        get snapshotQuality() {
+            return this._data.snapshotQuality;
+        }
+        set snapshotQuality(value) {
+            this.setProperty("snapshotQuality", value);
         }
     }
     const CanvasEvents = [
@@ -9820,7 +9899,7 @@
     const _whiteColor =  new Color( 1, 1, 1 );
     const _frustum =  new Frustum();
     const _frustumArray =  new FrustumArray();
-    const _box$1 =  new Box3();
+    const _box$1$1 =  new Box3();
     const _sphere$2 =  new Sphere();
     const _vector$5 =  new Vector3();
     const _forward$1 =  new Vector3();
@@ -9983,8 +10062,8 @@
     			if ( instanceInfo[ i ].active === false ) continue;
     			const geometryId = instanceInfo[ i ].geometryIndex;
     			this.getMatrixAt( i, _matrix$1 );
-    			this.getBoundingBoxAt( geometryId, _box$1 ).applyMatrix4( _matrix$1 );
-    			boundingBox.union( _box$1 );
+    			this.getBoundingBoxAt( geometryId, _box$1$1 ).applyMatrix4( _matrix$1 );
+    			boundingBox.union( _box$1$1 );
     		}
     	}
     	computeBoundingSphere() {
@@ -10244,8 +10323,8 @@
     		const geometryInfo = this._geometryInfo[ geometryId ];
     		if ( geometryInfo.boundingSphere === null ) {
     			const sphere = new Sphere();
-    			this.getBoundingBoxAt( geometryId, _box$1 );
-    			_box$1.getCenter( sphere.center );
+    			this.getBoundingBoxAt( geometryId, _box$1$1 );
+    			_box$1$1.getCenter( sphere.center );
     			const index = geometry.index;
     			const position = geometry.attributes.position;
     			let maxRadiusSq = 0;
@@ -10713,8 +10792,8 @@
     		object: object
     	};
     }
-    const _start$2 =  new Vector3();
-    const _end$2 =  new Vector3();
+    const _start$3 =  new Vector3();
+    const _end$3 =  new Vector3();
     class LineSegments extends Line$1 {
     	constructor( geometry, material ) {
     		super( geometry, material );
@@ -10727,10 +10806,10 @@
     			const positionAttribute = geometry.attributes.position;
     			const lineDistances = [];
     			for ( let i = 0, l = positionAttribute.count; i < l; i += 2 ) {
-    				_start$2.fromBufferAttribute( positionAttribute, i );
-    				_end$2.fromBufferAttribute( positionAttribute, i + 1 );
+    				_start$3.fromBufferAttribute( positionAttribute, i );
+    				_end$3.fromBufferAttribute( positionAttribute, i + 1 );
     				lineDistances[ i ] = ( i === 0 ) ? 0 : lineDistances[ i - 1 ];
-    				lineDistances[ i + 1 ] = lineDistances[ i ] + _start$2.distanceTo( _end$2 );
+    				lineDistances[ i + 1 ] = lineDistances[ i ] + _start$3.distanceTo( _end$3 );
     			}
     			geometry.setAttribute( 'lineDistance', new Float32BufferAttribute( lineDistances, 1 ) );
     		} else {
@@ -10771,8 +10850,8 @@
     	}
     }
     const _inverseMatrix =  new Matrix4();
-    const _ray =  new Ray();
-    const _sphere =  new Sphere();
+    const _ray$4 =  new Ray();
+    const _sphere$7 =  new Sphere();
     const _position$2 =  new Vector3();
     class Points extends Object3D {
     	constructor( geometry = new BufferGeometry(), material = new PointsMaterial() ) {
@@ -10797,12 +10876,12 @@
     		const threshold = raycaster.params.Points.threshold;
     		const drawRange = geometry.drawRange;
     		if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();
-    		_sphere.copy( geometry.boundingSphere );
-    		_sphere.applyMatrix4( matrixWorld );
-    		_sphere.radius += threshold;
-    		if ( raycaster.ray.intersectsSphere( _sphere ) === false ) return;
+    		_sphere$7.copy( geometry.boundingSphere );
+    		_sphere$7.applyMatrix4( matrixWorld );
+    		_sphere$7.radius += threshold;
+    		if ( raycaster.ray.intersectsSphere( _sphere$7 ) === false ) return;
     		_inverseMatrix.copy( matrixWorld ).invert();
-    		_ray.copy( raycaster.ray ).applyMatrix4( _inverseMatrix );
+    		_ray$4.copy( raycaster.ray ).applyMatrix4( _inverseMatrix );
     		const localThreshold = threshold / ( ( this.scale.x + this.scale.y + this.scale.z ) / 3 );
     		const localThresholdSq = localThreshold * localThreshold;
     		const index = geometry.index;
@@ -10844,10 +10923,10 @@
     	}
     }
     function testPoint( point, index, localThresholdSq, matrixWorld, raycaster, intersects, object ) {
-    	const rayPointDistanceSq = _ray.distanceSqToPoint( point );
+    	const rayPointDistanceSq = _ray$4.distanceSqToPoint( point );
     	if ( rayPointDistanceSq < localThresholdSq ) {
     		const intersectPoint = new Vector3();
-    		_ray.closestPointToPoint( point, intersectPoint );
+    		_ray$4.closestPointToPoint( point, intersectPoint );
     		intersectPoint.applyMatrix4( matrixWorld );
     		const distance = raycaster.ray.origin.distanceTo( intersectPoint );
     		if ( distance < raycaster.near || distance > raycaster.far ) return;
@@ -34348,15 +34427,15 @@ void main() {
     const DESKTOP_SNAP_DISTANCE = 10;
     const MOBILE_SNAP_DISTANCE = 50;
     const _vertex = new Vector3();
-    const _start$1 = new Vector3();
-    const _end$1 = new Vector3();
-    const _line = new Line3();
+    const _start$2 = new Vector3();
+    const _end$2 = new Vector3();
+    const _line$1 = new Line3();
     const _center = new Vector3();
     const _projection = new Vector3();
     class Snapper {
-        constructor(camera, renderer, canvas) {
+        constructor(camera, clippingPlanes, canvas) {
             this.camera = camera;
-            this.renderer = renderer;
+            this.clippingPlanes = clippingPlanes;
             this.canvas = canvas;
             this.threshold = 0.0001;
             this.raycaster = new Raycaster();
@@ -34387,7 +34466,7 @@ void main() {
             };
             let intersects = this.raycaster.intersectObjects(objects, recursive);
             if (clip) {
-                const clippingPlanes = this.renderer.clippingPlanes || [];
+                const clippingPlanes = this.clippingPlanes;
                 clippingPlanes.forEach((plane) => {
                     intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
                 });
@@ -34418,7 +34497,7 @@ void main() {
             const object = intersections[0].object;
             const intersectionPoint = intersections[0].point;
             const localPoint = object.worldToLocal(intersectionPoint.clone());
-            let snapPoint;
+            let snapPoint = undefined;
             let snapDistance = this.getDetectRadius(intersectionPoint);
             const geometry = object.geometry;
             const positions = geometry.attributes.position.array;
@@ -34439,17 +34518,17 @@ void main() {
             }
             const edgePositions = edges.attributes.position.array;
             for (let i = 0; i < edgePositions.length; i += 6) {
-                _start$1.set(edgePositions[i], edgePositions[i + 1], edgePositions[i + 2]);
-                _end$1.set(edgePositions[i + 3], edgePositions[i + 4], edgePositions[i + 5]);
-                _line.set(_start$1, _end$1);
-                _line.getCenter(_center);
+                _start$2.set(edgePositions[i], edgePositions[i + 1], edgePositions[i + 2]);
+                _end$2.set(edgePositions[i + 3], edgePositions[i + 4], edgePositions[i + 5]);
+                _line$1.set(_start$2, _end$2);
+                _line$1.getCenter(_center);
                 const centerDistance = _center.distanceTo(localPoint);
                 if (centerDistance < snapDistance) {
                     snapDistance = centerDistance;
                     snapPoint = _center.clone();
                     continue;
                 }
-                _line.closestPointToPoint(localPoint, true, _projection);
+                _line$1.closestPointToPoint(localPoint, true, _projection);
                 const lineDistance = _projection.distanceTo(localPoint);
                 if (lineDistance < snapDistance) {
                     snapDistance = lineDistance;
@@ -34474,7 +34553,7 @@ void main() {
                 this.orbit.object = this.viewer.camera;
                 this.orbit.update();
             };
-            this.optionsChange = ({ data: options }) => {
+            this.updateZoomSpeed = ({ data: options }) => {
                 this.orbit.zoomSpeed = Math.abs(this.orbit.zoomSpeed) * (options.reverseZoomWheel ? -1 : 1);
             };
             this.controlsStart = () => {
@@ -34533,7 +34612,7 @@ void main() {
             this.viewer.addEventListener("zoom", this.updateControls);
             this.viewer.addEventListener("drawviewpoint", this.updateControls);
             this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
-            this.viewer.addEventListener("optionschange", this.optionsChange);
+            this.viewer.addEventListener("optionschange", this.updateZoomSpeed);
             this.viewer.addEventListener("contextmenu", this.stopContextMenu);
             this.updateControls();
             this.updateControlsCamera();
@@ -34545,7 +34624,7 @@ void main() {
             this.viewer.removeEventListener("zoom", this.updateControls);
             this.viewer.removeEventListener("drawviewpoint", this.updateControls);
             this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
-            this.viewer.removeEventListener("optionschange", this.optionsChange);
+            this.viewer.removeEventListener("optionschange", this.updateZoomSpeed);
             this.viewer.removeEventListener("contextmenu", this.stopContextMenu);
             this.orbit.removeEventListener("start", this.controlsStart);
             this.orbit.removeEventListener("change", this.controlsChange);
@@ -34557,13 +34636,17 @@ void main() {
         constructor(viewer) {
             super(viewer);
             this.helpers = [];
-            this.activeHelper = null;
+            this.activeHelper = undefined;
+            this.transformUpdate = () => {
+                this.viewer.update();
+            };
             this.transformChange = () => {
                 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.emitEvent({ type: "changecuttingplanes" });
                 this.viewer.update();
                 this.changed = true;
             };
@@ -34575,25 +34658,29 @@ void main() {
                 this.orbit.enabled = !event.value;
                 this.translate.enabled = !event.value;
             };
-            this.updatePlaneSize = () => {
+            this.syncHelpers = () => {
                 const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
-                this.helpers.forEach((planeHelper) => (planeHelper.size = extentsSize));
+                const extentsCenter = this.viewer.extents.getCenter(new Vector3());
+                this.helpers.forEach((planeHelper) => {
+                    planeHelper.size = extentsSize;
+                    planeHelper.position.copy(planeHelper.plane.projectPoint(extentsCenter, new Vector3()));
+                });
                 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.helpers.length = 0;
                 this.viewer.update();
             };
+            this.updateTransformCamera = () => {
+                this.translate.camera = this.viewer.camera;
+                this.rotate.camera = this.viewer.camera;
+                this.snapper.camera = this.viewer.camera;
+            };
             this.onKeyDown = (event) => {
                 if (event.key === "Shift")
                     this.rotate.setRotationSnap(Math.PI / 4);
@@ -34637,12 +34724,9 @@ void main() {
                 this.transformChange();
                 event.stopPropagation();
             };
-            if (!viewer.renderer.clippingPlanes)
-                viewer.renderer.clippingPlanes = [];
-            this.clippingPlanes = viewer.renderer.clippingPlanes;
-            this.clippingPlanes.forEach((plane) => this.addHelper(plane));
+            viewer.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 = new Snapper(viewer.camera, viewer.clippingPlanes, viewer.canvas);
             this.snapper.threshold = extentsSize / 10000;
             this.downPosition = new Vector2();
             this.position0 = new Vector3();
@@ -34653,7 +34737,8 @@ void main() {
             this.translate.showX = false;
             this.translate.showY = false;
             this.translate.showZ = true;
-            this.translate.addEventListener("change", this.transformChange);
+            this.translate.addEventListener("change", this.transformUpdate);
+            this.translate.addEventListener("objectChange", this.transformChange);
             this.translate.addEventListener("dragging-changed", this.translateDrag);
             this.viewer.helpers.add(this.translate.getHelper());
             this.rotate = new TransformControls(viewer.camera, viewer.canvas);
@@ -34662,15 +34747,18 @@ void main() {
             this.rotate.showX = true;
             this.rotate.showY = true;
             this.rotate.showZ = false;
-            this.rotate.addEventListener("change", this.transformChange);
+            this.rotate.addEventListener("change", this.transformUpdate);
+            this.rotate.addEventListener("objectChange", 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("explode", this.syncHelpers);
+            this.viewer.addEventListener("hide", this.syncHelpers);
+            this.viewer.addEventListener("isolate", this.syncHelpers);
+            this.viewer.addEventListener("show", this.syncHelpers);
+            this.viewer.addEventListener("showall", this.syncHelpers);
             this.viewer.addEventListener("clearslices", this.clearHelpers);
+            this.viewer.addEventListener("changecameramode", this.updateTransformCamera);
             this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown, true);
             this.viewer.canvas.addEventListener("pointerup", this.onPointerUp, true);
             this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel, true);
@@ -34680,23 +34768,27 @@ void main() {
             this.viewer.update();
         }
         dispose() {
-            this.viewer.removeEventListener("explode", this.updatePlaneSize);
-            this.viewer.removeEventListener("show", this.updatePlaneSize);
-            this.viewer.removeEventListener("showall", this.updatePlaneSize);
-            this.viewer.removeEventListener("changecameramode", this.updateTransformCamera);
+            this.viewer.removeEventListener("explode", this.syncHelpers);
+            this.viewer.removeEventListener("hide", this.syncHelpers);
+            this.viewer.removeEventListener("isolate", this.syncHelpers);
+            this.viewer.removeEventListener("show", this.syncHelpers);
+            this.viewer.removeEventListener("showall", this.syncHelpers);
             this.viewer.removeEventListener("clearslices", this.clearHelpers);
+            this.viewer.removeEventListener("changecameramode", this.updateTransformCamera);
             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);
-            this.translate.removeEventListener("change", this.transformChange);
+            this.translate.removeEventListener("change", this.transformUpdate);
+            this.translate.removeEventListener("objectChange", this.transformChange);
             this.translate.removeEventListener("dragging-changed", this.translateDrag);
             this.translate.getHelper().removeFromParent();
             this.translate.detach();
             this.translate.dispose();
-            this.rotate.removeEventListener("change", this.transformChange);
+            this.rotate.removeEventListener("change", this.transformUpdate);
+            this.rotate.removeEventListener("objectChange", this.transformChange);
             this.rotate.removeEventListener("dragging-changed", this.rotateDrag);
             this.rotate.getHelper().removeFromParent();
             this.rotate.detach();
@@ -34705,8 +34797,8 @@ void main() {
                 helper.removeFromParent();
                 helper.dispose();
             });
-            this.helpers = [];
-            this.activeHelper = null;
+            this.helpers.length = 0;
+            this.activeHelper = undefined;
             super.dispose();
         }
         addHelper(plane) {
@@ -34758,9 +34850,10 @@ void main() {
             const extentsCenter = this.viewer.extents.getCenter(new Vector3());
             const constant = -extentsCenter.dot(normal);
             const plane = new Plane(normal, constant);
-            this.clippingPlanes.push(plane);
+            this.viewer.clippingPlanes.push(plane);
             const helper = this.addHelper(plane);
             this.setActiveHelper(helper);
+            this.viewer.emitEvent({ type: "changecuttingplanes" });
         }
         addPlaneX() {
             this.addPlane(new Vector3(-1, 0, 0));
@@ -34775,13 +34868,14 @@ void main() {
             if (!this.activeHelper)
                 return;
             const helper = this.activeHelper;
-            const index = this.clippingPlanes.indexOf(helper.plane);
+            const index = this.viewer.clippingPlanes.indexOf(helper.plane);
             if (index !== -1)
-                this.clippingPlanes.splice(index, 1);
+                this.viewer.clippingPlanes.splice(index, 1);
             this.helpers = this.helpers.filter((x) => x !== helper);
             helper.removeFromParent();
             helper.dispose();
             this.setActiveHelper(this.helpers[this.helpers.length - 1]);
+            this.viewer.emitEvent({ type: "changecuttingplanes" });
         }
     }
 
@@ -34975,7 +35069,7 @@ void main() {
             this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
             this.overlay.addLine(this.line);
             const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
-            this.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
+            this.snapper = new Snapper(viewer.camera, viewer.clippingPlanes, viewer.canvas);
             this.snapper.threshold = extentsSize / 10000;
             this.objects = [];
             this.updateObjects();
@@ -36254,8 +36348,8 @@ void main() {
     commands.registerCommand("right", (viewer) => setDefaultViewPosition(viewer, "right"));
     commands.registerCommand("front", (viewer) => setDefaultViewPosition(viewer, "front"));
     commands.registerCommand("back", (viewer) => setDefaultViewPosition(viewer, "back"));
-    commands.registerCommand("sw", (viewer) => setDefaultViewPosition(viewer, "sw"));
     commands.registerCommand("se", (viewer) => setDefaultViewPosition(viewer, "se"));
+    commands.registerCommand("sw", (viewer) => setDefaultViewPosition(viewer, "sw"));
     commands.registerCommand("ne", (viewer) => setDefaultViewPosition(viewer, "ne"));
     commands.registerCommand("nw", (viewer) => setDefaultViewPosition(viewer, "nw"));
     commands.registerCommandAlias("clearMarkup", "clearOverlay");
@@ -36278,6 +36372,7 @@ void main() {
             this.syncOptions = () => {
                 this.backgroundColor.setHex(0xffffff);
                 this.viewer.renderer.setClearColor(this.backgroundColor);
+                this.viewer.update();
             };
             this.viewer = viewer;
             this.backgroundColor = new Color(0xffffff);
@@ -36287,13 +36382,13 @@ void main() {
         }
         dispose() {
             this.viewer.removeEventListener("optionschange", this.syncOptions);
-            this.viewer.scene.background = undefined;
+            this.viewer.scene.background = null;
         }
     }
 
     class CameraComponent {
         constructor(viewer) {
-            this.optionsChange = () => {
+            this.syncOptions = () => {
                 this.switchCameraMode(this.viewer.options.cameraMode);
             };
             this.geometryEnd = () => {
@@ -36324,13 +36419,13 @@ void main() {
             };
             this.viewer = viewer;
             this.viewer.addEventListener("databasechunk", this.geometryEnd);
-            this.viewer.addEventListener("optionschange", this.optionsChange);
-            this.viewer.addEventListener("initialize", this.optionsChange);
+            this.viewer.addEventListener("optionschange", this.syncOptions);
+            this.viewer.addEventListener("initialize", this.syncOptions);
         }
         dispose() {
             this.viewer.removeEventListener("databasechunk", this.geometryEnd);
-            this.viewer.removeEventListener("optionschange", this.optionsChange);
-            this.viewer.removeEventListener("initialize", this.optionsChange);
+            this.viewer.removeEventListener("optionschange", this.syncOptions);
+            this.viewer.removeEventListener("initialize", this.syncOptions);
         }
         getCameraMode(camera) {
             return camera.isOrthographicCamera ? "orthographic" : "perspective";
@@ -36353,7 +36448,6 @@ void main() {
             camera.updateProjectionMatrix();
             this.viewer.camera = camera;
             this.viewer.renderPass.camera = camera;
-            this.viewer.helpersPass.camera = camera;
             this.viewer.ssaaRenderPass.camera = camera;
             this.viewer.update();
         }
@@ -36364,7 +36458,7 @@ void main() {
             if (mode === this.getCameraMode(currentCamera))
                 return;
             const target = this.viewer.target.clone();
-            let camera;
+            let camera = null;
             if (currentCamera.isOrthographicCamera) {
                 const fov = currentCamera.userData.fov || 45;
                 const fieldHeight = (currentCamera.top - currentCamera.bottom) / currentCamera.zoom;
@@ -36497,7 +36591,7 @@ void main() {
                 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.syncOptions({ data: this.viewer.options });
             };
             this.clear = () => {
                 this.viewer.info.performance.timeToFirstRender = 0;
@@ -36521,7 +36615,7 @@ void main() {
                 this.viewer.info.memory.totalEstimatedGpuBytes = 0;
                 this.viewer.info.memory.usedJSHeapSize = 0;
             };
-            this.optionsChange = ({ data: options }) => {
+            this.syncOptions = ({ data: options }) => {
                 if (options.antialiasing === false)
                     this.viewer.info.render.antialiasing = "";
                 else if (options.antialiasing === true)
@@ -36596,7 +36690,7 @@ void main() {
             this.frames = 0;
             this.viewer.addEventListener("initialize", this.initialize);
             this.viewer.addEventListener("clear", this.clear);
-            this.viewer.addEventListener("optionschange", this.optionsChange);
+            this.viewer.addEventListener("optionschange", this.syncOptions);
             this.viewer.addEventListener("geometrystart", this.geometryStart);
             this.viewer.addEventListener("databasechunk", this.databaseChunk);
             this.viewer.addEventListener("geometryend", this.geometryEnd);
@@ -36607,7 +36701,7 @@ void main() {
         dispose() {
             this.viewer.removeEventListener("initialize", this.initialize);
             this.viewer.removeEventListener("clear", this.clear);
-            this.viewer.removeEventListener("optionschange", this.optionsChange);
+            this.viewer.removeEventListener("optionschange", this.syncOptions);
             this.viewer.removeEventListener("geometrystart", this.geometryStart);
             this.viewer.removeEventListener("databasechunk", this.databaseChunk);
             this.viewer.removeEventListener("geometryend", this.geometryEnd);
@@ -36655,7 +36749,6 @@ void main() {
         }
         dispose() {
             this.mutationObserver.disconnect();
-            this.mutationObserver = undefined;
         }
     }
 
@@ -36674,7 +36767,7 @@ void main() {
         }
     }
 
-    const _box = new Box3();
+    const _box$1 = new Box3();
     const _vector = new Vector3();
     class LineSegmentsGeometry extends InstancedBufferGeometry {
     	constructor() {
@@ -36756,8 +36849,8 @@ void main() {
     		const end = this.attributes.instanceEnd;
     		if ( start !== undefined && end !== undefined ) {
     			this.boundingBox.setFromBufferAttribute( start );
-    			_box.setFromBufferAttribute( end );
-    			this.boundingBox.union( _box );
+    			_box$1.setFromBufferAttribute( end );
+    			this.boundingBox.union( _box$1 );
     		}
     	}
     	computeBoundingSphere() {
@@ -37279,9 +37372,9 @@ void main() {
     	}
     }
 
-    const _start = new Vector3();
-    const _end = new Vector3();
-    const _viewport = new Vector4();
+    const _start$1 = new Vector3();
+    const _end$1 = new Vector3();
+    const _viewport$1 = new Vector4();
     class Wireframe extends Mesh {
     	constructor( geometry = new LineSegmentsGeometry(), material = new LineMaterial( { color: Math.random() * 0xffffff } ) ) {
     		super( geometry, material );
@@ -37294,10 +37387,10 @@ void main() {
     		const instanceEnd = geometry.attributes.instanceEnd;
     		const lineDistances = new Float32Array( 2 * instanceStart.count );
     		for ( let i = 0, j = 0, l = instanceStart.count; i < l; i ++, j += 2 ) {
-    			_start.fromBufferAttribute( instanceStart, i );
-    			_end.fromBufferAttribute( instanceEnd, i );
+    			_start$1.fromBufferAttribute( instanceStart, i );
+    			_end$1.fromBufferAttribute( instanceEnd, i );
     			lineDistances[ j ] = ( j === 0 ) ? 0 : lineDistances[ j - 1 ];
-    			lineDistances[ j + 1 ] = lineDistances[ j ] + _start.distanceTo( _end );
+    			lineDistances[ j + 1 ] = lineDistances[ j ] + _start$1.distanceTo( _end$1 );
     		}
     		const instanceDistanceBuffer = new InstancedInterleavedBuffer( lineDistances, 2, 1 );
     		geometry.setAttribute( 'instanceDistanceStart', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 0 ) );
@@ -37307,8 +37400,8 @@ void main() {
     	onBeforeRender( renderer ) {
     		const uniforms = this.material.uniforms;
     		if ( uniforms && uniforms.resolution ) {
-    			renderer.getViewport( _viewport );
-    			this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w );
+    			renderer.getViewport( _viewport$1 );
+    			this.material.uniforms.resolution.value.set( _viewport$1.z, _viewport$1.w );
     		}
     	}
     }
@@ -37384,28 +37477,38 @@ void main() {
                     polygonOffset: true,
                     polygonOffsetFactor: 1,
                     polygonOffsetUnits: 1,
+                    clippingPlanes: this.viewer.clippingPlanes,
                 });
                 this.edgesMaterial = new LineMaterial({
                     linewidth: 1.5,
                     resolution: new Vector2(window.innerWidth, window.innerHeight),
+                    clippingPlanes: this.viewer.clippingPlanes,
                 });
                 this.lineMaterial = new LineBasicMaterial({
                     transparent: true,
                     depthTest: true,
                     depthWrite: true,
+                    clippingPlanes: this.viewer.clippingPlanes,
                 });
                 this.lineGlowMaterial = new LineMaterial({
                     linewidth: 1.5,
                     transparent: true,
                     opacity: 0.8,
                     resolution: new Vector2(window.innerWidth, window.innerHeight),
+                    clippingPlanes: this.viewer.clippingPlanes,
                 });
                 this.syncHighlightColors();
             };
-            this.optionsChange = () => {
+            this.syncOptions = () => {
                 this.syncHighlightColors();
                 this.viewer.update();
             };
+            this.viewerResize = (event) => {
+                var _a, _b, _c;
+                (_a = this.renderTarget) === null || _a === void 0 ? void 0 : _a.setSize(event.width, event.height);
+                (_b = this.edgesMaterial) === null || _b === void 0 ? void 0 : _b.resolution.set(event.width, event.height);
+                (_c = this.lineGlowMaterial) === null || _c === void 0 ? void 0 : _c.resolution.set(event.width, event.height);
+            };
             this.viewer = viewer;
             const gl2 = viewer.canvas.getContext("webgl2");
             if (gl2) {
@@ -37418,13 +37521,13 @@ void main() {
                 });
             }
             this.viewer.addEventListener("databasechunk", this.geometryEnd);
-            this.viewer.addEventListener("optionschange", this.optionsChange);
+            this.viewer.addEventListener("optionschange", this.syncOptions);
             this.viewer.addEventListener("resize", this.viewerResize);
             this.geometryEnd();
         }
         dispose() {
             this.viewer.removeEventListener("databasechunk", this.geometryEnd);
-            this.viewer.removeEventListener("optionschange", this.optionsChange);
+            this.viewer.removeEventListener("optionschange", this.syncOptions);
             this.viewer.removeEventListener("resize", this.viewerResize);
         }
         highlight(objects) {
@@ -37503,12 +37606,6 @@ void main() {
                     wireframe.visible = edgesVisibility;
             });
         }
-        viewerResize(event) {
-            var _a, _b, _c;
-            (_a = this.renderTarget) === null || _a === void 0 ? void 0 : _a.setSize(event.width, event.height);
-            (_b = this.edgesMaterial) === null || _b === void 0 ? void 0 : _b.resolution.set(event.width, event.height);
-            (_c = this.lineGlowMaterial) === null || _c === void 0 ? void 0 : _c.resolution.set(event.width, event.height);
-        }
     }
 
     class SelectionComponent {
@@ -37525,7 +37622,7 @@ void main() {
                 if (upPosition.distanceTo(this.downPosition) !== 0)
                     return;
                 const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
-                const snapper = new Snapper(this.viewer.camera, this.viewer.renderer, this.viewer.canvas);
+                const snapper = new Snapper(this.viewer.camera, this.viewer.clippingPlanes, this.viewer.canvas);
                 snapper.threshold = extentsSize / 10000;
                 let intersections = [];
                 this.viewer.models.forEach((model) => {
@@ -37622,9 +37719,1032 @@ void main() {
         }
     }
 
+    class ClippingPlaneComponent {
+        constructor(viewer) {
+            this.applyClippingPlanes = () => {
+                this.viewer.models.forEach((model) => {
+                    model.scene.traverse((object) => {
+                        if (object.material) {
+                            const materials = Array.isArray(object.material) ? object.material : [object.material];
+                            materials.forEach((material) => (material.clippingPlanes = this.viewer.clippingPlanes));
+                        }
+                    });
+                });
+            };
+            this.viewer = viewer;
+            this.viewer.addEventListener("geometryend", this.applyClippingPlanes);
+            this.viewer.addEventListener("changecuttingplanes", this.applyClippingPlanes);
+        }
+        dispose() {
+            this.viewer.removeEventListener("geometryend", this.applyClippingPlanes);
+            this.viewer.removeEventListener("changecuttingplanes", this.applyClippingPlanes);
+        }
+    }
+
+    const _viewport = new Vector4();
+    const _start = new Vector3();
+    const _end = new Vector3();
+    const _start4 = new Vector4();
+    const _end4 = new Vector4();
+    const _ssOrigin = new Vector4();
+    const _ssOrigin3 = new Vector3();
+    const _mvMatrix = new Matrix4();
+    const _line = new Line3();
+    const _closestPoint = new Vector3();
+    const _box = new Box3();
+    const _sphere = new Sphere();
+    const _clipToWorldVector = new Vector4();
+    let _ray, _lineWidth;
+    function getWorldSpaceHalfWidth( camera, distance, resolution ) {
+    	_clipToWorldVector.set( 0, 0, - distance, 1.0 ).applyMatrix4( camera.projectionMatrix );
+    	_clipToWorldVector.multiplyScalar( 1.0 / _clipToWorldVector.w );
+    	_clipToWorldVector.x = _lineWidth / resolution.width;
+    	_clipToWorldVector.y = _lineWidth / resolution.height;
+    	_clipToWorldVector.applyMatrix4( camera.projectionMatrixInverse );
+    	_clipToWorldVector.multiplyScalar( 1.0 / _clipToWorldVector.w );
+    	return Math.abs( Math.max( _clipToWorldVector.x, _clipToWorldVector.y ) );
+    }
+    function raycastWorldUnits( lineSegments, intersects ) {
+    	const matrixWorld = lineSegments.matrixWorld;
+    	const geometry = lineSegments.geometry;
+    	const instanceStart = geometry.attributes.instanceStart;
+    	const instanceEnd = geometry.attributes.instanceEnd;
+    	const segmentCount = Math.min( geometry.instanceCount, instanceStart.count );
+    	for ( let i = 0, l = segmentCount; i < l; i ++ ) {
+    		_line.start.fromBufferAttribute( instanceStart, i );
+    		_line.end.fromBufferAttribute( instanceEnd, i );
+    		_line.applyMatrix4( matrixWorld );
+    		const pointOnLine = new Vector3();
+    		const point = new Vector3();
+    		_ray.distanceSqToSegment( _line.start, _line.end, point, pointOnLine );
+    		const isInside = point.distanceTo( pointOnLine ) < _lineWidth * 0.5;
+    		if ( isInside ) {
+    			intersects.push( {
+    				point,
+    				pointOnLine,
+    				distance: _ray.origin.distanceTo( point ),
+    				object: lineSegments,
+    				face: null,
+    				faceIndex: i,
+    				uv: null,
+    				uv1: null,
+    			} );
+    		}
+    	}
+    }
+    function raycastScreenSpace( lineSegments, camera, intersects ) {
+    	const projectionMatrix = camera.projectionMatrix;
+    	const material = lineSegments.material;
+    	const resolution = material.resolution;
+    	const matrixWorld = lineSegments.matrixWorld;
+    	const geometry = lineSegments.geometry;
+    	const instanceStart = geometry.attributes.instanceStart;
+    	const instanceEnd = geometry.attributes.instanceEnd;
+    	const segmentCount = Math.min( geometry.instanceCount, instanceStart.count );
+    	const near = - camera.near;
+    	_ray.at( 1, _ssOrigin );
+    	_ssOrigin.w = 1;
+    	_ssOrigin.applyMatrix4( camera.matrixWorldInverse );
+    	_ssOrigin.applyMatrix4( projectionMatrix );
+    	_ssOrigin.multiplyScalar( 1 / _ssOrigin.w );
+    	_ssOrigin.x *= resolution.x / 2;
+    	_ssOrigin.y *= resolution.y / 2;
+    	_ssOrigin.z = 0;
+    	_ssOrigin3.copy( _ssOrigin );
+    	_mvMatrix.multiplyMatrices( camera.matrixWorldInverse, matrixWorld );
+    	for ( let i = 0, l = segmentCount; i < l; i ++ ) {
+    		_start4.fromBufferAttribute( instanceStart, i );
+    		_end4.fromBufferAttribute( instanceEnd, i );
+    		_start4.w = 1;
+    		_end4.w = 1;
+    		_start4.applyMatrix4( _mvMatrix );
+    		_end4.applyMatrix4( _mvMatrix );
+    		const isBehindCameraNear = _start4.z > near && _end4.z > near;
+    		if ( isBehindCameraNear ) {
+    			continue;
+    		}
+    		if ( _start4.z > near ) {
+    			const deltaDist = _start4.z - _end4.z;
+    			const t = ( _start4.z - near ) / deltaDist;
+    			_start4.lerp( _end4, t );
+    		} else if ( _end4.z > near ) {
+    			const deltaDist = _end4.z - _start4.z;
+    			const t = ( _end4.z - near ) / deltaDist;
+    			_end4.lerp( _start4, t );
+    		}
+    		_start4.applyMatrix4( projectionMatrix );
+    		_end4.applyMatrix4( projectionMatrix );
+    		_start4.multiplyScalar( 1 / _start4.w );
+    		_end4.multiplyScalar( 1 / _end4.w );
+    		_start4.x *= resolution.x / 2;
+    		_start4.y *= resolution.y / 2;
+    		_end4.x *= resolution.x / 2;
+    		_end4.y *= resolution.y / 2;
+    		_line.start.copy( _start4 );
+    		_line.start.z = 0;
+    		_line.end.copy( _end4 );
+    		_line.end.z = 0;
+    		const param = _line.closestPointToPointParameter( _ssOrigin3, true );
+    		_line.at( param, _closestPoint );
+    		const zPos = MathUtils.lerp( _start4.z, _end4.z, param );
+    		const isInClipSpace = zPos >= -1 && zPos <= 1;
+    		const isInside = _ssOrigin3.distanceTo( _closestPoint ) < _lineWidth * 0.5;
+    		if ( isInClipSpace && isInside ) {
+    			_line.start.fromBufferAttribute( instanceStart, i );
+    			_line.end.fromBufferAttribute( instanceEnd, i );
+    			_line.start.applyMatrix4( matrixWorld );
+    			_line.end.applyMatrix4( matrixWorld );
+    			const pointOnLine = new Vector3();
+    			const point = new Vector3();
+    			_ray.distanceSqToSegment( _line.start, _line.end, point, pointOnLine );
+    			intersects.push( {
+    				point: point,
+    				pointOnLine: pointOnLine,
+    				distance: _ray.origin.distanceTo( point ),
+    				object: lineSegments,
+    				face: null,
+    				faceIndex: i,
+    				uv: null,
+    				uv1: null,
+    			} );
+    		}
+    	}
+    }
+    class LineSegments2 extends Mesh {
+    	constructor( geometry = new LineSegmentsGeometry(), material = new LineMaterial( { color: Math.random() * 0xffffff } ) ) {
+    		super( geometry, material );
+    		this.isLineSegments2 = true;
+    		this.type = 'LineSegments2';
+    	}
+    	computeLineDistances() {
+    		const geometry = this.geometry;
+    		const instanceStart = geometry.attributes.instanceStart;
+    		const instanceEnd = geometry.attributes.instanceEnd;
+    		const lineDistances = new Float32Array( 2 * instanceStart.count );
+    		for ( let i = 0, j = 0, l = instanceStart.count; i < l; i ++, j += 2 ) {
+    			_start.fromBufferAttribute( instanceStart, i );
+    			_end.fromBufferAttribute( instanceEnd, i );
+    			lineDistances[ j ] = ( j === 0 ) ? 0 : lineDistances[ j - 1 ];
+    			lineDistances[ j + 1 ] = lineDistances[ j ] + _start.distanceTo( _end );
+    		}
+    		const instanceDistanceBuffer = new InstancedInterleavedBuffer( lineDistances, 2, 1 );
+    		geometry.setAttribute( 'instanceDistanceStart', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 0 ) );
+    		geometry.setAttribute( 'instanceDistanceEnd', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 1 ) );
+    		return this;
+    	}
+    	raycast( raycaster, intersects ) {
+    		const worldUnits = this.material.worldUnits;
+    		const camera = raycaster.camera;
+    		if ( camera === null && ! worldUnits ) {
+    			console.error( 'LineSegments2: "Raycaster.camera" needs to be set in order to raycast against LineSegments2 while worldUnits is set to false.' );
+    		}
+    		const threshold = ( raycaster.params.Line2 !== undefined ) ? raycaster.params.Line2.threshold || 0 : 0;
+    		_ray = raycaster.ray;
+    		const matrixWorld = this.matrixWorld;
+    		const geometry = this.geometry;
+    		const material = this.material;
+    		_lineWidth = material.linewidth + threshold;
+    		if ( geometry.boundingSphere === null ) {
+    			geometry.computeBoundingSphere();
+    		}
+    		_sphere.copy( geometry.boundingSphere ).applyMatrix4( matrixWorld );
+    		let sphereMargin;
+    		if ( worldUnits ) {
+    			sphereMargin = _lineWidth * 0.5;
+    		} else {
+    			const distanceToSphere = Math.max( camera.near, _sphere.distanceToPoint( _ray.origin ) );
+    			sphereMargin = getWorldSpaceHalfWidth( camera, distanceToSphere, material.resolution );
+    		}
+    		_sphere.radius += sphereMargin;
+    		if ( _ray.intersectsSphere( _sphere ) === false ) {
+    			return;
+    		}
+    		if ( geometry.boundingBox === null ) {
+    			geometry.computeBoundingBox();
+    		}
+    		_box.copy( geometry.boundingBox ).applyMatrix4( matrixWorld );
+    		let boxMargin;
+    		if ( worldUnits ) {
+    			boxMargin = _lineWidth * 0.5;
+    		} else {
+    			const distanceToBox = Math.max( camera.near, _box.distanceToPoint( _ray.origin ) );
+    			boxMargin = getWorldSpaceHalfWidth( camera, distanceToBox, material.resolution );
+    		}
+    		_box.expandByScalar( boxMargin );
+    		if ( _ray.intersectsBox( _box ) === false ) {
+    			return;
+    		}
+    		if ( worldUnits ) {
+    			raycastWorldUnits( this, intersects );
+    		} else {
+    			raycastScreenSpace( this, camera, intersects );
+    		}
+    	}
+    	onBeforeRender( renderer ) {
+    		const uniforms = this.material.uniforms;
+    		if ( uniforms && uniforms.resolution ) {
+    			renderer.getViewport( _viewport );
+    			this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w );
+    		}
+    	}
+    }
+
+    class PointHashGrid {
+      constructor(tolerance = 1e-5) {
+        this.tolerance = tolerance;
+        this.points = [];
+        this.grid = new Map();
+      }
+      _hash(hx, hy, hz) {
+        return `${hx},${hy},${hz}`;
+      }
+      add(v) {
+        const hx = Math.round(v.x / this.tolerance);
+        const hy = Math.round(v.y / this.tolerance);
+        const hz = Math.round(v.z / this.tolerance);
+        for (let i = -1; i <= 1; i++) {
+          for (let j = -1; j <= 1; j++) {
+            for (let k = -1; k <= 1; k++) {
+              const hash = this._hash(hx + i, hy + j, hz + k);
+              const cell = this.grid.get(hash);
+              if (cell) {
+                for (const id of cell) {
+                  if (this.points[id].distanceTo(v) <= this.tolerance) return id;
+                }
+              }
+            }
+          }
+        }
+        const id = this.points.length;
+        this.points.push(v.clone());
+        const centerHash = this._hash(hx, hy, hz);
+        if (!this.grid.has(centerHash)) this.grid.set(centerHash, []);
+        this.grid.get(centerHash).push(id);
+        return id;
+      }
+    }
+    class SectionsHelper extends Object3D {
+      constructor() {
+        super();
+        this.type = "SectionsHelper";
+        this.flags = {
+          fillEnabled: true,
+          fillColor: "#fffde7",
+          hatchEnabled: true,
+          hatchColor: "#000000",
+          hatchScale: 8.0,
+          outlineEnabled: true,
+          outlineColor: "#000000",
+          outlineWidth: 2,
+          boundaryOnly: true,
+          showDebugSeams: false,
+          showDebugPoints: false,
+          showDebugSegments: false,
+          showDebugGaps: false,
+          showDebugInfo: false,
+          useObjFillColor: false,
+          useObjOutlineColor: false,
+        };
+        this._caps = [];
+        this._outlines = [];
+        this._debugPoints = [];
+        this._debugSegments = [];
+        this._debugGaps = [];
+        this._vA = new Vector3();
+        this._vB = new Vector3();
+        this._vC = new Vector3();
+        this._worldBox = new Box3();
+      }
+      dispose() {
+        const disposeMesh = (item) => {
+          if (item.geometry) item.geometry.dispose();
+          if (item.material) item.material.dispose();
+          this.remove(item);
+        };
+        this._caps.forEach(disposeMesh);
+        this._outlines.forEach(disposeMesh);
+        this._debugPoints.forEach(disposeMesh);
+        this._debugSegments.forEach(disposeMesh);
+        this._debugGaps.forEach(disposeMesh);
+        this._caps.length = 0;
+        this._outlines.length = 0;
+        this._debugPoints.length = 0;
+        this._debugSegments.length = 0;
+        this._debugGaps.length = 0;
+      }
+      setSize(width, height) {
+        this._outlines.forEach((o) => {
+          if (o.material.resolution) o.material.resolution.set(width, height);
+        });
+        this._debugSegments.forEach((s) => {
+          if (s.material.resolution) s.material.resolution.set(width, height);
+        });
+      }
+      _ensureHelpersCount(count) {
+        const hatchVertexShader = `
+                    #include <common>
+                    #include <logdepthbuf_pars_vertex>
+                    #include <clipping_planes_pars_vertex>
+                    
+                    attribute float aHatchDir; 
+                    attribute vec3 aFillColor;
+                    
+                    varying vec3 vWP; 
+                    varying float vHatchDir; 
+                    varying vec3 vFillColor;
+                    
+                    void main() { 
+                        vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+                        #include <clipping_planes_vertex>
+                        
+                        vWP = (modelMatrix * vec4(position, 1.0)).xyz;
+                        vHatchDir = aHatchDir; 
+                        vFillColor = aFillColor;
+                        
+                        gl_Position = projectionMatrix * mvPosition; 
+                        #include <logdepthbuf_vertex>
+                    }
+                `;
+        const hatchFragmentShader = `
+                    #include <common>
+                    #include <logdepthbuf_pars_fragment>
+                    #include <clipping_planes_pars_fragment>
+                    
+                    uniform vec3 lineColor; 
+                    uniform float uHatchScale; 
+                    uniform float uHatchEnabled;
+                    
+                    varying vec3 vWP; 
+                    varying float vHatchDir; 
+                    varying vec3 vFillColor;
+                    
+                    void main() { 
+                        #include <clipping_planes_fragment>
+                        #include <logdepthbuf_fragment>
+                        
+                        float v1 = mod(gl_FragCoord.x + gl_FragCoord.y, uHatchScale);
+                        float v2 = mod(gl_FragCoord.x - gl_FragCoord.y, uHatchScale);
+                        float v = mix(v1, v2, vHatchDir);
+                        
+                        float hatchMask = step(v, 1.5) * uHatchEnabled;
+                        gl_FragColor = vec4(mix(vFillColor, lineColor, hatchMask), 1.0); 
+                    }
+                `;
+        while (this._caps.length < count) {
+          const capMat = new ShaderMaterial({
+            uniforms: {
+              lineColor: { value: new Color() },
+              uHatchScale: { value: 10.0 },
+              uHatchEnabled: { value: 1.0 },
+            },
+            vertexShader: hatchVertexShader,
+            fragmentShader: hatchFragmentShader,
+            side: DoubleSide,
+            clipping: true,
+            depthTest: true,
+            depthWrite: false,
+          });
+          const capMesh = new Mesh(new BufferGeometry(), capMat);
+          capMesh.renderOrder = 5;
+          this.add(capMesh);
+          this._caps.push(capMesh);
+          const lineMat = new LineMaterial({
+            color: 0xffffff,
+            linewidth: 2,
+            resolution: new Vector2(window.innerWidth, window.innerHeight),
+            depthTest: true,
+            clipping: true,
+            vertexColors: true,
+          });
+          const lineObj = new LineSegments2(new LineSegmentsGeometry(), lineMat);
+          lineObj.renderOrder = 100;
+          this.add(lineObj);
+          this._outlines.push(lineObj);
+          const ptsMat = new PointsMaterial({
+            color: 0x00aaff,
+            size: 6,
+            sizeAttenuation: false,
+            depthTest: false,
+            transparent: true,
+            depthWrite: false,
+          });
+          const pointsObj = new Points(new BufferGeometry(), ptsMat);
+          pointsObj.renderOrder = 200;
+          this.add(pointsObj);
+          this._debugPoints.push(pointsObj);
+          const debugSegMat = new LineMaterial({
+            color: 0x00ff00,
+            linewidth: 4,
+            resolution: new Vector2(window.innerWidth, window.innerHeight),
+            depthTest: false,
+            transparent: true,
+            depthWrite: false,
+            clipping: true,
+          });
+          const debugSegObj = new LineSegments2(new LineSegmentsGeometry(), debugSegMat);
+          debugSegObj.renderOrder = 150;
+          this.add(debugSegObj);
+          this._debugSegments.push(debugSegObj);
+          const gapPtsMat = new PointsMaterial({
+            size: 6,
+            sizeAttenuation: false,
+            depthTest: false,
+            transparent: true,
+            depthWrite: false,
+            vertexColors: true,
+          });
+          const gapsObj = new Points(new BufferGeometry(), gapPtsMat);
+          gapsObj.renderOrder = 250;
+          this.add(gapsObj);
+          this._debugGaps.push(gapsObj);
+        }
+        for (let i = count; i < this._caps.length; i++) {
+          this._caps[i].visible = false;
+          this._outlines[i].visible = false;
+          this._debugPoints[i].visible = false;
+          this._debugSegments[i].visible = false;
+          this._debugGaps[i].visible = false;
+        }
+      }
+      update(objects, extents, planes) {
+        const t0 = performance.now();
+        this._ensureHelpersCount(planes.length);
+        if (planes.length === 0) return;
+        const sphere = extents.getBoundingSphere(new Sphere());
+        const globalRadius = Math.max(sphere.radius, 1e-3);
+        const clippingBias = globalRadius * 1e-4;
+        const biasedPlanes = planes.map((p) => {
+          const bp = p.clone();
+          bp.constant += clippingBias;
+          return bp;
+        });
+        const targetMeshes = [];
+        objects.forEach((obj) => {
+          if (obj.isMesh && obj.material) {
+            const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
+            if (mats.some((m) => m.clippingPlanes)) targetMeshes.push(obj);
+          }
+        });
+        planes.forEach((plane, pIdx) => {
+          const capMesh = this._caps[pIdx];
+          const outlineMesh = this._outlines[pIdx];
+          const debugPtsMesh = this._debugPoints[pIdx];
+          const debugSegsMesh = this._debugSegments[pIdx];
+          const debugGapsMesh = this._debugGaps[pIdx];
+          const hatchColor = new Color(this.flags.hatchColor);
+          hatchColor.convertLinearToSRGB();
+          capMesh.material.uniforms.lineColor.value.set(hatchColor);
+          capMesh.material.uniforms.uHatchScale.value = this.flags.hatchScale;
+          capMesh.material.uniforms.uHatchEnabled.value = this.flags.hatchEnabled ? 1.0 : 0.0;
+          outlineMesh.material.linewidth = this.flags.outlineWidth;
+          const otherBiasedPlanes = biasedPlanes.filter((_, i) => i !== pIdx);
+          capMesh.material.clippingPlanes = otherBiasedPlanes;
+          outlineMesh.material.clippingPlanes = otherBiasedPlanes;
+          debugSegsMesh.material.clippingPlanes = otherBiasedPlanes;
+          const n = plane.normal;
+          const planeOrigin = n.clone().multiplyScalar(-plane.constant);
+          const up = new Vector3(0, 1, 0);
+          if (Math.abs(n.dot(up)) > 0.999) up.set(1, 0, 0);
+          const uAxis = new Vector3().crossVectors(up, n).normalize();
+          const vAxis = new Vector3().crossVectors(n, uAxis).normalize();
+          const positions = [];
+          const indices = [];
+          const hatchDirs = [];
+          const fillColors = [];
+          const combinedOutlinePoints = [];
+          const combinedOutlineColors = [];
+          const rawPts = [];
+          const rawSegs = [];
+          const rawGaps = [];
+          const rawGapColors = [];
+          targetMeshes.forEach((mesh, meshIndex) => {
+            if (!mesh.geometry.boundingBox) mesh.geometry.computeBoundingBox();
+            if (!mesh.geometry.boundingSphere) mesh.geometry.computeBoundingSphere();
+            this._worldBox.copy(mesh.geometry.boundingBox).applyMatrix4(mesh.matrixWorld);
+            if (!plane.intersectsBox(this._worldBox)) return;
+            const localScale = new Vector3().setFromMatrixScale(mesh.matrixWorld);
+            const maxScale = Math.max(localScale.x, localScale.y, localScale.z);
+            const localRadius = Math.max(mesh.geometry.boundingSphere.radius * maxScale, 1e-3);
+            const localHashTolerance = Math.max(localRadius * 1e-4, 1e-6);
+            const localEps = Math.max(localRadius * 1e-5, 1e-7);
+            const baseColor = new Color(0xffffff);
+            const om = mesh.userData.originalMaterial;
+            const mm = om ?? (Array.isArray(mesh.material) ? mesh.material[0] : mesh.material);
+            if (mm.color) baseColor.copy(mm.color);
+            const objFillColor = baseColor.clone().lerp(new Color(0x000000), 0.2);
+            const objOutlineColor = baseColor.clone().lerp(new Color(0x000000), 0.85);
+            const hue = ((meshIndex * 137.5) % 360) / 360;
+            const meshGapColor = new Color().setHSL(hue, 1.0, 0.5);
+            const currentHatchDir = meshIndex % 2 === 0 ? 0.0 : 1.0;
+            const fillColor = this.flags.useObjFillColor ? objFillColor : new Color(this.flags.fillColor);
+            const outlineColor = this.flags.useObjOutlineColor ? objOutlineColor : new Color(this.flags.outlineColor);
+            meshGapColor.convertLinearToSRGB();
+            fillColor.convertLinearToSRGB();
+            outlineColor.convertLinearToSRGB();
+            const localEdgeStats = new Map();
+            const localPointGrid = new PointHashGrid(localHashTolerance);
+            this._calculateMeshSegmentsUndirected(mesh, plane, localEdgeStats, localPointGrid, localEps);
+            if (localEdgeStats.size > 0) {
+              const boundaryEdges = [];
+              for (const [key, stat] of localEdgeStats.entries()) {
+                const isBoundary = stat.count % 2 !== 0;
+                const ids = key.split("-");
+                const id0 = Number(ids[0]);
+                const id1 = Number(ids[1]);
+                const p1 = localPointGrid.points[id0];
+                const p2 = localPointGrid.points[id1];
+                if (this.flags.showDebugSeams || (this.flags.boundaryOnly ? isBoundary : true)) {
+                  combinedOutlinePoints.push(p1.x, p1.y, p1.z, p2.x, p2.y, p2.z);
+                  combinedOutlineColors.push(outlineColor.r, outlineColor.g, outlineColor.b);
+                  combinedOutlineColors.push(outlineColor.r, outlineColor.g, outlineColor.b);
+                }
+                if (isBoundary) boundaryEdges.push([id0, id1]);
+                if (this.flags.showDebugSegments) rawSegs.push(p1.x, p1.y, p1.z, p2.x, p2.y, p2.z);
+              }
+              if (this.flags.showDebugPoints) {
+                for (const p of localPointGrid.points) rawPts.push(p.x, p.y, p.z);
+              }
+              if (this.flags.fillEnabled && boundaryEdges.length >= 3) {
+                const currentAdj = new Map();
+                for (const edge of boundaryEdges) {
+                  const a = edge[0];
+                  const b = edge[1];
+                  if (!currentAdj.has(a)) currentAdj.set(a, []);
+                  if (!currentAdj.has(b)) currentAdj.set(b, []);
+                  currentAdj.get(a).push(b);
+                  currentAdj.get(b).push(a);
+                }
+                const degree1 = [];
+                for (const [node, neighbors] of currentAdj.entries()) {
+                  if (neighbors.length === 1) degree1.push(node);
+                }
+                const stitchTol = Math.max(localRadius * 0.05, 1e-4);
+                for (let i = 0; i < degree1.length; i++) {
+                  const n1 = degree1[i];
+                  if (currentAdj.get(n1).length !== 1) continue;
+                  const p1 = localPointGrid.points[n1];
+                  let bestEdgeIdx = -1;
+                  let bestProj = null;
+                  let bestT = 0;
+                  let minDist = stitchTol;
+                  const edgeCount = boundaryEdges.length;
+                  for (let eIdx = 0; eIdx < edgeCount; eIdx++) {
+                    const edge = boundaryEdges[eIdx];
+                    const eA = edge[0];
+                    const eB = edge[1];
+                    if (eA === n1 || eB === n1) continue;
+                    const pA = localPointGrid.points[eA];
+                    const pB = localPointGrid.points[eB];
+                    const lineVec = new Vector3().subVectors(pB, pA);
+                    const lineLenSq = lineVec.lengthSq();
+                    let proj;
+                    let t;
+                    if (lineLenSq < 1e-12) {
+                      proj = pA.clone();
+                      t = 0;
+                    } else {
+                      const ptVec = new Vector3().subVectors(p1, pA);
+                      t = ptVec.dot(lineVec) / lineLenSq;
+                      t = Math.max(0, Math.min(1, t));
+                      proj = new Vector3().copy(pA).addScaledVector(lineVec, t);
+                    }
+                    const dist = p1.distanceTo(proj);
+                    if (dist < minDist) {
+                      minDist = dist;
+                      bestEdgeIdx = eIdx;
+                      bestProj = proj;
+                      bestT = t;
+                    }
+                  }
+                  if (bestEdgeIdx !== -1) {
+                    const edge = boundaryEdges[bestEdgeIdx];
+                    const eA = edge[0];
+                    const eB = edge[1];
+                    if (bestT < 0.001) {
+                      boundaryEdges.push([n1, eA]);
+                      currentAdj.get(n1).push(eA);
+                      currentAdj.get(eA).push(n1);
+                      p1.copy(localPointGrid.points[eA]);
+                    } else if (bestT > 0.999) {
+                      boundaryEdges.push([n1, eB]);
+                      currentAdj.get(n1).push(eB);
+                      currentAdj.get(eB).push(n1);
+                      p1.copy(localPointGrid.points[eB]);
+                    } else {
+                      const newNodeId = localPointGrid.add(bestProj);
+                      edge[1] = newNodeId;
+                      boundaryEdges.push([newNodeId, eB]);
+                      boundaryEdges.push([n1, newNodeId]);
+                      const neighborsA = currentAdj.get(eA);
+                      neighborsA[neighborsA.indexOf(eB)] = newNodeId;
+                      const neighborsB = currentAdj.get(eB);
+                      neighborsB[neighborsB.indexOf(eA)] = newNodeId;
+                      if (!currentAdj.has(newNodeId)) currentAdj.set(newNodeId, []);
+                      currentAdj.get(newNodeId).push(eA, eB, n1);
+                      currentAdj.get(n1).push(newNodeId);
+                      p1.copy(bestProj);
+                    }
+                  }
+                }
+                if (this.flags.showDebugGaps) {
+                  for (const [node, neighbors] of currentAdj.entries()) {
+                    if (neighbors.length !== 2) {
+                      const p = localPointGrid.points[node];
+                      rawGaps.push(p.x, p.y, p.z);
+                      rawGapColors.push(meshGapColor.r, meshGapColor.g, meshGapColor.b);
+                    }
+                  }
+                }
+                const loops = this._assembleLoopsUndirected(boundaryEdges, localPointGrid, uAxis, vAxis);
+                if (loops.length > 0) {
+                  this._triangulateTreeOptimized(
+                    loops,
+                    planeOrigin,
+                    uAxis,
+                    vAxis,
+                    positions,
+                    indices,
+                    localRadius,
+                    fillColor,
+                    currentHatchDir,
+                    hatchDirs,
+                    fillColors
+                  );
+                }
+              }
+            }
+          });
+          if (indices.length > 0) {
+            capMesh.geometry.dispose();
+            capMesh.geometry = new BufferGeometry();
+            capMesh.geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+            capMesh.geometry.setAttribute("aHatchDir", new Float32BufferAttribute(hatchDirs, 1));
+            capMesh.geometry.setAttribute("aFillColor", new Float32BufferAttribute(fillColors, 3));
+            capMesh.geometry.setIndex(indices);
+            capMesh.geometry.computeVertexNormals();
+            capMesh.visible = this.flags.fillEnabled;
+          } else {
+            capMesh.visible = false;
+          }
+          if (outlineMesh.geometry) outlineMesh.geometry.dispose();
+          outlineMesh.geometry = new LineSegmentsGeometry();
+          if (this.flags.outlineEnabled && combinedOutlinePoints.length >= 6) {
+            outlineMesh.geometry.setPositions(new Float32Array(combinedOutlinePoints));
+            outlineMesh.geometry.setColors(new Float32Array(combinedOutlineColors));
+            outlineMesh.visible = true;
+          } else {
+            outlineMesh.visible = false;
+          }
+          if (this.flags.showDebugPoints && rawPts.length > 0) {
+            debugPtsMesh.geometry.setAttribute("position", new Float32BufferAttribute(rawPts, 3));
+            debugPtsMesh.visible = true;
+          } else {
+            debugPtsMesh.visible = false;
+          }
+          if (debugSegsMesh.geometry) debugSegsMesh.geometry.dispose();
+          debugSegsMesh.geometry = new LineSegmentsGeometry();
+          if (this.flags.showDebugSegments && rawSegs.length >= 6) {
+            debugSegsMesh.geometry.setPositions(new Float32Array(rawSegs));
+            debugSegsMesh.visible = true;
+          } else {
+            debugSegsMesh.visible = false;
+          }
+          if (debugGapsMesh.geometry) debugGapsMesh.geometry.dispose();
+          debugGapsMesh.geometry = new BufferGeometry();
+          if (this.flags.showDebugGaps && rawGaps.length > 0) {
+            debugGapsMesh.geometry.setAttribute("position", new Float32BufferAttribute(rawGaps, 3));
+            debugGapsMesh.geometry.setAttribute("color", new Float32BufferAttribute(rawGapColors, 3));
+            debugGapsMesh.visible = true;
+          } else {
+            debugGapsMesh.visible = false;
+          }
+        });
+        if (this.flags.showDebugInfo) {
+          console.log(`[SectionsHelper] v7.00 Updated in ${(performance.now() - t0).toFixed(2)} ms`);
+        }
+      }
+      _assembleLoopsUndirected(edges, pointGrid, uAxis, vAxis) {
+        const adj = new Map();
+        for (const edge of edges) {
+          const a = edge[0];
+          const b = edge[1];
+          if (!adj.has(a)) adj.set(a, []);
+          if (!adj.has(b)) adj.set(b, []);
+          adj.get(a).push(b);
+          adj.get(b).push(a);
+        }
+        const loops = [];
+        while (adj.size > 0) {
+          let startNode = -1;
+          for (const key of adj.keys()) {
+            if (adj.get(key).length > 0) {
+              startNode = key;
+              break;
+            }
+          }
+          if (startNode === -1) break;
+          let current = startNode;
+          let prev = -1;
+          const path = [];
+          const pathIndices = new Map();
+          while (true) {
+            path.push(current);
+            pathIndices.set(current, path.length - 1);
+            const neighbors = adj.get(current);
+            if (!neighbors || neighbors.length === 0) break;
+            let nextIdx = 0;
+            if (neighbors.length > 1 && prev !== -1) {
+              const pPrev = pointGrid.points[prev];
+              const pCurr = pointGrid.points[current];
+              const vIn = new Vector3().subVectors(pCurr, pPrev);
+              const in2d = new Vector2(vIn.dot(uAxis), vIn.dot(vAxis));
+              if (in2d.lengthSq() > 1e-10) {
+                in2d.normalize();
+                let minAngle = Infinity;
+                for (let i = 0; i < neighbors.length; i++) {
+                  const pNext = pointGrid.points[neighbors[i]];
+                  const vOut = new Vector3().subVectors(pNext, pCurr);
+                  const out2d = new Vector2(vOut.dot(uAxis), vOut.dot(vAxis));
+                  if (out2d.lengthSq() > 1e-10) {
+                    out2d.normalize();
+                    const angle = Math.atan2(in2d.cross(out2d), in2d.dot(out2d));
+                    if (angle < minAngle) {
+                      minAngle = angle;
+                      nextIdx = i;
+                    }
+                  }
+                }
+              }
+            }
+            const next = neighbors[nextIdx];
+            neighbors.splice(nextIdx, 1);
+            const nextNeighbors = adj.get(next);
+            if (nextNeighbors) {
+              const revIdx = nextNeighbors.indexOf(current);
+              if (revIdx !== -1) nextNeighbors.splice(revIdx, 1);
+            }
+            prev = current;
+            current = next;
+            if (pathIndices.has(current)) {
+              const loopStartIdx = pathIndices.get(current);
+              const loopNodes = path.slice(loopStartIdx);
+              if (loopNodes.length >= 3) loops.push(loopNodes.map((id) => pointGrid.points[id]));
+              for (let i = loopStartIdx; i < path.length; i++) pathIndices.delete(path[i]);
+              path.length = loopStartIdx;
+              prev = path.length > 1 ? path[path.length - 2] : -1;
+            }
+          }
+          for (const key of adj.keys()) {
+            if (adj.get(key).length === 0) adj.delete(key);
+          }
+        }
+        return loops;
+      }
+      _triangulateTreeOptimized(
+        loops,
+        planeOrigin,
+        uAxis,
+        vAxis,
+        positionsBuffer,
+        indicesBuffer,
+        localRadius,
+        fillColor,
+        hatchDir,
+        hatchDirsBuffer,
+        fillColorsBuffer
+      ) {
+        const shapesData = [];
+        const minArea = localRadius * 1e-5 * (localRadius * 1e-5);
+        loops.forEach((loop) => {
+          const pts2d = loop.map((p) => {
+            const pv = p.clone().sub(planeOrigin);
+            return new Vector2(pv.dot(uAxis), pv.dot(vAxis));
+          });
+          const cleaned = [];
+          for (let k = 0; k < pts2d.length; k++) {
+            const prev = k === 0 ? pts2d[pts2d.length - 1] : pts2d[k - 1];
+            if (pts2d[k].distanceTo(prev) > 1e-5) cleaned.push(pts2d[k]);
+          }
+          if (cleaned.length < 3) return;
+          const area = ShapeUtils.area(cleaned);
+          if (Math.abs(area) > minArea) {
+            shapesData.push({ pts2d: cleaned, absArea: Math.abs(area), depth: 0, parent: -1, holes: [] });
+          }
+        });
+        shapesData.sort((a, b) => b.absArea - a.absArea);
+        for (let i = 0; i < shapesData.length; i++) {
+          for (let j = i - 1; j >= 0; j--) {
+            if (shapesData[i].absArea > shapesData[j].absArea * 0.98) continue;
+            if (this._isLoopInside(shapesData[i].pts2d, shapesData[j].pts2d, localRadius)) {
+              shapesData[i].parent = j;
+              shapesData[i].depth = shapesData[j].depth + 1;
+              break;
+            }
+          }
+        }
+        for (let i = 0; i < shapesData.length; i++) {
+          const shape = shapesData[i];
+          if (shape.depth % 2 === 1 && shape.parent !== -1) {
+            shapesData[shape.parent].holes.push(shape.pts2d);
+          }
+        }
+        for (let i = 0; i < shapesData.length; i++) {
+          const shapeData = shapesData[i];
+          if (shapeData.depth % 2 !== 0) continue;
+          if (ShapeUtils.area(shapeData.pts2d) < 0) {
+            shapeData.pts2d.reverse();
+          }
+          shapeData.holes.forEach((h) => {
+            if (ShapeUtils.area(h) > 0) h.reverse();
+          });
+          const allPoints = [...shapeData.pts2d];
+          shapeData.holes.forEach((h) => allPoints.push(...h));
+          const faces = ShapeUtils.triangulateShape(shapeData.pts2d, shapeData.holes);
+          const vertexOffset = positionsBuffer.length / 3;
+          for (const pt of allPoints) {
+            const p3d = planeOrigin.clone().addScaledVector(uAxis, pt.x).addScaledVector(vAxis, pt.y);
+            positionsBuffer.push(p3d.x, p3d.y, p3d.z);
+            hatchDirsBuffer.push(hatchDir);
+            fillColorsBuffer.push(fillColor.r, fillColor.g, fillColor.b);
+          }
+          for (let f = 0; f < faces.length; f++) {
+            indicesBuffer.push(vertexOffset + faces[f][0], vertexOffset + faces[f][1], vertexOffset + faces[f][2]);
+          }
+        }
+      }
+      _isPointInPoly(pt, poly) {
+        let inside = false;
+        const py = pt.y + 1.119e-7;
+        const px = pt.x;
+        for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+          if (
+            poly[i].y > py !== poly[j].y > py &&
+            px < ((poly[j].x - poly[i].x) * (py - poly[i].y)) / (poly[j].y - poly[i].y) + poly[i].x
+          ) {
+            inside = !inside;
+          }
+        }
+        return inside;
+      }
+      _isLoopInside(child, parent, localRadius) {
+        let minX1 = Infinity;
+        let maxX1 = -Infinity;
+        let minY1 = Infinity;
+        let maxY1 = -Infinity;
+        for (const p of child) {
+          if (p.x < minX1) minX1 = p.x;
+          if (p.x > maxX1) maxX1 = p.x;
+          if (p.y < minY1) minY1 = p.y;
+          if (p.y > maxY1) maxY1 = p.y;
+        }
+        let minX2 = Infinity;
+        let maxX2 = -Infinity;
+        let minY2 = Infinity;
+        let maxY2 = -Infinity;
+        for (const p of parent) {
+          if (p.x < minX2) minX2 = p.x;
+          if (p.x > maxX2) maxX2 = p.x;
+          if (p.y < minY2) minY2 = p.y;
+          if (p.y > maxY2) maxY2 = p.y;
+        }
+        const margin = Math.max(localRadius * 1e-4, 1e-5);
+        if (minX1 < minX2 - margin || maxX1 > maxX2 + margin || minY1 < minY2 - margin || maxY1 > maxY2 + margin) {
+          return false;
+        }
+        let insideCount = 0;
+        for (let i = 0; i < child.length; i++) {
+          if (this._isPointInPoly(child[i], parent)) {
+            insideCount++;
+          }
+        }
+        return insideCount >= child.length * 0.85;
+      }
+      _calculateMeshSegmentsUndirected(mesh, plane, edgeStats, grid, eps) {
+        const geom = mesh.geometry;
+        const pos = geom.attributes.position;
+        const index = geom.index;
+        const world = mesh.matrixWorld;
+        const count = index ? index.count : pos.count;
+        for (let i = 0; i < count; i += 3) {
+          const i1 = index ? index.getX(i) : i;
+          const i2 = index ? index.getX(i + 1) : i + 1;
+          const i3 = index ? index.getX(i + 2) : i + 2;
+          const v1 = this._vA.fromBufferAttribute(pos, i1).applyMatrix4(world);
+          const v2 = this._vB.fromBufferAttribute(pos, i2).applyMatrix4(world);
+          const v3 = this._vC.fromBufferAttribute(pos, i3).applyMatrix4(world);
+          let d1 = plane.distanceToPoint(v1);
+          let d2 = plane.distanceToPoint(v2);
+          let d3 = plane.distanceToPoint(v3);
+          if (Math.abs(d1) <= eps) d1 = eps;
+          if (Math.abs(d2) <= eps) d2 = eps;
+          if (Math.abs(d3) <= eps) d3 = eps;
+          const s1 = d1 > 0 ? 1 : -1;
+          const s2 = d2 > 0 ? 1 : -1;
+          const s3 = d3 > 0 ? 1 : -1;
+          if (s1 === s2 && s2 === s3) continue;
+          const intersections = [];
+          if (s1 !== s2) {
+            intersections.push(new Vector3().lerpVectors(v1, v2, Math.abs(d1) / (Math.abs(d1) + Math.abs(d2))));
+          }
+          if (s2 !== s3) {
+            intersections.push(new Vector3().lerpVectors(v2, v3, Math.abs(d2) / (Math.abs(d2) + Math.abs(d3))));
+          }
+          if (s3 !== s1) {
+            intersections.push(new Vector3().lerpVectors(v3, v1, Math.abs(d3) / (Math.abs(d3) + Math.abs(d1))));
+          }
+          if (intersections.length >= 2) {
+            const id1 = grid.add(intersections[0]);
+            const id2 = grid.add(intersections[1]);
+            if (id1 !== id2) {
+              const key = id1 < id2 ? `${id1}-${id2}` : `${id2}-${id1}`;
+              const stat = edgeStats.get(key) || { count: 0 };
+              stat.count++;
+              edgeStats.set(key, stat);
+            }
+          }
+        }
+      }
+    }
+
+    class SectionsComponent {
+        constructor(viewer) {
+            this.updateTimerId = 0;
+            this.updateDelay = 250;
+            this.syncOptions = () => {
+                function rgbToHex(c) {
+                    const hex = (v = 0) => v.toString(16).padStart(2, "0");
+                    return "#" + hex(c.r) + hex(c.g) + hex(c.b);
+                }
+                const options = this.viewer.options;
+                const flags = this.sectionsHelper.flags;
+                flags.fillEnabled = options.enableSectionFill;
+                flags.fillColor = rgbToHex(options.sectionFillColor);
+                flags.useObjFillColor = options.sectionUseObjectColor;
+                flags.hatchEnabled = options.enableSectionHatch;
+                flags.hatchColor = rgbToHex(options.sectionHatchColor);
+                flags.hatchScale = options.sectionHatchScale;
+                flags.outlineEnabled = options.enableSectionOutline;
+                flags.outlineColor = rgbToHex(options.sectionOutlineColor);
+                flags.outlineWidth = options.sectionOutlineWidth;
+                this.syncSections();
+            };
+            this.syncHelper = () => {
+                this.sectionsHelper.removeFromParent();
+                this.viewer.helpers.add(this.sectionsHelper);
+            };
+            this.syncSections = () => {
+                this.sectionsHelper.visible = false;
+                clearTimeout(this.updateTimerId);
+                this.updateTimerId = window.setTimeout(this.updateSections, this.updateDelay);
+            };
+            this.viewerResize = (event) => {
+                this.sectionsHelper.setSize(event.width, event.height);
+            };
+            this.updateSections = () => {
+                const objects = [];
+                this.viewer.models.forEach((model) => objects.push(model.getVisibleObjects()));
+                const objects2 = objects.flat();
+                this.sectionsHelper.update(objects2, this.viewer.extents, this.viewer.clippingPlanes);
+                this.sectionsHelper.visible = true;
+                this.viewer.update();
+            };
+            this.sectionsHelper = new SectionsHelper();
+            this.viewer = viewer;
+            this.viewer.addEventListener("initialize", this.syncHelper);
+            this.viewer.addEventListener("databasechunk", this.syncHelper);
+            this.viewer.addEventListener("drawviewpoint", this.syncHelper);
+            this.viewer.addEventListener("changecuttingplanes", this.syncSections);
+            this.viewer.addEventListener("explode", this.syncSections);
+            this.viewer.addEventListener("hide", this.syncSections);
+            this.viewer.addEventListener("isolate", this.syncSections);
+            this.viewer.addEventListener("show", this.syncSections);
+            this.viewer.addEventListener("showall", this.syncSections);
+            this.viewer.addEventListener("resize", this.viewerResize);
+            this.viewer.addEventListener("optionschange", this.syncOptions);
+            this.syncOptions();
+        }
+        dispose() {
+            clearTimeout(this.updateTimerId);
+            this.sectionsHelper.removeFromParent();
+            this.sectionsHelper.dispose();
+            this.viewer.removeEventListener("initialize", this.syncHelper);
+            this.viewer.removeEventListener("databasechunk", this.syncHelper);
+            this.viewer.removeEventListener("drawviewpoint", this.syncHelper);
+            this.viewer.removeEventListener("changecuttingplanes", this.syncSections);
+            this.viewer.removeEventListener("explode", this.syncSections);
+            this.viewer.removeEventListener("hide", this.syncSections);
+            this.viewer.removeEventListener("isolate", this.syncSections);
+            this.viewer.removeEventListener("show", this.syncSections);
+            this.viewer.removeEventListener("showall", this.syncSections);
+            this.viewer.removeEventListener("resize", this.viewerResize);
+            this.viewer.removeEventListener("optionschange", this.syncOptions);
+        }
+    }
+
     class WCSHelper extends Object3D {
         constructor(camera) {
             super();
+            this.type = "WCSHelper";
             this.camera = camera;
             this.size = 160;
             this.orthoCamera = new OrthographicCamera(-2, 2, 2, -2, 0, 4);
@@ -37684,11 +38804,13 @@ void main() {
             canvas.width = 64;
             canvas.height = 64;
             const context = canvas.getContext("2d");
-            context.clearRect(0, 0, 64, 64);
-            context.font = "24px Arial";
-            context.textAlign = "center";
-            context.fillStyle = color.getStyle();
-            context.fillText(text, 32, 41);
+            if (context) {
+                context.clearRect(0, 0, 64, 64);
+                context.font = "24px Arial";
+                context.textAlign = "center";
+                context.fillStyle = color.getStyle();
+                context.fillText(text, 32, 41);
+            }
             const texture = new CanvasTexture(canvas);
             texture.colorSpace = SRGBColorSpace;
             return new SpriteMaterial({ map: texture, toneMapped: false });
@@ -37712,7 +38834,7 @@ void main() {
 
     class WCSHelperComponent {
         constructor(viewer) {
-            this.geometryEnd = () => {
+            this.syncHelper = () => {
                 this.wcsHelper.dispose();
                 this.wcsHelper = new WCSHelper(this.viewer.camera);
             };
@@ -37726,14 +38848,14 @@ void main() {
             };
             this.wcsHelper = new WCSHelper(viewer.camera);
             this.viewer = viewer;
-            this.viewer.addEventListener("databasechunk", this.geometryEnd);
-            this.viewer.addEventListener("drawviewpoint", this.geometryEnd);
+            this.viewer.addEventListener("databasechunk", this.syncHelper);
+            this.viewer.addEventListener("drawviewpoint", this.syncHelper);
             this.viewer.addEventListener("render", this.viewerRender);
             this.viewer.addEventListener("changecameramode", this.updateHelperCamera);
         }
         dispose() {
-            this.viewer.removeEventListener("databasechunk", this.geometryEnd);
-            this.viewer.removeEventListener("drawviewpoint", this.geometryEnd);
+            this.viewer.removeEventListener("databasechunk", this.syncHelper);
+            this.viewer.removeEventListener("drawviewpoint", this.syncHelper);
             this.viewer.removeEventListener("render", this.viewerRender);
             this.viewer.removeEventListener("changecameramode", this.updateHelperCamera);
             this.wcsHelper.dispose();
@@ -37779,11 +38901,14 @@ void main() {
     components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
     components.registerComponent("HighlighterComponent", (viewer) => new HighlighterComponent(viewer));
     components.registerComponent("SelectionComponent", (viewer) => new SelectionComponent(viewer));
+    components.registerComponent("ClippingPlaneComponent", (viewer) => new ClippingPlaneComponent(viewer));
+    components.registerComponent("SectionsComponent", (viewer) => new SectionsComponent(viewer));
     components.registerComponent("WCSHelperComponent", (viewer) => new WCSHelperComponent(viewer));
     components.registerComponent("ResetComponent", (viewer) => new ResetComponent(viewer));
 
     class ModelImpl {
         constructor(scene) {
+            this.id = "";
             this.scene = scene;
             this.handleToObjects = new Map();
             this.originalObjects = new Set();
@@ -37814,8 +38939,8 @@ void main() {
                 if (object.material)
                     disposeMaterials(object.material);
             }
-            this.handleToObjects = undefined;
-            this.originalObjects = undefined;
+            this.handleToObjects.clear();
+            this.originalObjects.clear();
             this.scene.traverse(disposeObject);
             this.scene.clear();
         }
@@ -37959,7 +39084,25 @@ void main() {
             return info;
         }
         getExtents(target) {
-            this.scene.traverseVisible((object) => target.expandByObject(object));
+            const _box = new Box3();
+            function expandByObject(object, target) {
+                if (!object.geometry)
+                    return;
+                object.updateWorldMatrix(false, false);
+                if (object.boundingBox !== undefined) {
+                    if (object.boundingBox === null)
+                        object.computeBoundingBox();
+                    _box.copy(object.boundingBox);
+                }
+                else {
+                    if (object.geometry.boundingBox === null)
+                        object.geometry.computeBoundingBox();
+                    _box.copy(object.geometry.boundingBox);
+                }
+                _box.applyMatrix4(object.matrixWorld);
+                target.union(_box);
+            }
+            this.scene.traverseVisible((object) => expandByObject(object, target));
             return target;
         }
         getObjects() {
@@ -37967,8 +39110,8 @@ void main() {
         }
         getVisibleObjects() {
             const objects = [];
-            this.scene.traverseVisible((object) => objects.push(object));
-            return objects.filter((object) => object.userData.handle);
+            this.scene.traverseVisible((object) => object.userData.handle && objects.push(object));
+            return objects;
         }
         getObjectsByHandles(handles) {
             if (!Array.isArray(handles))
@@ -38063,44 +39206,54 @@ void main() {
                 centersCache.set(handle, target.clone());
                 return target;
             };
-            function calcExplodeDepth(object, depth) {
-                let result = depth;
-                object.children.forEach((x) => {
-                    const objectDepth = calcExplodeDepth(x, depth + 1);
-                    if (result < objectDepth)
-                        result = objectDepth;
-                });
+            const calcObjectOffset = (object, target) => {
+                const parent = object.parent;
+                if (!parent || parent.userData.originalCenter === undefined)
+                    return target;
+                return target.subVectors(object.userData.originalCenter, parent.userData.originalCenter);
+            };
+            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;
-            }
+                object.userData.originalOffset = calcObjectOffset(object, new Vector3());
+                return depth;
+            };
             const explodeScale = scale / 100;
             const explodeRoot = this.scene;
-            if (!explodeRoot.userData.explodeDepth) {
-                explodeRoot.userData.explodeDepth = calcExplodeDepth(explodeRoot, 1);
+            const explodeObjects = this.getObjects();
+            if (explodeRoot.userData.explodeDepth === undefined) {
+                let maxDepth = 0;
+                explodeObjects.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;
-            function explodeObject(object, depth) {
+            const explodeObject = (object) => {
                 if (object.isCamera)
                     return;
-                if (object.userData.isHighlightWireframe)
-                    return;
                 object.position.copy(object.userData.originalPosition);
+                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 objectCenter = object.userData.originalCenter;
-                    const localOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
-                    object.position.add(localOffset);
+                    object.position.addScaledVector(object.userData.originalOffset, objectScale);
                 }
-                object.children.forEach((x) => explodeObject(x, depth + 1));
-            }
-            explodeObject(explodeRoot, 0);
+            };
+            explodeObjects.forEach((object) => {
+                explodeObject(object);
+            });
             this.scene.updateMatrixWorld();
             return this;
         }
@@ -38203,6 +39356,12 @@ void main() {
                 centersCache.set(handle, target.clone());
                 return target;
             };
+            const calcObjectOffset = (object, target) => {
+                const parent = object.parent;
+                if (!parent || parent.userData.originalCenter === undefined)
+                    return target;
+                return target.subVectors(object.userData.originalCenter, parent.userData.originalCenter);
+            };
             const calcObjectDepth = (object) => {
                 if (object.userData.depth !== undefined)
                     return object.userData.depth;
@@ -38211,13 +39370,15 @@ void main() {
                 object.userData.depth = depth;
                 object.userData.originalPosition = object.position.clone();
                 object.userData.originalCenter = calcObjectCenter(object, new Vector3());
+                object.userData.originalOffset = calcObjectOffset(object, new Vector3());
                 return depth;
             };
             const explodeScale = scale / 100;
             const explodeRoot = this.scene.children[0];
-            if (!explodeRoot.userData.explodeDepth) {
+            const explodeObjects = this.getObjects();
+            if (explodeRoot.userData.explodeDepth === undefined) {
                 let maxDepth = 0;
-                this.gltfLoader.originalObjects.forEach((object) => {
+                explodeObjects.forEach((object) => {
                     const depth = calcObjectDepth(object);
                     if (depth > maxDepth)
                         maxDepth = depth;
@@ -38229,29 +39390,26 @@ void main() {
             const explodeDepth = 0 | scaledExplodeDepth;
             const currentSegmentFraction = scaledExplodeDepth - explodeDepth;
             const offsetCache = new Map();
-            const calcObjectOffset = (object, target) => {
+            const calcExplodeOffset = (object, target) => {
                 if (offsetCache.has(object))
                     return target.copy(offsetCache.get(object));
                 const parent = object.parent;
                 if (parent && object !== explodeRoot)
-                    calcObjectOffset(parent, target);
+                    calcExplodeOffset(parent, target);
                 const depth = object.userData.depth;
                 if (depth > 0 && depth <= explodeDepth) {
                     let objectScale = explodeScale * coeff;
                     if (depth === explodeDepth)
                         objectScale *= currentSegmentFraction;
-                    const parentCenter = parent.userData.originalCenter;
-                    const objectCenter = object.userData.originalCenter;
-                    const localOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
-                    target.add(localOffset);
+                    target.addScaledVector(object.userData.originalOffset, objectScale);
                 }
                 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));
+            explodeObjects.forEach((object) => {
+                const offset = calcExplodeOffset(object, new Vector3());
+                transformMap.set(object, new Matrix4().makeTranslation(offset));
             });
             this.gltfLoader.applyObjectTransforms(transformMap);
             this.scene.updateMatrixWorld();
@@ -38322,6 +39480,7 @@ void main() {
         this._nextObjectId = 1;
         this.loadingAborted = false;
         this.criticalError = null;
+        this.embeddedBinaryChunk = null;
       }
       async initialize(loader) {
         const json = await this.loadController.loadJson();
@@ -38330,28 +39489,72 @@ void main() {
         }
         this.json = json;
         this.loader = loader;
-        this.uri = this.json.buffers[0].uri || "";
+        const bufferUri = this.json.buffers?.[0]?.uri || "";
+        if (bufferUri.startsWith("data:")) {
+          this.embeddedBinaryChunk = await this._decodeDataUri(bufferUri);
+          this.uri = "";
+        } else {
+          this.uri = bufferUri;
+        }
+      }
+      async _decodeDataUri(dataUri) {
+        try {
+          const response = await fetch(dataUri);
+          return await response.arrayBuffer();
+        } catch (e) {
+          throw new Error(`DynamicLoader: Failed to decode embedded data URI: ${e.message}`);
+        }
       }
       clear() {
-        this.json = null;
-        this.loadController = null;
-        this.pendingRequests = [];
         if (this.batchTimeout) {
           clearTimeout(this.batchTimeout);
           this.batchTimeout = null;
         }
-        this.disposeMaterials();
-        this.textureCache.clear();
-        this.materials.clear();
+        this._rejectPendingRequests();
+        if (this.disposeMaterials) {
+          try {
+            this.disposeMaterials();
+          } catch (e) {
+            console.warn("DynamicLoader: error during disposeMaterials in clear():", e);
+          }
+        }
+        if (this.textureCache) this.textureCache.clear();
+        if (this.materials) this.materials.clear();
+        this.embeddedBinaryChunk = null;
+        this.json = null;
+        this.loadController = null;
+        this.uri = "";
         this.activeChunkLoads = 0;
         this.chunkQueue = [];
         this.loadingAborted = false;
         this.criticalError = null;
       }
+      _rejectPendingRequests() {
+        const pending = this.pendingRequests;
+        this.pendingRequests = [];
+        if (!pending || pending.length === 0) return;
+        const cancelError = new Error("DynamicLoader: Structure cleared while requests pending");
+        for (let i = 0; i < pending.length; i++) {
+          const item = pending[i];
+          if (item && typeof item._reject === "function") {
+            try {
+              item._reject(cancelError);
+            } catch {
+            }
+          }
+        }
+      }
       getJson() {
         return this.json;
       }
       scheduleRequest(request) {
+        if (this.embeddedBinaryChunk && !this.uri) {
+          return Promise.resolve({
+            buffer: this.embeddedBinaryChunk,
+            relOffset: request.offset,
+            length: request.length,
+          });
+        }
         return new Promise((resolve, reject) => {
           if (this.loadingAborted) {
             reject(
@@ -38628,8 +39831,13 @@ void main() {
               return await this.textureLoader.loadAsync(fullUrl);
             } else if (image.bufferView !== undefined) {
               const bufferView = this.json.bufferViews[image.bufferView];
-              const array = await this.getBufferView(bufferView.byteOffset || 0, bufferView.byteLength, 5121);
-              const blob = new Blob([array], { type: image.mimeType });
+              const { buffer, relOffset } = await this.getBufferView(
+                bufferView.byteOffset || 0,
+                bufferView.byteLength,
+                5121
+              );
+              const imageBytes = new Uint8Array(buffer, relOffset, bufferView.byteLength);
+              const blob = new Blob([imageBytes], { type: image.mimeType });
               const url = URL.createObjectURL(blob);
               const texture = await this.textureLoader.loadAsync(url);
               URL.revokeObjectURL(url);
@@ -38659,6 +39867,7 @@ void main() {
             })
           );
         }
+        await this.flushBufferRequests();
         await Promise.all(texturePromises);
       }
       loadMaterials() {
@@ -39016,6 +40225,7 @@ void main() {
     	return result;
     }
 
+    const DRACO_EXTENSION_NAME = "KHR_draco_mesh_compression";
     const STRUCTURE_ID_SEPARATOR = ":";
     class DynamicGltfLoader {
       constructor(camera, scene, renderer) {
@@ -39090,6 +40300,189 @@ void main() {
         this.transformData = null;
         this.identityTransformData = null;
         this.visibilityMaterials = new Set();
+        this._dracoLoader = null;
+      }
+      setDracoLoader(loader = null) {
+        this._dracoLoader = loader || null;
+      }
+      async _decodeDracoPrimitive(structure, primitive, dracoBufferData) {
+        const dracoExt = primitive.extensions[DRACO_EXTENSION_NAME];
+        const loader = this._dracoLoader;
+        const attributeIDs = {};
+        const attributeTypes = {};
+        const gltfNameToThreeName = new Map();
+        const threeNameToAccessor = new Map();
+        for (const [gltfAttrName, dracoUniqueId] of Object.entries(dracoExt.attributes)) {
+          const threeName = this._gltfAttributeNameToThreeName(gltfAttrName);
+          attributeIDs[threeName] = dracoUniqueId;
+          gltfNameToThreeName.set(gltfAttrName, threeName);
+          const accessorIdx = primitive.attributes[gltfAttrName];
+          if (accessorIdx !== undefined) {
+            const accessor = structure.json.accessors[accessorIdx];
+            attributeTypes[threeName] = this._gltfComponentTypeToTypedArrayName(accessor.componentType);
+            threeNameToAccessor.set(threeName, accessor);
+          }
+        }
+        const geometry = await loader.decodeGeometry(dracoBufferData, {
+          attributeIDs,
+          attributeTypes,
+          useUniqueIDs: true,
+        });
+        for (const [threeName, accessor] of threeNameToAccessor) {
+          const attribute = geometry.getAttribute(threeName);
+          if (!attribute) continue;
+          if (accessor.normalized === true) {
+            attribute.normalized = true;
+          }
+          if (accessor.min) attribute.min = accessor.min;
+          if (accessor.max) attribute.max = accessor.max;
+        }
+        for (const [threeName, accessor] of threeNameToAccessor) {
+          const attribute = geometry.getAttribute(threeName);
+          if (!attribute || !attribute.normalized) continue;
+          const denom = this._normalizedDenominator(accessor.componentType);
+          if (denom <= 0) continue;
+          const src = attribute.array;
+          const inv = 1 / denom;
+          const isSigned = accessor.componentType === 5120 || accessor.componentType === 5122;
+          const out = new Float32Array(src.length);
+          for (let i = 0; i < src.length; i++) {
+            let v = src[i] * inv;
+            if (isSigned && v < -1) v = -1;
+            out[i] = v;
+          }
+          const newAttr = new BufferAttribute(out, attribute.itemSize, false);
+          if (accessor.min) newAttr.min = accessor.min;
+          if (accessor.max) newAttr.max = accessor.max;
+          geometry.setAttribute(threeName, newAttr);
+        }
+        return geometry;
+      }
+      _gltfComponentTypeToTypedArrayName(componentType) {
+        switch (componentType) {
+          case 5120:
+            return "Int8Array";
+          case 5121:
+            return "Uint8Array";
+          case 5122:
+            return "Int16Array";
+          case 5123:
+            return "Uint16Array";
+          case 5125:
+            return "Uint32Array";
+          case 5126:
+            return "Float32Array";
+          default:
+            return "Float32Array";
+        }
+      }
+      _normalizedDenominator(componentType) {
+        switch (componentType) {
+          case 5120:
+            return 127;
+          case 5121:
+            return 255;
+          case 5122:
+            return 32767;
+          case 5123:
+            return 65535;
+          default:
+            return 0;
+        }
+      }
+      _gltfAttributeNameToThreeName(name) {
+        switch (name) {
+          case "POSITION":
+            return "position";
+          case "NORMAL":
+            return "normal";
+          case "TANGENT":
+            return "tangent";
+          case "TEXCOORD_0":
+            return "uv";
+          case "TEXCOORD_1":
+            return "uv2";
+          case "COLOR_0":
+            return "color";
+          case "JOINTS_0":
+            return "skinIndex";
+          case "WEIGHTS_0":
+            return "skinWeight";
+          default:
+            return name.toLowerCase();
+        }
+      }
+      _buildAccessorRequest(structure, accessorIndex, type, primIdx) {
+        const accessor = structure.json.accessors[accessorIndex];
+        const bufferView = structure.json.bufferViews[accessor.bufferView];
+        const components = structure.getNumComponents(accessor.type);
+        const componentSize = structure.getComponentSize(accessor.componentType);
+        const itemBytes = components * componentSize;
+        const accessorByteOffset = accessor.byteOffset || 0;
+        const bvByteOffset = bufferView.byteOffset || 0;
+        const byteStride = bufferView.byteStride || 0;
+        const interleaved = byteStride !== 0 && byteStride !== itemBytes;
+        const offset = bvByteOffset + accessorByteOffset;
+        let length;
+        if (interleaved) {
+          length = (accessor.count - 1) * byteStride + itemBytes;
+        } else {
+          length = accessor.count * itemBytes;
+        }
+        return {
+          offset,
+          length,
+          componentType: accessor.componentType,
+          accessorIndex,
+          type,
+          primIdx,
+          _accessor: accessor,
+          _components: components,
+          _componentSize: componentSize,
+          _itemBytes: itemBytes,
+          _byteStride: byteStride,
+          _interleaved: interleaved,
+        };
+      }
+      _createGeometryAttribute(req) {
+        const accessor = req._accessor;
+        const components = req._components;
+        const count = accessor.count;
+        const stride = req._interleaved ? req._byteStride / req._componentSize : components;
+        const normalized = accessor.normalized === true;
+        const componentType = req.componentType;
+        const src = req.data;
+        if (!req._interleaved && !normalized) {
+          return new BufferAttribute(src, components, false);
+        }
+        if (normalized) {
+          const denom = this._normalizedDenominator(componentType);
+          if (denom > 0) {
+            const out = new Float32Array(count * components);
+            const inv = 1 / denom;
+            const isSignedNormalized = componentType === 5120 || componentType === 5122;
+            for (let i = 0; i < count; i++) {
+              const srcBase = i * stride;
+              const dstBase = i * components;
+              for (let c = 0; c < components; c++) {
+                let v = src[srcBase + c] * inv;
+                if (isSignedNormalized && v < -1) v = -1;
+                out[dstBase + c] = v;
+              }
+            }
+            return new BufferAttribute(out, components, false);
+          }
+        }
+        const TypedArrayCtor = src.constructor;
+        const out = new TypedArrayCtor(count * components);
+        for (let i = 0; i < count; i++) {
+          const srcBase = i * stride;
+          const dstBase = i * components;
+          for (let c = 0; c < components; c++) {
+            out[dstBase + c] = src[srcBase + c];
+          }
+        }
+        return new BufferAttribute(out, components, false);
       }
       createDummyTexture() {
         const data = new Float32Array(16);
@@ -39161,7 +40554,7 @@ void main() {
         if (!this.transformTexture) return;
         this.transformTexture.needsUpdate = true;
       }
-      setVisibleEdges(visible) {
+      setVisibleEdges(visible = true) {
         this.visibleEdges = visible;
       }
       getAvailableMemory() {
@@ -39415,78 +40808,51 @@ void main() {
         node.loading = true;
         const meshDef = node.structure.getJson().meshes[node.meshIndex];
         try {
+          if (
+            !this._dracoLoader &&
+            meshDef.primitives &&
+            meshDef.primitives.some((p) => p.extensions && p.extensions[DRACO_EXTENSION_NAME])
+          ) {
+            throw new Error(
+              "primitive uses KHR_draco_mesh_compression but no DRACOLoader is configured. " +
+                "Inject one via dynamicLoader.setDracoLoader(new DRACOLoader()) before opening the file."
+            );
+          }
           const bufferRequests = [];
           const primitiveReqMap = new Map();
+          const dracoPrimitives = new Map();
           for (let primIdx = 0; primIdx < meshDef.primitives.length; primIdx++) {
             const primitive = meshDef.primitives[primIdx];
             const reqs = [];
-            if (primitive.attributes.POSITION !== undefined) {
-              const accessorIndex = primitive.attributes.POSITION;
-              const accessor = node.structure.json.accessors[accessorIndex];
-              const bufferView = node.structure.json.bufferViews[accessor.bufferView];
-              const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
-              const components = node.structure.getNumComponents(accessor.type);
-              const count = accessor.count;
-              const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
-              reqs.push({
+            const dracoExt = primitive.extensions && primitive.extensions[DRACO_EXTENSION_NAME];
+            if (dracoExt) {
+              const bufferView = node.structure.json.bufferViews[dracoExt.bufferView];
+              const byteOffset = bufferView.byteOffset || 0;
+              const byteLength = bufferView.byteLength;
+              const dracoReq = {
                 offset: byteOffset,
                 length: byteLength,
-                componentType: accessor.componentType,
-                accessorIndex,
-                type: "position",
+                componentType: 5121,
+                type: "draco",
                 primIdx,
-              });
+              };
+              reqs.push(dracoReq);
+              dracoPrimitives.set(primIdx, { req: dracoReq, primitive });
+              primitiveReqMap.set(primIdx, reqs);
+              bufferRequests.push(...reqs);
+              continue;
+            }
+            if (primitive.attributes.POSITION !== undefined) {
+              reqs.push(this._buildAccessorRequest(node.structure, primitive.attributes.POSITION, "position", primIdx));
             }
             if (primitive.attributes.NORMAL !== undefined) {
-              const accessorIndex = primitive.attributes.NORMAL;
-              const accessor = node.structure.json.accessors[accessorIndex];
-              const bufferView = node.structure.json.bufferViews[accessor.bufferView];
-              const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
-              const components = node.structure.getNumComponents(accessor.type);
-              const count = accessor.count;
-              const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
-              reqs.push({
-                offset: byteOffset,
-                length: byteLength,
-                componentType: accessor.componentType,
-                accessorIndex,
-                type: "normal",
-                primIdx,
-              });
+              reqs.push(this._buildAccessorRequest(node.structure, primitive.attributes.NORMAL, "normal", primIdx));
             }
             if (primitive.attributes.TEXCOORD_0 !== undefined) {
-              const accessorIndex = primitive.attributes.TEXCOORD_0;
-              const accessor = node.structure.json.accessors[accessorIndex];
-              const bufferView = node.structure.json.bufferViews[accessor.bufferView];
-              const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
-              const components = node.structure.getNumComponents(accessor.type);
-              const count = accessor.count;
-              const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
-              reqs.push({
-                offset: byteOffset,
-                length: byteLength,
-                componentType: accessor.componentType,
-                accessorIndex,
-                type: "uv",
-                primIdx,
-              });
+              reqs.push(this._buildAccessorRequest(node.structure, primitive.attributes.TEXCOORD_0, "uv", primIdx));
             }
             if (primitive.indices !== undefined) {
-              const accessorIndex = primitive.indices;
-              const accessor = node.structure.json.accessors[accessorIndex];
-              const bufferView = node.structure.json.bufferViews[accessor.bufferView];
-              const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
-              const components = node.structure.getNumComponents(accessor.type);
-              const count = accessor.count;
-              const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
-              reqs.push({
-                offset: byteOffset,
-                length: byteLength,
-                componentType: accessor.componentType,
-                accessorIndex,
-                type: "index",
-                primIdx,
-              });
+              reqs.push(this._buildAccessorRequest(node.structure, primitive.indices, "index", primIdx));
             }
             primitiveReqMap.set(primIdx, reqs);
             bufferRequests.push(...reqs);
@@ -39512,29 +40878,31 @@ void main() {
           }
           for (let primIdx = 0; primIdx < meshDef.primitives.length; primIdx++) {
             const primitive = meshDef.primitives[primIdx];
-            const geometry = new BufferGeometry();
             const reqs = primitiveReqMap.get(primIdx);
-            if (primitive.attributes.POSITION !== undefined) {
-              const req = reqs.find((r) => r.type === "position" && r.accessorIndex === primitive.attributes.POSITION);
-              const accessor = node.structure.json.accessors[primitive.attributes.POSITION];
-              const components = node.structure.getNumComponents(accessor.type);
-              geometry.setAttribute("position", new BufferAttribute(req.data, components));
-            }
-            if (primitive.attributes.NORMAL !== undefined) {
-              const req = reqs.find((r) => r.type === "normal" && r.accessorIndex === primitive.attributes.NORMAL);
-              const accessor = node.structure.json.accessors[primitive.attributes.NORMAL];
-              const components = node.structure.getNumComponents(accessor.type);
-              geometry.setAttribute("normal", new BufferAttribute(req.data, components));
-            }
-            if (primitive.attributes.TEXCOORD_0 !== undefined) {
-              const req = reqs.find((r) => r.type === "uv" && r.accessorIndex === primitive.attributes.TEXCOORD_0);
-              const accessor = node.structure.json.accessors[primitive.attributes.TEXCOORD_0];
-              const components = node.structure.getNumComponents(accessor.type);
-              geometry.setAttribute("uv", new BufferAttribute(req.data, components));
-            }
-            if (primitive.indices !== undefined) {
-              const req = reqs.find((r) => r.type === "index" && r.accessorIndex === primitive.indices);
-              geometry.setIndex(new BufferAttribute(req.data, 1));
+            let geometry;
+            if (dracoPrimitives.has(primIdx)) {
+              const dracoReq = reqs.find((r) => r.type === "draco");
+              const dracoBytes = new Uint8Array(dracoReq.data.buffer, dracoReq.data.byteOffset, dracoReq.data.byteLength);
+              const dracoBuffer = dracoBytes.slice().buffer;
+              geometry = await this._decodeDracoPrimitive(node.structure, primitive, dracoBuffer);
+            } else {
+              geometry = new BufferGeometry();
+              if (primitive.attributes.POSITION !== undefined) {
+                const req = reqs.find((r) => r.type === "position" && r.accessorIndex === primitive.attributes.POSITION);
+                geometry.setAttribute("position", this._createGeometryAttribute(req));
+              }
+              if (primitive.attributes.NORMAL !== undefined) {
+                const req = reqs.find((r) => r.type === "normal" && r.accessorIndex === primitive.attributes.NORMAL);
+                geometry.setAttribute("normal", this._createGeometryAttribute(req));
+              }
+              if (primitive.attributes.TEXCOORD_0 !== undefined) {
+                const req = reqs.find((r) => r.type === "uv" && r.accessorIndex === primitive.attributes.TEXCOORD_0);
+                geometry.setAttribute("uv", this._createGeometryAttribute(req));
+              }
+              if (primitive.indices !== undefined) {
+                const req = reqs.find((r) => r.type === "index" && r.accessorIndex === primitive.indices);
+                geometry.setIndex(this._createGeometryAttribute(req));
+              }
             }
             let material;
             if (primitive.material !== undefined) {
@@ -39773,20 +41141,43 @@ void main() {
           const nodeMatrix = new Matrix4();
           const uniqueNodeId = `${structure.id}_${nodeId}`;
           const meshDef = structure.json.meshes[nodeDef.mesh];
+          if (!meshDef || !meshDef.primitives || meshDef.primitives.length === 0) {
+            if (nodeDef.children) {
+              for (const childId of nodeDef.children) {
+                await this.processNodeHierarchy(structure, childId, nodeGroup || parentGroup);
+              }
+            }
+            return nodeGroup;
+          }
           const geometryExtents = new Box3();
           for (const primitive of meshDef.primitives) {
+            if (!primitive.attributes) continue;
             const positionAccessor = structure.json.accessors[primitive.attributes.POSITION];
             if (positionAccessor && positionAccessor.min && positionAccessor.max) {
-              const primitiveBox = new Box3(
-                new Vector3().fromArray(positionAccessor.min),
-                new Vector3().fromArray(positionAccessor.max)
-              );
-              geometryExtents.union(primitiveBox);
+              const minVec = new Vector3().fromArray(positionAccessor.min);
+              const maxVec = new Vector3().fromArray(positionAccessor.max);
+              if (positionAccessor.normalized === true) {
+                const denom = this._normalizedDenominator(positionAccessor.componentType);
+                if (denom > 0) {
+                  minVec.divideScalar(denom);
+                  maxVec.divideScalar(denom);
+                  if (positionAccessor.componentType === 5120 || positionAccessor.componentType === 5122) {
+                    minVec.x = Math.max(minVec.x, -1);
+                    minVec.y = Math.max(minVec.y, -1);
+                    minVec.z = Math.max(minVec.z, -1);
+                    maxVec.x = Math.max(maxVec.x, -1);
+                    maxVec.y = Math.max(maxVec.y, -1);
+                    maxVec.z = Math.max(maxVec.z, -1);
+                  }
+                }
+              }
+              geometryExtents.union(new Box3(minVec, maxVec));
             }
           }
           let isEdge = false;
-          if (meshDef.primitives[0].material !== undefined) {
-            const material = structure.json.materials[meshDef.primitives[0].material];
+          const firstPrimitive = meshDef.primitives[0];
+          if (firstPrimitive && firstPrimitive.material !== undefined) {
+            const material = structure.json.materials[firstPrimitive.material];
             if (material?.name === "edges") {
               isEdge = true;
             }
@@ -40099,6 +41490,10 @@ void main() {
             vec3 objectNormal = vec3( normal );
             mat3 bm = mat3( batchingMatrix );
             objectNormal = bm * objectNormal;
+            #ifdef USE_TANGENT
+                vec3 objectTangent = vec3( tangent.xyz );
+                objectTangent = bm * objectTangent;
+            #endif
             `
             );
           }
@@ -41271,7 +42666,7 @@ void main() {
         }
         return extent;
       }
-      setMaxConcurrentChunks(maxChunks) {
+      setMaxConcurrentChunks(maxChunks = 6) {
         if (maxChunks < 1) {
           console.warn("Max concurrent chunks must be at least 1");
           return;
@@ -41373,10 +42768,10 @@ void main() {
                 }
                 offset += chunkLength;
             }
-            if (typeof this.content === "undefined") {
+            if (this.content === undefined) {
                 throw new Error("GLTFBinaryParser: JSON content not found.");
             }
-            if (typeof this.body === "undefined") {
+            if (this.body === undefined) {
                 throw new Error("GLTFBinaryParser: Binary buffer chunk not found or type not supported.");
             }
         }
@@ -42702,16 +44097,18 @@ void main() {
             if (this.manager)
                 this.manager.dispose();
         }
-        isSupport(file, format) {
+        isSupport(file, format = "") {
             return ((typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
                 /(gltf|glb)$/i.test(format));
         }
-        async load(file, format, params) {
+        async load(file, format, params = {}) {
             this.manager = new GLTFLoadingManager(file, params);
             const scene = new Group$1();
             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;
+            this.gltfLoader.setMemoryLimit(this.viewer.options.memoryLimit);
+            this.gltfLoader.setVisibleEdges(this.viewer.options.edgeModel);
+            this.gltfLoader.setMaxConcurrentChunks(params.maxConcurrentChunks);
+            this.gltfLoader.setDracoLoader(params.dracoLoader);
             const modelImpl = new DynamicModelImpl(scene);
             modelImpl.id = params.modelId || this.extractFileName(file);
             modelImpl.gltfLoader = this.gltfLoader;
@@ -42798,8 +44195,10 @@ void main() {
         async load(model, format, params = {}) {
             const scene = new Group$1();
             this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
-            this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
+            this.gltfLoader.setMemoryLimit(this.viewer.options.memoryLimit);
             this.gltfLoader.setVisibleEdges(this.viewer.options.edgeModel);
+            this.gltfLoader.setMaxConcurrentChunks(params.maxConcurrentChunks);
+            this.gltfLoader.setDracoLoader(params.dracoLoader);
             const modelImpl = new DynamicModelImpl(scene);
             modelImpl.id = model.file.id;
             modelImpl.gltfLoader = this.gltfLoader;
@@ -44015,186 +45414,133 @@ void main() {
     }
 
     class SSAARenderPass extends Pass {
-      constructor(scenes, camera, clearColor = 0x000000, clearAlpha = 0) {
-        super();
-        this.scenes = Array.isArray(scenes) ? scenes : [scenes];
-        this.camera = camera;
-        this.sampleLevel = 2;
-        this.unbiased = true;
-        this.stencilBuffer = false;
-        this.clearColor = clearColor;
-        this.clearAlpha = clearAlpha;
-        this._sampleRenderTarget = null;
-        this._oldClearColor = new Color();
-        this._copyUniforms = UniformsUtils.clone(CopyShader.uniforms);
-        this._copyMaterial = new ShaderMaterial({
-          uniforms: this._copyUniforms,
-          vertexShader: CopyShader.vertexShader,
-          fragmentShader: CopyShader.fragmentShader,
-          transparent: true,
-          depthTest: false,
-          depthWrite: false,
-          premultipliedAlpha: true,
-          blending: AdditiveBlending,
-        });
-        this._fsQuad = new FullScreenQuad(this._copyMaterial);
-      }
-      dispose() {
-        if (this._sampleRenderTarget) {
-          this._sampleRenderTarget.dispose();
-          this._sampleRenderTarget = null;
-        }
-        this._copyMaterial.dispose();
-        this._fsQuad.dispose();
-      }
-      setSize(width, height) {
-        if (this._sampleRenderTarget) this._sampleRenderTarget.setSize(width, height);
-      }
-      render(renderer, writeBuffer, readBuffer, deltaTime, maskActive) {
-        if (!this._sampleRenderTarget) {
-          this._sampleRenderTarget = new WebGLRenderTarget(readBuffer.width, readBuffer.height, {
-            type: HalfFloatType,
-            stencilBuffer: this.stencilBuffer,
-          });
-          this._sampleRenderTarget.texture.name = "SSAAMultiRenderPass.sample";
-        }
-        const jitterOffsets = _JitterVectors[Math.max(0, Math.min(this.sampleLevel, 5))];
-        const autoClear = renderer.autoClear;
-        renderer.autoClear = false;
-        renderer.getClearColor(this._oldClearColor);
-        const oldClearAlpha = renderer.getClearAlpha();
-        const baseSampleWeight = 1.0 / jitterOffsets.length;
-        const roundingRange = 1 / 32;
-        this._copyUniforms["tDiffuse"].value = this._sampleRenderTarget.texture;
-        const viewOffset = {
-          fullWidth: readBuffer.width,
-          fullHeight: readBuffer.height,
-          offsetX: 0,
-          offsetY: 0,
-          width: readBuffer.width,
-          height: readBuffer.height,
-        };
-        const originalViewOffset = Object.assign({}, this.camera.view);
-        if (originalViewOffset.enabled) Object.assign(viewOffset, originalViewOffset);
-        for (let i = 0; i < jitterOffsets.length; i++) {
-          const jitterOffset = jitterOffsets[i];
-          if (this.camera.setViewOffset) {
-            this.camera.setViewOffset(
-              viewOffset.fullWidth,
-              viewOffset.fullHeight,
-              viewOffset.offsetX + jitterOffset[0] * 0.0625,
-              viewOffset.offsetY + jitterOffset[1] * 0.0625,
-              viewOffset.width,
-              viewOffset.height
-            );
-          }
-          let sampleWeight = baseSampleWeight;
-          if (this.unbiased) {
-            const uniformCenteredDistribution = -0.5 + (i + 0.5) / jitterOffsets.length;
-            sampleWeight += roundingRange * uniformCenteredDistribution;
-          }
-          this._copyUniforms["opacity"].value = sampleWeight;
-          renderer.setClearColor(this.clearColor, this.clearAlpha);
-          renderer.setRenderTarget(this._sampleRenderTarget);
-          renderer.clear();
-          this.scenes.forEach((scene) => renderer.render(scene, this.camera));
-          renderer.setRenderTarget(this.renderToScreen ? null : writeBuffer);
-          if (i === 0) {
-            renderer.setClearColor(0x000000, 0.0);
-            renderer.clear();
-          }
-          this._fsQuad.render(renderer);
-        }
-        if (this.camera.setViewOffset && originalViewOffset.enabled) {
-          this.camera.setViewOffset(
-            originalViewOffset.fullWidth,
-            originalViewOffset.fullHeight,
-            originalViewOffset.offsetX,
-            originalViewOffset.offsetY,
-            originalViewOffset.width,
-            originalViewOffset.height
-          );
-        } else if (this.camera.clearViewOffset) {
-          this.camera.clearViewOffset();
-        }
-        renderer.autoClear = autoClear;
-        renderer.setClearColor(this._oldClearColor, oldClearAlpha);
-      }
+    	constructor( scene, camera, clearColor = 0x000000, clearAlpha = 0 ) {
+    		super();
+    		this.scene = scene;
+    		this.camera = camera;
+    		this.sampleLevel = 4;
+    		this.unbiased = true;
+    		this.stencilBuffer = false;
+    		this.clearColor = clearColor;
+    		this.clearAlpha = clearAlpha;
+    		this._sampleRenderTarget = null;
+    		this._oldClearColor = new Color();
+    		this._copyUniforms = UniformsUtils.clone( CopyShader.uniforms );
+    		this._copyMaterial = new ShaderMaterial(	{
+    			uniforms: this._copyUniforms,
+    			vertexShader: CopyShader.vertexShader,
+    			fragmentShader: CopyShader.fragmentShader,
+    			transparent: true,
+    			depthTest: false,
+    			depthWrite: false,
+    			premultipliedAlpha: true,
+    			blending: AdditiveBlending
+    		} );
+    		this._fsQuad = new FullScreenQuad( this._copyMaterial );
+    	}
+    	dispose() {
+    		if ( this._sampleRenderTarget ) {
+    			this._sampleRenderTarget.dispose();
+    			this._sampleRenderTarget = null;
+    		}
+    		this._copyMaterial.dispose();
+    		this._fsQuad.dispose();
+    	}
+    	setSize( width, height ) {
+    		if ( this._sampleRenderTarget )	this._sampleRenderTarget.setSize( width, height );
+    	}
+    	render( renderer, writeBuffer, readBuffer ) {
+    		if ( ! this._sampleRenderTarget ) {
+    			this._sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, { type: HalfFloatType, stencilBuffer: this.stencilBuffer } );
+    			this._sampleRenderTarget.texture.name = 'SSAARenderPass.sample';
+    		}
+    		const jitterOffsets = _JitterVectors[ Math.max( 0, Math.min( this.sampleLevel, 5 ) ) ];
+    		const autoClear = renderer.autoClear;
+    		renderer.autoClear = false;
+    		renderer.getClearColor( this._oldClearColor );
+    		const oldClearAlpha = renderer.getClearAlpha();
+    		const baseSampleWeight = 1.0 / jitterOffsets.length;
+    		const roundingRange = 1 / 32;
+    		this._copyUniforms[ 'tDiffuse' ].value = this._sampleRenderTarget.texture;
+    		const viewOffset = {
+    			fullWidth: readBuffer.width,
+    			fullHeight: readBuffer.height,
+    			offsetX: 0,
+    			offsetY: 0,
+    			width: readBuffer.width,
+    			height: readBuffer.height
+    		};
+    		const originalViewOffset = Object.assign( {}, this.camera.view );
+    		if ( originalViewOffset.enabled ) Object.assign( viewOffset, originalViewOffset );
+    		for ( let i = 0; i < jitterOffsets.length; i ++ ) {
+    			const jitterOffset = jitterOffsets[ i ];
+    			if ( this.camera.setViewOffset ) {
+    				this.camera.setViewOffset(
+    					viewOffset.fullWidth, viewOffset.fullHeight,
+    					viewOffset.offsetX + jitterOffset[ 0 ] * 0.0625, viewOffset.offsetY + jitterOffset[ 1 ] * 0.0625,
+    					viewOffset.width, viewOffset.height
+    				);
+    			}
+    			let sampleWeight = baseSampleWeight;
+    			if ( this.unbiased ) {
+    				const uniformCenteredDistribution = ( -0.5 + ( i + 0.5 ) / jitterOffsets.length );
+    				sampleWeight += roundingRange * uniformCenteredDistribution;
+    			}
+    			this._copyUniforms[ 'opacity' ].value = sampleWeight;
+    			renderer.setClearColor( this.clearColor, this.clearAlpha );
+    			renderer.setRenderTarget( this._sampleRenderTarget );
+    			renderer.clear();
+    			renderer.render( this.scene, this.camera );
+    			renderer.setRenderTarget( this.renderToScreen ? null : writeBuffer );
+    			if ( i === 0 ) {
+    				renderer.setClearColor( 0x000000, 0.0 );
+    				renderer.clear();
+    			}
+    			this._fsQuad.render( renderer );
+    		}
+    		if ( this.camera.setViewOffset && originalViewOffset.enabled ) {
+    			this.camera.setViewOffset(
+    				originalViewOffset.fullWidth, originalViewOffset.fullHeight,
+    				originalViewOffset.offsetX, originalViewOffset.offsetY,
+    				originalViewOffset.width, originalViewOffset.height
+    			);
+    		} else if ( this.camera.clearViewOffset ) {
+    			this.camera.clearViewOffset();
+    		}
+    		renderer.autoClear = autoClear;
+    		renderer.setClearColor( this._oldClearColor, oldClearAlpha );
+    	}
     }
     const _JitterVectors = [
-      [[0, 0]],
-      [
-        [4, 4],
-        [-4, -4],
-      ],
-      [
-        [-2, -6],
-        [6, -2],
-        [-6, 2],
-        [2, 6],
-      ],
-      [
-        [1, -3],
-        [-1, 3],
-        [5, 1],
-        [-3, -5],
-        [-5, 5],
-        [-7, -1],
-        [3, 7],
-        [7, -7],
-      ],
-      [
-        [1, 1],
-        [-1, -3],
-        [-3, 2],
-        [4, -1],
-        [-5, -2],
-        [2, 5],
-        [5, 3],
-        [3, -5],
-        [-2, 6],
-        [0, -7],
-        [-4, -6],
-        [-6, 4],
-        [-8, 0],
-        [7, -4],
-        [6, 7],
-        [-7, -8],
-      ],
-      [
-        [-4, -7],
-        [-7, -5],
-        [-3, -5],
-        [-5, -4],
-        [-1, -4],
-        [-2, -2],
-        [-6, -1],
-        [-4, 0],
-        [-7, 1],
-        [-1, 2],
-        [-6, 3],
-        [-3, 3],
-        [-7, 6],
-        [-3, 6],
-        [-5, 7],
-        [-1, 7],
-        [5, -7],
-        [1, -6],
-        [6, -5],
-        [4, -4],
-        [2, -3],
-        [7, -2],
-        [1, -1],
-        [4, -1],
-        [2, 1],
-        [6, 2],
-        [0, 4],
-        [4, 4],
-        [2, 5],
-        [7, 5],
-        [5, 6],
-        [3, 7],
-      ],
+    	[
+    		[ 0, 0 ]
+    	],
+    	[
+    		[ 4, 4 ], [ -4, -4 ]
+    	],
+    	[
+    		[ -2, -6 ], [ 6, -2 ], [ -6, 2 ], [ 2, 6 ]
+    	],
+    	[
+    		[ 1, -3 ], [ -1, 3 ], [ 5, 1 ], [ -3, -5 ],
+    		[ -5, 5 ], [ -7, -1 ], [ 3, 7 ], [ 7, -7 ]
+    	],
+    	[
+    		[ 1, 1 ], [ -1, -3 ], [ -3, 2 ], [ 4, -1 ],
+    		[ -5, -2 ], [ 2, 5 ], [ 5, 3 ], [ 3, -5 ],
+    		[ -2, 6 ], [ 0, -7 ], [ -4, -6 ], [ -6, 4 ],
+    		[ -8, 0 ], [ 7, -4 ], [ 6, 7 ], [ -7, -8 ]
+    	],
+    	[
+    		[ -4, -7 ], [ -7, -5 ], [ -3, -5 ], [ -5, -4 ],
+    		[ -1, -4 ], [ -2, -2 ], [ -6, -1 ], [ -4, 0 ],
+    		[ -7, 1 ], [ -1, 2 ], [ -6, 3 ], [ -3, 3 ],
+    		[ -7, 6 ], [ -3, 6 ], [ -5, 7 ], [ -1, 7 ],
+    		[ 5, -7 ], [ 1, -6 ], [ 6, -5 ], [ 4, -4 ],
+    		[ 2, -3 ], [ 7, -2 ], [ 1, -1 ], [ 4, -1 ],
+    		[ 2, 1 ], [ 6, 2 ], [ 0, 4 ], [ 4, 4 ],
+    		[ 2, 5 ], [ 7, 5 ], [ 5, 6 ], [ 3, 7 ]
+    	]
     ];
 
     const OutputShader = {
@@ -57135,8 +58481,8 @@ js: import "konva/skia-backend";
             this.lineWidth = 4;
             this.lineType = "solid";
             this.fontSize = 34;
-            this.changeActiveDragger = (event) => {
-                const draggerName = event.data;
+            this.changeActiveDragger = ({ data }) => {
+                const draggerName = data || "";
                 this._markupContainer.className = this._container.className
                     .split(" ")
                     .filter((x) => !x.startsWith("oda-cursor-"))
@@ -57197,19 +58543,19 @@ js: import "konva/skia-backend";
             this._resizeObserver = new ResizeObserver(this.resizeContainer);
             this._resizeObserver.observe(container);
             if (this._viewer) {
-                this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
-                this._viewer.addEventListener("pan", this.pan);
-                this._viewer.addEventListener("zoomat", this.zoomAt);
-                this._viewer.addEventListener("changecameramode", this.changeCameraMode);
+                this._viewer.on("changeactivedragger", this.changeActiveDragger);
+                this._viewer.on("pan", this.pan);
+                this._viewer.on("zoomat", this.zoomAt);
+                this._viewer.on("changecameramode", this.changeCameraMode);
             }
         }
         dispose() {
             var _a, _b;
             if (this._viewer) {
-                this._viewer.removeEventListener("changecameramode", this.changeCameraMode);
-                this._viewer.removeEventListener("zoomat", this.zoomAt);
-                this._viewer.removeEventListener("pan", this.pan);
-                this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
+                this._viewer.off("changecameramode", this.changeCameraMode);
+                this._viewer.off("zoomat", this.zoomAt);
+                this._viewer.off("pan", this.pan);
+                this._viewer.off("changeactivedragger", this.changeActiveDragger);
             }
             (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
             this._resizeObserver = undefined;
@@ -57968,24 +59314,6 @@ js: import "konva/skia-backend";
         }
     }
 
-    class Helpers extends Scene {
-        constructor() {
-            super(...arguments);
-            this.oldAutoClear = false;
-            this.oldClippingPlanes = [];
-        }
-        onBeforeRender(renderer) {
-            this.oldAutoClear = renderer.autoClear;
-            this.oldClippingPlanes = renderer.clippingPlanes;
-            renderer.autoClear = false;
-            renderer.clippingPlanes = [];
-        }
-        onAfterRender(renderer) {
-            renderer.clippingPlanes = this.oldClippingPlanes;
-            renderer.autoClear = this.oldAutoClear;
-        }
-    }
-
     class Viewer extends EventEmitter2 {
         constructor(client) {
             super();
@@ -57999,9 +59327,9 @@ js: import "konva/skia-backend";
             this.selected = [];
             this.extents = new Box3();
             this.target = new Vector3(0, 0, 0);
+            this.clippingPlanes = [];
             this._activeDragger = null;
             this._components = [];
-            this._updateDelay = 1000;
             this._renderNeeded = false;
             this._renderTime = 0;
             this.render = this.render.bind(this);
@@ -58020,7 +59348,9 @@ js: import "konva/skia-backend";
         initialize(canvas, onProgress) {
             this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
             this.scene = new Scene();
-            this.helpers = new Helpers();
+            this.helpers = new Group$1();
+            this.helpers.name = "Helpers";
+            this.scene.add(this.helpers);
             const pixelRatio = window.devicePixelRatio;
             const rect = canvas.parentElement.getBoundingClientRect();
             const width = rect.width || 1;
@@ -58042,17 +59372,17 @@ js: import "konva/skia-backend";
             this.renderer.setPixelRatio(pixelRatio);
             this.renderer.setSize(width, height);
             this.renderer.outputColorSpace = LinearSRGBColorSpace;
+            this.renderer.localClippingEnabled = true;
             this.renderPass = new RenderPass(this.scene, this.camera);
-            this.helpersPass = new RenderPass(this.helpers, this.camera);
-            this.helpersPass.clear = false;
             this.fxaaPass = new FXAAPass();
             this.smaaPass = new SMAAPass();
-            this.ssaaRenderPass = new SSAARenderPass([this.scene, this.helpers], this.camera);
+            this.ssaaRenderPass = new SSAARenderPass(this.scene, this.camera);
             this.ssaaRenderPass.unbiased = true;
             this.outputPass = new OutputPass();
-            this.composer = new EffectComposer(this.renderer);
+            const renderTarget = new WebGLRenderTarget(1, 1, { samples: 4 });
+            renderTarget.texture.name = "EffectComposer.rt1";
+            this.composer = new EffectComposer(this.renderer, renderTarget);
             this.composer.addPass(this.renderPass);
-            this.composer.addPass(this.helpersPass);
             this.composer.addPass(this.smaaPass);
             this.composer.addPass(this.fxaaPass);
             this.composer.addPass(this.ssaaRenderPass);
@@ -58062,7 +59392,9 @@ js: import "konva/skia-backend";
             this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
             this._markup.initialize(this.canvas, this.canvasEvents, this, this);
             for (const name of components.getComponents().keys()) {
-                this._components.push(components.createComponent(name, this));
+                const component = components.createComponent(name, this);
+                if (component)
+                    this._components.push(component);
             }
             this.syncOptions();
             this.syncOverlay();
@@ -58083,7 +59415,7 @@ js: import "konva/skia-backend";
             this.removeAllListeners();
             this.setActiveDragger();
             this._components.forEach((component) => component.dispose());
-            this._components = [];
+            this._components.length = 0;
             this._markup.dispose();
             if (this.canvas) {
                 this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
@@ -58093,8 +59425,6 @@ js: import "konva/skia-backend";
                 this.composer.dispose();
             if (this.renderPass)
                 this.renderPass.dispose();
-            if (this.helpersPass)
-                this.helpersPass.dispose();
             if (this.fxaaPass)
                 this.fxaaPass.dispose();
             if (this.smaaPass)
@@ -58110,7 +59440,6 @@ js: import "konva/skia-backend";
             this.camera = undefined;
             this.renderer = undefined;
             this.renderPass = undefined;
-            this.helpersPass = undefined;
             this.fxaaPass = undefined;
             this.smaaPass = undefined;
             this.ssaaRenderPass = undefined;
@@ -58142,11 +59471,12 @@ js: import "konva/skia-backend";
         }
         update(force = false) {
             const time = performance.now();
-            force = force || time - this._renderTime >= this._updateDelay;
+            if (typeof force === "number" && time - this._renderTime >= force)
+                force = true;
             this._renderNeeded = true;
             if (force)
                 this.render(time);
-            this.emitEvent({ type: "update", force });
+            this.emitEvent({ type: "update", force: !!force });
         }
         render(time, force = false) {
             if (!this.renderer)
@@ -58160,13 +59490,7 @@ js: import "konva/skia-backend";
             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);
-            }
-            else {
-                this.composer.render(deltaTime);
-            }
+            this.composer.render(deltaTime);
             this.emitEvent({ type: "render", time, deltaTime });
         }
         loadReferences(model) {
@@ -58226,11 +59550,12 @@ js: import "konva/skia-backend";
             this.clearOverlay();
             this.clearSelected();
             this.loaders.forEach((loader) => loader.dispose());
-            this.loaders = [];
+            this.loaders.length = 0;
             this.models.forEach((model) => model.dispose());
-            this.models = [];
-            this.scene.clear();
+            this.models.length = 0;
             this.helpers.clear();
+            this.scene.clear();
+            this.scene.add(this.helpers);
             this.extents.makeEmpty();
             this.syncOptions();
             this.syncOverlay();
@@ -58247,8 +59572,15 @@ js: import "konva/skia-backend";
             this.fxaaPass.enabled = options.antialiasing === "fxaa";
             this.smaaPass.enabled = options.antialiasing === "smaa";
             this.ssaaRenderPass.enabled = options.antialiasing === "ssaa";
-            this.renderPass.enabled = !this.ssaaRenderPass.enabled;
-            this.helpersPass.enabled = !this.ssaaRenderPass.enabled;
+            this.renderPass.enabled = options.antialiasing !== "ssaa";
+            const samples = options.antialiasing === true || options.antialiasing === "msaa" ? 4 : 0;
+            if (this.composer.renderTarget1.samples !== samples) {
+                const size = this.renderer.getSize(new Vector2());
+                const newRenderTarget = new WebGLRenderTarget(1, 1, { samples });
+                newRenderTarget.texture.name = "EffectComposer.rt1";
+                this.composer.reset(newRenderTarget);
+                this.composer.setSize(size.x, size.y);
+            }
             this.update();
         }
         syncOverlay() {
@@ -58267,7 +59599,8 @@ js: import "konva/skia-backend";
         clearSlices() {
             if (!this.renderer)
                 return;
-            this.renderer.clippingPlanes = [];
+            this.clippingPlanes.length = 0;
+            this.emitEvent({ type: "changecuttingplanes" });
             this.emitEvent({ type: "clearslices" });
             this.update();
         }
@@ -58336,7 +59669,7 @@ js: import "konva/skia-backend";
             }
         }
         getComponent(name) {
-            return this._components.find((component) => component.name === name);
+            return this._components.find((component) => component.name === name) || null;
         }
         drawViewpoint(viewpoint) {
             var _a, _b, _c, _d;
@@ -58363,7 +59696,6 @@ js: import "konva/skia-backend";
                     camera.updateMatrixWorld();
                     this.camera = camera;
                     this.renderPass.camera = camera;
-                    this.helpersPass.camera = camera;
                     this.ssaaRenderPass.camera = camera;
                     this.options.cameraMode = "orthographic";
                     this.emitEvent({ type: "changecameramode", mode: "orthographic" });
@@ -58386,7 +59718,6 @@ js: import "konva/skia-backend";
                     camera.updateMatrixWorld();
                     this.camera = camera;
                     this.renderPass.camera = camera;
-                    this.helpersPass.camera = camera;
                     this.ssaaRenderPass.camera = camera;
                     this.options.cameraMode = "perspective";
                     this.emitEvent({ type: "changecameramode", mode: "perspective" });
@@ -58397,8 +59728,9 @@ js: import "konva/skia-backend";
                     clipping_planes.forEach((clipping_plane) => {
                         const plane = new Plane();
                         plane.setFromNormalAndCoplanarPoint(getVector3FromPoint3d(clipping_plane.direction), getVector3FromPoint3d(clipping_plane.location));
-                        this.renderer.clippingPlanes.push(plane);
+                        this.clippingPlanes.push(plane);
                     });
+                    this.emitEvent({ type: "changecuttingplanes" });
                 }
             };
             const setSelection = (selection) => {
@@ -58453,7 +59785,7 @@ js: import "konva/skia-backend";
             };
             const getClippingPlanes = () => {
                 const clipping_planes = [];
-                this.renderer.clippingPlanes.forEach((plane) => {
+                this.clippingPlanes.forEach((plane) => {
                     const clipping_plane = {
                         location: getPoint3dFromVector3(plane.coplanarPoint(new Vector3())),
                         direction: getPoint3dFromVector3(plane.normal),