@inweb/viewer-three 26.10.2 → 26.10.4

package/dist/viewer-three.js

@@ -33897,7 +33897,7 @@ void main() {
                 this.overlay.render();
             };
             this.updateSnapper = () => {
-                this.snapper.update(this.viewer);
+                this.snapper.setFromViewer(this.viewer);
             };
             this.updateSnapperCamera = () => {
                 this.snapper.camera = this.viewer.camera;
@@ -33934,7 +33934,6 @@ void main() {
             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();
@@ -33951,6 +33950,7 @@ void main() {
             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();
@@ -33966,7 +33966,7 @@ void main() {
         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;
@@ -33980,7 +33980,11 @@ void main() {
                 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;
@@ -34001,7 +34005,7 @@ void main() {
         }
         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;
@@ -34049,40 +34053,47 @@ void main() {
                 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;
         }
@@ -34508,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;
@@ -34523,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 = () => {
@@ -34539,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);
@@ -34552,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();
         }
     }
 
@@ -34707,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;
@@ -34717,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 = () => {
@@ -34727,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);
@@ -34740,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();
         }
     }
 
@@ -36161,7 +36380,11 @@ void main() {
                 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) {
@@ -56139,16 +56362,17 @@ void main() {
             this._markupContainer = document.createElement("div");
             this._markupContainer.id = "markup-container";
             this._markupContainer.style.position = "absolute";
-            this._markupContainer.style.top = "0px";
-            this._markupContainer.style.left = "0px";
             this._markupContainer.style.outline = "0px";
             this._markupContainer.style.pointerEvents = "none";
             const parentDiv = this._container.parentElement;
             parentDiv.appendChild(this._markupContainer);
-            if (viewer)
+            if (viewer) {
                 this._viewer.addEventListener("resize", this.resizeViewer);
-            else
+            }
+            else {
                 this._resizeObserver = new ResizeObserver(debounce(this.resizeContainer, 100));
+                this._resizeObserver.observe(parentDiv);
+            }
             this._markupColor.setColor(255, 0, 0);
             this.initializeKonva();
             if (this._viewer) {