@inweb/viewer-three 26.10.1 → 26.10.3

package/dist/viewer-three.js

@@ -236,6 +236,7 @@
             enableGestures: true,
             geometryType: "vsfx",
             rulerUnit: "Default",
+            cameraMode: "perspective",
         };
     }
     class Options {
@@ -491,6 +492,13 @@
             this._data.rulerUnit = value;
             this.change();
         }
+        get cameraMode() {
+            return this._data.cameraMode || "perspective";
+        }
+        set cameraMode(value) {
+            this._data.cameraMode = value;
+            this.change();
+        }
     }
     const CanvasEvents = [
         "click",
@@ -33674,10 +33682,13 @@ void main() {
     class OrbitDragger {
         constructor(viewer) {
             this.updateControls = () => {
+                this.orbit.target.copy(this.viewer.target);
+                this.orbit.update();
+            };
+            this.updateControlsCamera = () => {
                 this.orbit.maxDistance = this.viewer.camera.far;
                 this.orbit.minDistance = this.viewer.camera.near;
                 this.orbit.object = this.viewer.camera;
-                this.orbit.target.copy(this.viewer.target);
                 this.orbit.update();
             };
             this.controlsStart = () => {
@@ -33734,6 +33745,7 @@ void main() {
             this.viewer.on("viewposition", this.updateControls);
             this.viewer.addEventListener("zoom", this.updateControls);
             this.viewer.addEventListener("drawviewpoint", this.updateControls);
+            this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
             this.viewer.addEventListener("contextmenu", this.stopContextMenu);
             this.updateControls();
         }
@@ -33743,6 +33755,7 @@ void main() {
             this.viewer.off("viewposition", this.updateControls);
             this.viewer.removeEventListener("zoom", this.updateControls);
             this.viewer.removeEventListener("drawviewpoint", this.updateControls);
+            this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
             this.viewer.removeEventListener("contextmenu", this.stopContextMenu);
             this.orbit.removeEventListener("start", this.controlsStart);
             this.orbit.removeEventListener("change", this.controlsChange);
@@ -33764,6 +33777,9 @@ void main() {
                 this.planeHelper.size = this.viewer.extents.getSize(new Vector3()).length();
                 this.viewer.update();
             };
+            this.updateTransformCamera = () => {
+                this.transform.camera = this.viewer.camera;
+            };
             this.onDoubleClick = (event) => {
                 event.stopPropagation();
                 this.plane.negate();
@@ -33789,16 +33805,18 @@ void main() {
             this.transform.addEventListener("change", this.transformChange);
             this.transform.addEventListener("dragging-changed", this.transformDrag);
             this.viewer.helpers.add(this.transform.getHelper());
-            this.viewer.on("explode", this.updatePlaneSize);
-            this.viewer.on("show", this.updatePlaneSize);
-            this.viewer.on("showall", this.updatePlaneSize);
+            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.canvas.addEventListener("dblclick", this.onDoubleClick, true);
             this.viewer.update();
         }
         dispose() {
-            this.viewer.off("explode", this.updatePlaneSize);
-            this.viewer.off("show", this.updatePlaneSize);
-            this.viewer.off("showAll", this.updatePlaneSize);
+            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.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
             this.transform.removeEventListener("change", this.transformChange);
             this.transform.removeEventListener("dragging-changed", this.transformDrag);
@@ -33879,7 +33897,11 @@ void main() {
                 this.overlay.render();
             };
             this.updateSnapper = () => {
-                this.snapper.update(this.viewer);
+                this.snapper.setFromViewer(this.viewer);
+            };
+            this.updateSnapperCamera = () => {
+                this.snapper.camera = this.viewer.camera;
+                this.overlay.camera = this.viewer.camera;
             };
             this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
             this.overlay.attach();
@@ -33897,6 +33919,7 @@ void main() {
             this.viewer.addEventListener("isolate", this.updateSnapper);
             this.viewer.addEventListener("show", this.updateSnapper);
             this.viewer.addEventListener("showall", this.updateSnapper);
+            this.viewer.addEventListener("changecameramode", this.updateSnapperCamera);
         }
         dispose() {
             this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown);
@@ -33909,6 +33932,7 @@ void main() {
             this.viewer.removeEventListener("isolate", this.updateSnapper);
             this.viewer.removeEventListener("show", this.updateSnapper);
             this.viewer.removeEventListener("showall", this.updateSnapper);
+            this.viewer.removeEventListener("changecameramode", this.updateSnapperCamera);
             this.snapper.dispose();
             this.overlay.detach();
             this.overlay.dispose();
@@ -33926,6 +33950,7 @@ void main() {
             this.camera = camera;
             this.canvas = canvas;
             this.objects = [];
+            this.clippingPlanes = [];
             this.raycaster = new Raycaster();
             this.detectRadiusInPixels = this.isMobile() ? MOBILE_SNAP_DISTANCE : DESKTOP_SNAP_DISTANCE;
             this.edgesCache = new WeakMap();
@@ -33941,7 +33966,7 @@ void main() {
         getMousePosition(event, target) {
             return target.set(event.clientX, event.clientY);
         }
-        getPointerIntersects(mouse, objects) {
+        getPointerIntersects(mouse) {
             const rect = this.canvas.getBoundingClientRect();
             const x = ((mouse.x - rect.left) / rect.width) * 2 - 1;
             const y = (-(mouse.y - rect.top) / rect.height) * 2 + 1;
@@ -33955,28 +33980,32 @@ void main() {
                 Points: { threshold: 0.01 },
                 Sprite: {},
             };
-            return this.raycaster.intersectObjects(objects, false);
+            let intersects = this.raycaster.intersectObjects(this.objects, false);
+            this.clippingPlanes.forEach((plane) => {
+                intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
+            });
+            return intersects;
         }
         getDetectRadius(point) {
             const camera = this.camera;
             if (camera.isOrthographicCamera) {
-                const worldHeight = camera.top - camera.bottom;
+                const fieldHeight = (camera.top - camera.bottom) / camera.zoom;
                 const canvasHeight = this.canvas.height;
-                const worldUnitsPerPixel = worldHeight / canvasHeight;
+                const worldUnitsPerPixel = fieldHeight / canvasHeight;
                 return this.detectRadiusInPixels * worldUnitsPerPixel;
             }
             if (camera.isPerspectiveCamera) {
                 const distance = camera.position.distanceTo(point);
-                const worldHeight = 2 * Math.tan(MathUtils.degToRad(camera.fov * 0.5)) * distance;
+                const fieldHeight = 2 * Math.tan(MathUtils.degToRad(camera.fov * 0.5)) * distance;
                 const canvasHeight = this.canvas.height;
-                const worldUnitsPerPixel = worldHeight / canvasHeight;
+                const worldUnitsPerPixel = fieldHeight / canvasHeight;
                 return this.detectRadiusInPixels * worldUnitsPerPixel;
             }
             return 0.1;
         }
         getSnapPoint(event) {
             const mouse = this.getMousePosition(event, new Vector2());
-            const intersections = this.getPointerIntersects(mouse, this.objects);
+            const intersections = this.getPointerIntersects(mouse);
             if (intersections.length === 0)
                 return undefined;
             const object = intersections[0].object;
@@ -34024,40 +34053,47 @@ void main() {
                 return object.localToWorld(snapPoint);
             return intersectionPoint.clone();
         }
-        update(viewer) {
+        setFromViewer(viewer) {
             this.objects.length = 0;
             viewer.models.forEach((model) => {
                 model.getVisibleObjects().forEach((object) => this.objects.push(object));
             });
+            this.camera = viewer.camera;
+            this.clippingPlanes = viewer.renderer.clippingPlanes || [];
         }
     }
     class MeasureOverlay {
         constructor(camera, canvas) {
             this.lines = [];
+            this.resizeContainer = (entries) => {
+                const { width, height } = entries[0].contentRect;
+                if (!width || !height)
+                    return;
+                this.container.style.width = `${width}px`;
+                this.container.style.height = `${height}px`;
+            };
             this.camera = camera;
             this.canvas = canvas;
             this.projector = new MeasureProjector(camera, canvas);
+            this.resizeObserver = new ResizeObserver(this.resizeContainer);
         }
         attach() {
             this.container = document.createElement("div");
             this.container.id = "measure-container";
-            this.container.style.background = "rgba(0,0,0,0)";
             this.container.style.position = "absolute";
-            this.container.style.top = "0px";
-            this.container.style.left = "0px";
-            this.container.style.width = "100%";
-            this.container.style.height = "100%";
             this.container.style.outline = "none";
             this.container.style.pointerEvents = "none";
             this.container.style.overflow = "hidden";
             if (!this.canvas.parentElement)
                 return;
             this.canvas.parentElement.appendChild(this.container);
+            this.resizeObserver.observe(this.canvas.parentElement);
         }
         dispose() {
             this.clear();
         }
         detach() {
+            this.resizeObserver.disconnect();
             this.container.remove();
             this.container = undefined;
         }
@@ -34066,7 +34102,7 @@ void main() {
             this.lines = [];
         }
         render() {
-            this.projector.updateProjectionMatrix();
+            this.projector.setFromCamera(this.camera);
             this.lines.forEach((line) => line.render());
         }
         update() {
@@ -34217,6 +34253,10 @@ void main() {
             this.camera = camera;
             this.canvas = canvas;
         }
+        setFromCamera(camera) {
+            this.camera = camera;
+            this.updateProjectionMatrix();
+        }
         updateProjectionMatrix() {
             const rect = this.canvas.getBoundingClientRect();
             _widthHalf = rect.width / 2;
@@ -34393,7 +34433,7 @@ void main() {
                 Points: { threshold: 0 },
                 Sprite: { threshold: 0 },
             };
-            let intersects = this.raycaster.intersectObjects(this.groundObjects, false);
+            const intersects = this.raycaster.intersectObjects(this.groundObjects, false);
             if (intersects.length > 0) {
                 const groundY = intersects[0].point.y;
                 const targetY = groundY + this.EYE_HEIGHT;
@@ -34485,6 +34525,9 @@ void main() {
                 const size = this.viewer.extents.getSize(new Vector3());
                 this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
             };
+            this.updateControlsCamera = () => {
+                this.controls.object = this.viewer.camera;
+            };
             this.controlsChange = () => {
                 this.viewer.update();
                 this.viewer.emitEvent({ type: "changecamera" });
@@ -34508,13 +34551,15 @@ void main() {
             this.controls.addEventListener("change", this.controlsChange);
             this.controls.addEventListener("walkspeedchange", this.walkspeedChange);
             this.viewer = viewer;
-            this.viewer.on("render", this.viewerRender);
-            this.viewer.on("zoom", this.viewerZoom);
+            this.viewer.addEventListener("render", this.viewerRender);
+            this.viewer.addEventListener("zoom", this.viewerZoom);
+            this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
             this.updateControls();
         }
         dispose() {
-            this.viewer.off("render", this.viewerRender);
-            this.viewer.off("zoom", this.viewerZoom);
+            this.viewer.removeEventListener("render", this.viewerRender);
+            this.viewer.removeEventListener("zoom", this.viewerZoom);
+            this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
             this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
             this.controls.removeEventListener("change", this.controlsChange);
             this.controls.dispose();
@@ -34674,6 +34719,9 @@ void main() {
                 const size = this.viewer.extents.getSize(new Vector3());
                 this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
             };
+            this.updateControlsCamera = () => {
+                this.controls.object = this.viewer.camera;
+            };
             this.controlsChange = () => {
                 this.viewer.update();
                 this.viewer.emitEvent({ type: "changecamera" });
@@ -34691,13 +34739,15 @@ void main() {
             this.controls.addEventListener("change", this.controlsChange);
             this.controls.addEventListener("flyspeedchange", this.flyspeedChange);
             this.viewer = viewer;
-            this.viewer.on("render", this.viewerRender);
-            this.viewer.on("zoom", this.viewerZoom);
+            this.viewer.addEventListener("render", this.viewerRender);
+            this.viewer.addEventListener("zoom", this.viewerZoom);
+            this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
             this.updateControls();
         }
         dispose() {
-            this.viewer.off("render", this.viewerRender);
-            this.viewer.off("zoom", this.viewerZoom);
+            this.viewer.removeEventListener("render", this.viewerRender);
+            this.viewer.removeEventListener("zoom", this.viewerZoom);
+            this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
             this.controls.removeEventListener("flyspeedchange", this.flyspeedChange);
             this.controls.removeEventListener("change", this.controlsChange);
             this.controls.dispose();
@@ -34995,10 +35045,10 @@ void main() {
 
     class CameraComponent {
         constructor(viewer) {
+            this.optionsChange = () => {
+                this.switchCameraMode(this.viewer.options.cameraMode);
+            };
             this.geometryEnd = () => {
-                const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
-                const rendererSize = this.viewer.renderer.getSize(new Vector2());
-                const aspect = rendererSize.x / rendererSize.y;
                 let camera;
                 this.viewer.scene.traverse((object) => {
                     if (object.isCamera)
@@ -35010,36 +35060,83 @@ void main() {
                 if (camera) {
                     camera.isDefaultCamera = true;
                     camera.scale.set(1, 1, 1);
-                    this.viewer.camera = camera;
-                    this.viewer.renderPass.camera = camera;
-                    this.viewer.helpersPass.camera = camera;
-                    this.viewer.ssaaRenderPass.camera = camera;
+                    this.switchCamera(camera);
+                    const mode = this.getCameraMode(camera);
+                    this.viewer.options.cameraMode = mode;
+                    this.viewer.emitEvent({ type: "changecameramode", mode });
                 }
                 else {
-                    camera = this.viewer.camera;
-                }
-                if (camera.isPerspectiveCamera) {
-                    camera.aspect = aspect;
-                    camera.near = extentsSize / 1000;
-                    camera.far = extentsSize * 1000;
-                    camera.updateProjectionMatrix();
-                }
-                if (camera.isOrthographicCamera) {
-                    camera.left = camera.bottom * aspect;
-                    camera.right = camera.top * aspect;
-                    camera.near = 0;
-                    camera.far = extentsSize * 1000;
-                    camera.updateProjectionMatrix();
-                }
-                if (!camera.isDefaultCamera) {
+                    this.switchCamera(this.viewer.camera);
                     this.viewer.executeCommand("setDefaultViewPosition");
                 }
             };
             this.viewer = viewer;
             this.viewer.addEventListener("databasechunk", this.geometryEnd);
+            this.viewer.addEventListener("optionschange", this.optionsChange);
+            this.viewer.addEventListener("initialize", this.optionsChange);
         }
         dispose() {
             this.viewer.removeEventListener("databasechunk", this.geometryEnd);
+            this.viewer.removeEventListener("optionschange", this.optionsChange);
+            this.viewer.removeEventListener("initialize", this.optionsChange);
+        }
+        getCameraMode(camera) {
+            return camera.isOrthographicCamera ? "orthographic" : "perspective";
+        }
+        switchCamera(camera) {
+            const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2 || 1;
+            const rendererSize = this.viewer.renderer.getSize(new Vector2());
+            const aspect = rendererSize.x / rendererSize.y;
+            if (camera.isPerspectiveCamera) {
+                camera.aspect = aspect;
+                camera.near = extentsSize / 1000;
+                camera.far = extentsSize * 1000;
+            }
+            if (camera.isOrthographicCamera) {
+                camera.left = camera.bottom * aspect;
+                camera.right = camera.top * aspect;
+                camera.near = 0;
+                camera.far = extentsSize * 1000;
+            }
+            camera.updateProjectionMatrix();
+            this.viewer.camera = camera;
+            this.viewer.renderPass.camera = camera;
+            this.viewer.helpersPass.camera = camera;
+            this.viewer.ssaaRenderPass.camera = camera;
+            this.viewer.update();
+        }
+        switchCameraMode(mode) {
+            if (!mode)
+                return;
+            const currentCamera = this.viewer.camera;
+            if (mode === this.getCameraMode(currentCamera))
+                return;
+            const target = this.viewer.target.clone();
+            let camera;
+            if (currentCamera.isOrthographicCamera) {
+                const fov = currentCamera.userData.fov || 45;
+                const fieldHeight = (currentCamera.top - currentCamera.bottom) / currentCamera.zoom;
+                const distance = fieldHeight / (2 * Math.tan(MathUtils.degToRad(fov) / 2));
+                const direction = new Vector3().subVectors(currentCamera.position, target).normalize();
+                camera = new PerspectiveCamera(fov);
+                camera.position.copy(direction).multiplyScalar(distance).add(target);
+            }
+            if (currentCamera.isPerspectiveCamera) {
+                const fov = currentCamera.fov;
+                const distance = currentCamera.position.distanceTo(target);
+                const fieldHeight = 2 * Math.tan(MathUtils.degToRad(fov) / 2) * distance;
+                camera = new OrthographicCamera();
+                camera.top = fieldHeight / 2;
+                camera.bottom = -fieldHeight / 2;
+                camera.position.copy(currentCamera.position);
+                camera.userData.fov = fov;
+            }
+            if (!camera)
+                return;
+            camera.up.copy(currentCamera.up);
+            camera.quaternion.copy(currentCamera.quaternion);
+            this.switchCamera(camera);
+            this.viewer.emitEvent({ type: "changecameramode", mode });
         }
     }
 
@@ -36075,7 +36172,11 @@ void main() {
                 Points: { threshold: 0.01 },
                 Sprite: {},
             };
-            return this.raycaster.intersectObjects(objects, false);
+            let intersects = this.raycaster.intersectObjects(objects, false);
+            (this.viewer.renderer.clippingPlanes || []).forEach((plane) => {
+                intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
+            });
+            return intersects;
         }
         select(objects, model) {
             if (!model) {
@@ -56053,16 +56154,17 @@ void main() {
             this._markupContainer = document.createElement("div");
             this._markupContainer.id = "markup-container";
             this._markupContainer.style.position = "absolute";
-            this._markupContainer.style.top = "0px";
-            this._markupContainer.style.left = "0px";
             this._markupContainer.style.outline = "0px";
             this._markupContainer.style.pointerEvents = "none";
             const parentDiv = this._container.parentElement;
             parentDiv.appendChild(this._markupContainer);
-            if (viewer)
+            if (viewer) {
                 this._viewer.addEventListener("resize", this.resizeViewer);
-            else
+            }
+            else {
                 this._resizeObserver = new ResizeObserver(debounce(this.resizeContainer, 100));
+                this._resizeObserver.observe(parentDiv);
+            }
             this._markupColor.setColor(255, 0, 0);
             this.initializeKonva();
             if (this._viewer) {
@@ -57241,6 +57343,7 @@ void main() {
                     this.renderPass.camera = camera;
                     this.helpersPass.camera = camera;
                     this.ssaaRenderPass.camera = camera;
+                    this.emitEvent({ type: "changecameramode", mode: "orthographic" });
                 }
             };
             const setPerspectiveCamera = (perspective_camera) => {
@@ -57262,6 +57365,7 @@ void main() {
                     this.renderPass.camera = camera;
                     this.helpersPass.camera = camera;
                     this.ssaaRenderPass.camera = camera;
+                    this.emitEvent({ type: "changecameramode", mode: "perspective" });
                 }
             };
             const setClippingPlanes = (clipping_planes) => {