@inweb/viewer-three 26.10.2 → 26.10.4

package/dist/viewer-three.module.js

@@ -958,7 +958,7 @@ 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;
@@ -995,7 +995,6 @@ class MeasureLineDragger extends OrbitDragger {
         this.viewer.removeEventListener("showall", this.updateSnapper);
         this.viewer.removeEventListener("changecameramode", this.updateSnapperCamera);
         this.snapper.dispose();
-        this.snapper.dispose();
         this.overlay.detach();
         this.overlay.dispose();
         super.dispose();
@@ -1012,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();
@@ -1027,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;
@@ -1041,7 +1041,11 @@ 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;
@@ -1062,7 +1066,7 @@ class MeasureSnapper {
     }
     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;
@@ -1110,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;
     }
@@ -1569,11 +1580,205 @@ class WalkControls extends Controls {
     }
 }
 
+class JoyStickControls extends Controls {
+    constructor(camera, domElement, canvasElement, groundObjects) {
+        super(camera, domElement);
+        this.EYE_HEIGHT = 1.7;
+        this.FAILING_DISTANCE = 2;
+        this.GROUND_FOLLOWING_SPEED = 0.05;
+        this.WALK_SPEED_DELIMITER = 4;
+        this.movementSpeed = 0.1;
+        this.multiplier = 3;
+        this.isActive = false;
+        this.MAX_JOYSTICK_DISTANCE = 100;
+        this.INTERNAL_RADIUS = 35;
+        this.MAX_MOVE_STICK = 40;
+        this.EXTERNAL_RADIUS = 65;
+        this.CANVAS_SIZE = 200;
+        this.pressed = false;
+        this.onPointerDown = (event) => {
+            event.preventDefault();
+            this.pressed = true;
+        };
+        this.onPointerMove = (event) => {
+            event.preventDefault();
+            if (!this.pressed)
+                return;
+            let movedX = event.pageX;
+            let movedY = event.pageY;
+            if (this.joyStickCanvas.offsetParent &&
+                this.joyStickCanvas.offsetParent.tagName.toUpperCase() === "BODY") {
+                movedX -= this.joyStickCanvas.offsetLeft;
+                movedY -= this.joyStickCanvas.offsetTop;
+            }
+            else if (this.joyStickCanvas.offsetParent) {
+                movedX -= this.joyStickCanvas.offsetParent.offsetLeft;
+                movedY -= this.joyStickCanvas.offsetParent.offsetTop;
+            }
+            const x = 100 * ((movedX - this.centerX) / this.MAX_MOVE_STICK);
+            const y = 100 * ((movedY - this.centerY) / this.MAX_MOVE_STICK) * -1;
+            const distance = Math.sqrt(x * x + y * y);
+            if (distance > 20) {
+                this.joyStickPosition.set(x, y);
+                this.isActive = true;
+            }
+            else {
+                this.joyStickPosition.set(0, 0);
+                this.isActive = false;
+            }
+            this.draw();
+            this.moveClock.start();
+            this.update();
+        };
+        this.onPointerUp = (event) => {
+            event.preventDefault();
+            this.pressed = false;
+            this.joyStickPosition.set(0, 0);
+            this.isActive = false;
+            this.moveClock.stop();
+            this.draw();
+        };
+        this.onResize = () => {
+            this.updateVisibility();
+            this.updatePosition();
+        };
+        this.camera = camera;
+        this.canvas = canvasElement;
+        this.moveClock = new Clock(false);
+        this.joyStickPosition = new Vector2(0, 0);
+        this.groundObjects = groundObjects;
+        this.raycaster = new Raycaster();
+        this.raycaster.near = 0;
+        this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
+        this.centerX = this.CANVAS_SIZE / 2;
+        this.centerY = this.CANVAS_SIZE / 2;
+        this.overlayElement = document.createElement("div");
+        this.overlayElement.id = "joyStickDiv";
+        this.overlayElement.style.background = "rgba(0,0,0,0)";
+        this.overlayElement.style.position = "fixed";
+        this.overlayElement.style.zIndex = "0";
+        this.overlayElement.style.touchAction = "none";
+        document.body.appendChild(this.overlayElement);
+        this.joyStickCanvas = document.createElement("canvas");
+        this.joyStickCanvas.id = "joyStickCanvas";
+        this.joyStickCanvas.width = this.CANVAS_SIZE;
+        this.joyStickCanvas.height = this.CANVAS_SIZE;
+        this.overlayElement.appendChild(this.joyStickCanvas);
+        this.context = this.joyStickCanvas.getContext("2d");
+        this.joyStickCanvas.addEventListener("pointerdown", this.onPointerDown);
+        document.addEventListener("pointermove", this.onPointerMove);
+        document.addEventListener("pointerup", this.onPointerUp);
+        window.addEventListener("resize", this.onResize);
+        document.addEventListener("fullscreenchange", this.onResize);
+        this.updateVisibility();
+        this.updatePosition();
+        this.draw();
+    }
+    dispose() {
+        this.joyStickCanvas.removeEventListener("pointerdown", this.onPointerDown);
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        window.removeEventListener("resize", this.onResize);
+        document.removeEventListener("fullscreenchange", this.onResize);
+        this.overlayElement.remove();
+        super.dispose();
+    }
+    updateVisibility() {
+        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        const isNarrowScreen = window.innerWidth < 1024;
+        if (isMobile || isNarrowScreen) {
+            this.overlayElement.style.display = "block";
+        }
+        else {
+            this.overlayElement.style.display = "none";
+        }
+    }
+    updatePosition() {
+        const rect = this.canvas.getBoundingClientRect();
+        this.overlayElement.style.top = `${rect.height - this.CANVAS_SIZE}px`;
+        this.overlayElement.style.left = `${rect.left}px`;
+        this.overlayElement.style.width = `${this.CANVAS_SIZE}px`;
+        this.overlayElement.style.height = `${this.CANVAS_SIZE}px`;
+    }
+    draw() {
+        this.context.clearRect(0, 0, this.CANVAS_SIZE, this.CANVAS_SIZE);
+        this.context.beginPath();
+        this.context.arc(this.centerX, this.centerY, this.EXTERNAL_RADIUS, 0, 2 * Math.PI, false);
+        this.context.lineWidth = 2;
+        this.context.strokeStyle = "#35436E";
+        this.context.globalAlpha = 0.5;
+        this.context.stroke();
+        let movedX = this.centerX + (this.joyStickPosition.x * this.MAX_MOVE_STICK) / 100;
+        let movedY = this.centerY - (this.joyStickPosition.y * this.MAX_MOVE_STICK) / 100;
+        movedX = Math.max(this.MAX_MOVE_STICK, Math.min(this.CANVAS_SIZE - this.MAX_MOVE_STICK, movedX));
+        movedY = Math.max(this.MAX_MOVE_STICK, Math.min(this.CANVAS_SIZE - this.MAX_MOVE_STICK, movedY));
+        this.context.beginPath();
+        this.context.arc(movedX, movedY, this.INTERNAL_RADIUS, 0, 2 * Math.PI, false);
+        this.context.fillStyle = "#35436E";
+        this.context.lineWidth = 2;
+        this.context.strokeStyle = "#35436E";
+        this.context.globalAlpha = 0.5;
+        this.context.fill();
+        this.context.stroke();
+    }
+    updateGroundFollowing() {
+        const up = new Vector3().copy(this.camera.up);
+        this.raycaster.set(this.camera.position, up.negate());
+        this.raycaster.params = this.raycaster.params = {
+            Mesh: {},
+            Line: { threshold: 0 },
+            Line2: { threshold: 0 },
+            LOD: { threshold: 0 },
+            Points: { threshold: 0 },
+            Sprite: { threshold: 0 },
+        };
+        const intersects = this.raycaster.intersectObjects(this.groundObjects, false);
+        if (intersects.length > 0) {
+            const groundY = intersects[0].point.y;
+            const targetY = groundY + this.EYE_HEIGHT;
+            this.camera.position.y = MathUtils.lerp(this.camera.position.y, targetY, this.GROUND_FOLLOWING_SPEED);
+        }
+    }
+    update() {
+        if (!this.isActive)
+            return;
+        const forwardInput = this.joyStickPosition.y / this.MAX_JOYSTICK_DISTANCE;
+        const rightInput = this.joyStickPosition.x / this.MAX_JOYSTICK_DISTANCE;
+        const timeDelta = this.moveClock.getDelta();
+        const moveDelta = (timeDelta * this.multiplier * this.movementSpeed) / this.WALK_SPEED_DELIMITER;
+        const forward = new Vector3();
+        const sideways = new Vector3();
+        this.camera.getWorldDirection(forward);
+        if (this.groundObjects.length > 0) {
+            forward.y = 0;
+        }
+        forward.normalize();
+        sideways.setFromMatrixColumn(this.camera.matrix, 0);
+        if (this.groundObjects.length > 0) {
+            sideways.y = 0;
+        }
+        sideways.normalize();
+        if (forwardInput !== 0) {
+            this.camera.position.addScaledVector(forward, moveDelta * forwardInput);
+        }
+        if (rightInput !== 0) {
+            this.camera.position.addScaledVector(sideways, moveDelta * rightInput);
+        }
+        if (forwardInput !== 0 || rightInput !== 0) {
+            if (this.groundObjects.length > 0)
+                this.updateGroundFollowing();
+            this.dispatchEvent({ type: "change" });
+        }
+    }
+}
+
 class WalkDragger {
     constructor(viewer) {
         this.updateControls = () => {
             const size = this.viewer.extents.getSize(new Vector3());
             this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
+            this.joyStickControls.movementSpeed = this.controls.movementSpeed;
+            this.joyStickControls.multiplier = this.controls.multiplier;
         };
         this.updateControlsCamera = () => {
             this.controls.object = this.viewer.camera;
@@ -1584,8 +1789,10 @@ class WalkDragger {
         };
         this.walkspeedChange = (event) => {
             this.viewer.emitEvent(event);
+            this.joyStickControls.multiplier = this.controls.multiplier;
         };
         this.viewerRender = () => {
+            this.joyStickControls.update();
             this.controls.update();
         };
         this.viewerZoom = () => {
@@ -1600,6 +1807,8 @@ class WalkDragger {
         this.controls = new WalkControls(viewer.camera, viewer.canvas, meshOnlyGround);
         this.controls.addEventListener("change", this.controlsChange);
         this.controls.addEventListener("walkspeedchange", this.walkspeedChange);
+        this.joyStickControls = new JoyStickControls(viewer.camera, viewer.canvas, viewer.canvas, meshOnlyGround);
+        this.joyStickControls.addEventListener("change", this.controlsChange);
         this.viewer = viewer;
         this.viewer.addEventListener("render", this.viewerRender);
         this.viewer.addEventListener("zoom", this.viewerZoom);
@@ -1613,6 +1822,8 @@ class WalkDragger {
         this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
         this.controls.removeEventListener("change", this.controlsChange);
         this.controls.dispose();
+        this.joyStickControls.removeEventListener("change", this.controlsChange);
+        this.joyStickControls.dispose();
     }
 }
 
@@ -1768,6 +1979,8 @@ class FlyDragger {
         this.updateControls = () => {
             const size = this.viewer.extents.getSize(new Vector3());
             this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
+            this.joyStickControls.movementSpeed = this.controls.movementSpeed;
+            this.joyStickControls.multiplier = this.controls.multiplier;
         };
         this.updateControlsCamera = () => {
             this.controls.object = this.viewer.camera;
@@ -1778,8 +1991,10 @@ class FlyDragger {
         };
         this.flyspeedChange = (event) => {
             this.viewer.emitEvent(event);
+            this.joyStickControls.multiplier = this.controls.multiplier;
         };
         this.viewerRender = () => {
+            this.joyStickControls.update();
             this.controls.update();
         };
         this.viewerZoom = () => {
@@ -1788,6 +2003,8 @@ class FlyDragger {
         this.controls = new FlyControls(viewer.camera, viewer.canvas);
         this.controls.addEventListener("change", this.controlsChange);
         this.controls.addEventListener("flyspeedchange", this.flyspeedChange);
+        this.joyStickControls = new JoyStickControls(viewer.camera, viewer.canvas, viewer.canvas, []);
+        this.joyStickControls.addEventListener("change", this.controlsChange);
         this.viewer = viewer;
         this.viewer.addEventListener("render", this.viewerRender);
         this.viewer.addEventListener("zoom", this.viewerZoom);
@@ -1801,6 +2018,8 @@ class FlyDragger {
         this.controls.removeEventListener("flyspeedchange", this.flyspeedChange);
         this.controls.removeEventListener("change", this.controlsChange);
         this.controls.dispose();
+        this.joyStickControls.removeEventListener("change", this.controlsChange);
+        this.joyStickControls.dispose();
     }
 }
 
@@ -2583,7 +2802,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) {