@inweb/viewer-three 26.10.1 → 26.10.3

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);
@@ -948,7 +958,11 @@ class MeasureLineDragger extends OrbitDragger {
             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();
@@ -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,7 @@ 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.overlay.detach();
         this.overlay.dispose();
@@ -995,6 +1011,7 @@ class MeasureSnapper {
         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();
@@ -1010,7 +1027,7 @@ class MeasureSnapper {
     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;
@@ -1024,28 +1041,32 @@ class MeasureSnapper {
             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;
@@ -1093,40 +1114,47 @@ class MeasureSnapper {
             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;
     }
@@ -1135,7 +1163,7 @@ class MeasureOverlay {
         this.lines = [];
     }
     render() {
-        this.projector.updateProjectionMatrix();
+        this.projector.setFromCamera(this.camera);
         this.lines.forEach((line) => line.render());
     }
     update() {
@@ -1286,6 +1314,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 +1494,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 +1586,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 +1612,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 +1780,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 +1800,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 +2106,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 +2121,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 });
     }
 }
 
@@ -2505,7 +2594,11 @@ class SelectionComponent {
             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) {
@@ -5728,6 +5821,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 +5843,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) => {