@inweb/viewer-three 26.10.1 → 26.10.2

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);
@@ -33881,6 +33899,10 @@ void main() {
             this.updateSnapper = () => {
                 this.snapper.update(this.viewer);
             };
+            this.updateSnapperCamera = () => {
+                this.snapper.camera = this.viewer.camera;
+                this.overlay.camera = this.viewer.camera;
+            };
             this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
             this.overlay.attach();
             this.line = new MeasureLine(this.overlay);
@@ -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,8 @@ 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.snapper.dispose();
             this.overlay.detach();
             this.overlay.dispose();
@@ -33960,16 +33985,16 @@ void main() {
         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;
@@ -34066,7 +34091,7 @@ void main() {
             this.lines = [];
         }
         render() {
-            this.projector.updateProjectionMatrix();
+            this.projector.setFromCamera(this.camera);
             this.lines.forEach((line) => line.render());
         }
         update() {
@@ -34217,6 +34242,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 +34422,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 +34514,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 +34540,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 +34708,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 +34728,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 +35034,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 +35049,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 });
         }
     }
 
@@ -57241,6 +57327,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 +57349,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) => {