@inweb/viewer-three 26.10.0 → 26.10.2

package/dist/viewer-three.module.js

@@ -23,7 +23,7 @@
 
 import { draggersRegistry, commandsRegistry, componentsRegistry, Loader, loadersRegistry, Options, CANVAS_EVENTS } from '@inweb/viewer-core';
 export * from '@inweb/viewer-core';
-import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Matrix4, Vector4, MathUtils, Raycaster, EdgesGeometry, Controls, Clock, Sphere, Box3, Color, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, PerspectiveCamera, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
+import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Matrix4, Vector4, MathUtils, Raycaster, EdgesGeometry, Controls, Clock, Sphere, Box3, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
 import { Wireframe } from 'three/examples/jsm/lines/Wireframe.js';
@@ -743,10 +743,13 @@ class OrbitControls extends EventDispatcher {
 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 = () => {
@@ -803,6 +806,7 @@ class OrbitDragger {
         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();
     }
@@ -812,6 +816,7 @@ class OrbitDragger {
         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);
@@ -833,6 +838,9 @@ class CuttingPlaneDragger extends OrbitDragger {
             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();
@@ -858,16 +866,18 @@ class CuttingPlaneDragger extends OrbitDragger {
         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);
@@ -950,6 +960,10 @@ class MeasureLineDragger extends OrbitDragger {
         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);
@@ -966,6 +980,7 @@ class MeasureLineDragger extends OrbitDragger {
         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);
@@ -978,6 +993,8 @@ class MeasureLineDragger extends OrbitDragger {
         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();
@@ -1029,16 +1046,16 @@ class MeasureSnapper {
     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;
@@ -1135,7 +1152,7 @@ class MeasureOverlay {
         this.lines = [];
     }
     render() {
-        this.projector.updateProjectionMatrix();
+        this.projector.setFromCamera(this.camera);
         this.lines.forEach((line) => line.render());
     }
     update() {
@@ -1286,6 +1303,10 @@ class MeasureProjector {
         this.camera = camera;
         this.canvas = canvas;
     }
+    setFromCamera(camera) {
+        this.camera = camera;
+        this.updateProjectionMatrix();
+    }
     updateProjectionMatrix() {
         const rect = this.canvas.getBoundingClientRect();
         _widthHalf = rect.width / 2;
@@ -1462,7 +1483,7 @@ class WalkControls extends Controls {
             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;
@@ -1554,6 +1575,9 @@ class WalkDragger {
             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" });
@@ -1577,13 +1601,15 @@ class WalkDragger {
         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();
@@ -1743,6 +1769,9 @@ class FlyDragger {
             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" });
@@ -1760,13 +1789,15 @@ class FlyDragger {
         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();
@@ -2064,10 +2095,10 @@ class BackgroundComponent {
 
 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)
@@ -2079,36 +2110,83 @@ class CameraComponent {
             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 });
     }
 }
 
@@ -5728,6 +5806,7 @@ class Viewer extends EventEmitter2 {
                 this.renderPass.camera = camera;
                 this.helpersPass.camera = camera;
                 this.ssaaRenderPass.camera = camera;
+                this.emitEvent({ type: "changecameramode", mode: "orthographic" });
             }
         };
         const setPerspectiveCamera = (perspective_camera) => {
@@ -5749,6 +5828,7 @@ class Viewer extends EventEmitter2 {
                 this.renderPass.camera = camera;
                 this.helpersPass.camera = camera;
                 this.ssaaRenderPass.camera = camera;
+                this.emitEvent({ type: "changecameramode", mode: "perspective" });
             }
         };
         const setClippingPlanes = (clipping_planes) => {