@inweb/viewer-three 26.10.3 → 26.10.4

package/dist/viewer-three.js

@@ -34519,11 +34519,205 @@ void main() {
         }
     }
 
+    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;
@@ -34534,8 +34728,10 @@ void main() {
             };
             this.walkspeedChange = (event) => {
                 this.viewer.emitEvent(event);
+                this.joyStickControls.multiplier = this.controls.multiplier;
             };
             this.viewerRender = () => {
+                this.joyStickControls.update();
                 this.controls.update();
             };
             this.viewerZoom = () => {
@@ -34550,6 +34746,8 @@ void main() {
             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);
@@ -34563,6 +34761,8 @@ void main() {
             this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
             this.controls.removeEventListener("change", this.controlsChange);
             this.controls.dispose();
+            this.joyStickControls.removeEventListener("change", this.controlsChange);
+            this.joyStickControls.dispose();
         }
     }
 
@@ -34718,6 +34918,8 @@ void main() {
             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;
@@ -34728,8 +34930,10 @@ void main() {
             };
             this.flyspeedChange = (event) => {
                 this.viewer.emitEvent(event);
+                this.joyStickControls.multiplier = this.controls.multiplier;
             };
             this.viewerRender = () => {
+                this.joyStickControls.update();
                 this.controls.update();
             };
             this.viewerZoom = () => {
@@ -34738,6 +34942,8 @@ void main() {
             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);
@@ -34751,6 +34957,8 @@ void main() {
             this.controls.removeEventListener("flyspeedchange", this.flyspeedChange);
             this.controls.removeEventListener("change", this.controlsChange);
             this.controls.dispose();
+            this.joyStickControls.removeEventListener("change", this.controlsChange);
+            this.joyStickControls.dispose();
         }
     }