@inweb/viewer-three 26.10.3 → 26.10.5

package/dist/viewer-three.module.js

@@ -1126,12 +1126,14 @@ class MeasureSnapper {
 class MeasureOverlay {
     constructor(camera, canvas) {
         this.lines = [];
-        this.resizeContainer = (entries) => {
-            const { width, height } = entries[0].contentRect;
-            if (!width || !height)
+        this.resizeContainer = () => {
+            const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = this.canvas;
+            if (!offsetWidth || !offsetHeight)
                 return;
-            this.container.style.width = `${width}px`;
-            this.container.style.height = `${height}px`;
+            this.container.style.left = `${offsetLeft}px`;
+            this.container.style.top = `${offsetTop}px`;
+            this.container.style.width = `${offsetWidth}px`;
+            this.container.style.height = `${offsetHeight}px`;
         };
         this.camera = camera;
         this.canvas = canvas;
@@ -1148,7 +1150,7 @@ class MeasureOverlay {
         if (!this.canvas.parentElement)
             return;
         this.canvas.parentElement.appendChild(this.container);
-        this.resizeObserver.observe(this.canvas.parentElement);
+        this.resizeObserver.observe(this.canvas);
     }
     dispose() {
         this.clear();
@@ -1580,11 +1582,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;
@@ -1595,8 +1791,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 = () => {
@@ -1611,6 +1809,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);
@@ -1624,6 +1824,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();
     }
 }
 
@@ -1779,6 +1981,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;
@@ -1789,8 +1993,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 = () => {
@@ -1799,6 +2005,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);
@@ -1812,6 +2020,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();
     }
 }