@inweb/viewer-three 27.4.6 → 27.5.0

package/dist/viewer-three.module.js

@@ -23,19 +23,19 @@
 
 import { draggersRegistry, commandsRegistry, Options, componentsRegistry, Info, Loader, loadersRegistry, CANVAS_EVENTS } from '@inweb/viewer-core';
 export * from '@inweb/viewer-core';
-import { EventDispatcher, Vector3, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Object3D, BufferGeometry, Float32BufferAttribute, Line, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, Line3, Raycaster, MathUtils, EdgesGeometry, Plane, Matrix4, Vector4, Controls, Box3, Clock, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, REVISION, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, TextureLoader, BufferAttribute, LinearMipmapLinearFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, NearestMipmapNearestFilter, LinearFilter, NearestFilter, RepeatWrapping, MirroredRepeatWrapping, ClampToEdgeWrapping, PointsMaterial, MeshStandardMaterial, DataTexture, FloatType, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, LoadingManager, LoaderUtils, FileLoader, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
+import { EventDispatcher, Vector3, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Object3D, BufferGeometry, Float32BufferAttribute, Line, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, Line3, Raycaster, MathUtils, EdgesGeometry, Plane, Matrix4, Vector4, Controls, Box3, Clock, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, REVISION, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, ShaderMaterial, PointsMaterial, Points, Sphere, ShapeUtils, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, TextureLoader, BufferAttribute, LinearMipmapLinearFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, NearestMipmapNearestFilter, LinearFilter, NearestFilter, RepeatWrapping, MirroredRepeatWrapping, ClampToEdgeWrapping, MeshStandardMaterial, DataTexture, FloatType, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, LoadingManager, LoaderUtils, FileLoader, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
 import { Wireframe } from 'three/examples/jsm/lines/Wireframe.js';
 import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
+import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2.js';
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { JSONParser } from '@streamparser/json';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
 import { FXAAPass } from 'three/examples/jsm/postprocessing/FXAAPass.js';
 import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass.js';
-import { Pass, FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';
-import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js';
+import { SSAARenderPass } from 'three/examples/jsm/postprocessing/SSAARenderPass.js';
 import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
 import { EventEmitter2 } from '@inweb/eventemitter2';
 import { Markup } from '@inweb/markup';
@@ -751,9 +751,9 @@ const _line = 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();
@@ -784,7 +784,7 @@ class Snapper {
         };
         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);
             });
@@ -871,7 +871,7 @@ class OrbitDragger {
             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 = () => {
@@ -930,7 +930,7 @@ class OrbitDragger {
         this.viewer.addEventListener("zoom", this.updateControls);
         this.viewer.addEventListener("drawviewpoint", this.updateControls);
         this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
-        this.viewer.addEventListener("optionschange", this.optionsChange);
+        this.viewer.addEventListener("optionschange", this.updateZoomSpeed);
         this.viewer.addEventListener("contextmenu", this.stopContextMenu);
         this.updateControls();
         this.updateControlsCamera();
@@ -942,7 +942,7 @@ class OrbitDragger {
         this.viewer.removeEventListener("zoom", this.updateControls);
         this.viewer.removeEventListener("drawviewpoint", this.updateControls);
         this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
-        this.viewer.removeEventListener("optionschange", this.optionsChange);
+        this.viewer.removeEventListener("optionschange", this.updateZoomSpeed);
         this.viewer.removeEventListener("contextmenu", this.stopContextMenu);
         this.orbit.removeEventListener("start", this.controlsStart);
         this.orbit.removeEventListener("change", this.controlsChange);
@@ -954,13 +954,17 @@ class CuttingPlaneDragger extends OrbitDragger {
     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;
         };
@@ -972,25 +976,29 @@ class CuttingPlaneDragger extends OrbitDragger {
             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);
@@ -1034,12 +1042,9 @@ class CuttingPlaneDragger extends OrbitDragger {
             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();
@@ -1050,7 +1055,8 @@ class CuttingPlaneDragger extends OrbitDragger {
         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);
@@ -1059,15 +1065,18 @@ class CuttingPlaneDragger extends OrbitDragger {
         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);
@@ -1077,23 +1086,27 @@ class CuttingPlaneDragger extends OrbitDragger {
         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();
@@ -1102,8 +1115,8 @@ class CuttingPlaneDragger extends OrbitDragger {
             helper.removeFromParent();
             helper.dispose();
         });
-        this.helpers = [];
-        this.activeHelper = null;
+        this.helpers.length = 0;
+        this.activeHelper = undefined;
         super.dispose();
     }
     addHelper(plane) {
@@ -1155,9 +1168,10 @@ class CuttingPlaneDragger extends OrbitDragger {
         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));
@@ -1172,13 +1186,14 @@ class CuttingPlaneDragger extends OrbitDragger {
         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" });
     }
 }
 
@@ -1372,7 +1387,7 @@ class MeasureLineDragger extends OrbitDragger {
         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();
@@ -2651,8 +2666,8 @@ commands.registerCommand("left", (viewer) => setDefaultViewPosition(viewer, "lef
 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");
@@ -2675,6 +2690,7 @@ class BackgroundComponent {
         this.syncOptions = () => {
             this.backgroundColor.setHex(0xffffff);
             this.viewer.renderer.setClearColor(this.backgroundColor);
+            this.viewer.update();
         };
         this.viewer = viewer;
         this.backgroundColor = new Color(0xffffff);
@@ -2690,7 +2706,7 @@ class BackgroundComponent {
 
 class CameraComponent {
     constructor(viewer) {
-        this.optionsChange = () => {
+        this.syncOptions = () => {
             this.switchCameraMode(this.viewer.options.cameraMode);
         };
         this.geometryEnd = () => {
@@ -2721,13 +2737,13 @@ class CameraComponent {
         };
         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";
@@ -2750,7 +2766,6 @@ class CameraComponent {
         camera.updateProjectionMatrix();
         this.viewer.camera = camera;
         this.viewer.renderPass.camera = camera;
-        this.viewer.helpersPass.camera = camera;
         this.viewer.ssaaRenderPass.camera = camera;
         this.viewer.update();
     }
@@ -2894,7 +2909,7 @@ class InfoComponent {
             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;
@@ -2918,7 +2933,7 @@ class InfoComponent {
             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)
@@ -2993,7 +3008,7 @@ class InfoComponent {
         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);
@@ -3004,7 +3019,7 @@ class InfoComponent {
     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);
@@ -3142,28 +3157,38 @@ class HighlighterComponent {
                 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) {
@@ -3176,13 +3201,13 @@ class HighlighterComponent {
             });
         }
         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) {
@@ -3261,12 +3286,6 @@ class HighlighterComponent {
                 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 {
@@ -3283,7 +3302,7 @@ class SelectionComponent {
             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) => {
@@ -3380,9 +3399,824 @@ class SelectionComponent {
     }
 }
 
+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);
+    }
+}
+
+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);
@@ -3470,7 +4304,7 @@ class WCSHelper extends Object3D {
 
 class WCSHelperComponent {
     constructor(viewer) {
-        this.geometryEnd = () => {
+        this.syncHelper = () => {
             this.wcsHelper.dispose();
             this.wcsHelper = new WCSHelper(this.viewer.camera);
         };
@@ -3484,14 +4318,14 @@ class WCSHelperComponent {
         };
         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();
@@ -3537,11 +4371,14 @@ components.registerComponent("CanvasRemoveComponent", (viewer) => new CanvasRemo
 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();
@@ -3717,7 +4554,25 @@ class ModelImpl {
         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() {
@@ -3725,8 +4580,8 @@ class ModelImpl {
     }
     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))
@@ -4080,6 +4935,7 @@ class GltfStructure {
     this._nextObjectId = 1;
     this.loadingAborted = false;
     this.criticalError = null;
+    this.embeddedBinaryChunk = null;
   }
   async initialize(loader) {
     const json = await this.loadController.loadJson();
@@ -4088,28 +4944,72 @@ class GltfStructure {
     }
     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(
@@ -4386,8 +5286,13 @@ class GltfStructure {
           return await this.textureLoader.loadAsync(fullUrl);
         } else if (image.bufferView !== undefined) {
           const bufferView = this.json.bufferViews[image.bufferView];
-          const { buffer } = await this.getBufferView(bufferView.byteOffset || 0, bufferView.byteLength, 5121);
-          const blob = new Blob([buffer], { 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);
@@ -4626,6 +5531,7 @@ class GltfStructure {
   }
 }
 
+const DRACO_EXTENSION_NAME = "KHR_draco_mesh_compression";
 const STRUCTURE_ID_SEPARATOR = ":";
 class DynamicGltfLoader {
   constructor(camera, scene, renderer) {
@@ -4700,6 +5606,189 @@ class DynamicGltfLoader {
     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);
@@ -4771,7 +5860,7 @@ class DynamicGltfLoader {
     if (!this.transformTexture) return;
     this.transformTexture.needsUpdate = true;
   }
-  setVisibleEdges(visible) {
+  setVisibleEdges(visible = true) {
     this.visibleEdges = visible;
   }
   getAvailableMemory() {
@@ -5025,78 +6114,51 @@ class DynamicGltfLoader {
     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);
@@ -5122,29 +6184,31 @@ class DynamicGltfLoader {
       }
       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) {
@@ -5383,20 +6447,43 @@ class DynamicGltfLoader {
       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;
         }
@@ -5709,6 +6796,10 @@ class DynamicGltfLoader {
             vec3 objectNormal = vec3( normal );
             mat3 bm = mat3( batchingMatrix );
             objectNormal = bm * objectNormal;
+            #ifdef USE_TANGENT
+                vec3 objectTangent = vec3( tangent.xyz );
+                objectTangent = bm * objectTangent;
+            #endif
             `
         );
       }
@@ -6881,7 +7972,7 @@ class DynamicGltfLoader {
     }
     return extent;
   }
-  setMaxConcurrentChunks(maxChunks) {
+  setMaxConcurrentChunks(maxChunks = 6) {
     if (maxChunks < 1) {
       console.warn("Max concurrent chunks must be at least 1");
       return;
@@ -7077,8 +8168,10 @@ class GLTFFileDynamicLoader extends Loader {
         this.manager = new GLTFLoadingManager(file, params);
         const scene = new Group();
         this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
-        this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
-        this.gltfLoader.visibleEdges = this.viewer.options.edgeModel;
+        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;
@@ -7165,8 +8258,10 @@ class GLTFCloudDynamicLoader extends Loader {
     async load(model, format, params = {}) {
         const scene = new Group();
         this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
-        this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
+        this.gltfLoader.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;
@@ -7226,207 +8321,6 @@ const loaders = loadersRegistry("threejs");
 loaders.registerLoader("gltf-file", (viewer) => new GLTFFileDynamicLoader(viewer));
 loaders.registerLoader("gltf-cloud", (viewer) => new GLTFCloudDynamicLoader(viewer));
 
-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);
-  }
-}
-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],
-  ],
-];
-
-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();
@@ -7440,9 +8334,9 @@ class Viewer extends EventEmitter2 {
         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);
@@ -7461,7 +8355,9 @@ class Viewer extends EventEmitter2 {
     initialize(canvas, onProgress) {
         this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
         this.scene = new Scene();
-        this.helpers = new Helpers();
+        this.helpers = new Group();
+        this.helpers.name = "Helpers";
+        this.scene.add(this.helpers);
         const pixelRatio = window.devicePixelRatio;
         const rect = canvas.parentElement.getBoundingClientRect();
         const width = rect.width || 1;
@@ -7483,17 +8379,17 @@ class Viewer extends EventEmitter2 {
         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);
@@ -7524,8 +8420,11 @@ class Viewer extends EventEmitter2 {
         this.removeAllListeners();
         this.setActiveDragger();
         this._components.forEach((component) => component.dispose());
-        this._components = [];
-        this._markup.dispose();
+        this._components.length = 0;
+        if (this._markup) {
+            this._markup.dispose();
+            this._markup = undefined;
+        }
         if (this.canvas) {
             this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
             this.canvas = undefined;
@@ -7534,8 +8433,6 @@ class Viewer extends EventEmitter2 {
             this.composer.dispose();
         if (this.renderPass)
             this.renderPass.dispose();
-        if (this.helpersPass)
-            this.helpersPass.dispose();
         if (this.fxaaPass)
             this.fxaaPass.dispose();
         if (this.smaaPass)
@@ -7551,7 +8448,6 @@ class Viewer extends EventEmitter2 {
         this.camera = undefined;
         this.renderer = undefined;
         this.renderPass = undefined;
-        this.helpersPass = undefined;
         this.fxaaPass = undefined;
         this.smaaPass = undefined;
         this.ssaaRenderPass = undefined;
@@ -7583,11 +8479,12 @@ class Viewer extends EventEmitter2 {
     }
     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)
@@ -7601,13 +8498,7 @@ class Viewer extends EventEmitter2 {
         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) {
@@ -7667,11 +8558,12 @@ class Viewer extends EventEmitter2 {
         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();
@@ -7688,8 +8580,15 @@ class Viewer extends EventEmitter2 {
         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() {
@@ -7708,7 +8607,8 @@ class Viewer extends EventEmitter2 {
     clearSlices() {
         if (!this.renderer)
             return;
-        this.renderer.clippingPlanes = [];
+        this.clippingPlanes.length = 0;
+        this.emitEvent({ type: "changecuttingplanes" });
         this.emitEvent({ type: "clearslices" });
         this.update();
     }
@@ -7804,7 +8704,6 @@ class Viewer extends EventEmitter2 {
                 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" });
@@ -7827,7 +8726,6 @@ class Viewer extends EventEmitter2 {
                 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" });
@@ -7838,8 +8736,9 @@ class Viewer extends EventEmitter2 {
                 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) => {
@@ -7894,7 +8793,7 @@ class Viewer extends EventEmitter2 {
         };
         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),