@xeokit/xeokit-sdk 2.4.0-alpha-81 → 2.4.0-alpha-82

package/src/viewer/scene/CameraControl/lib/CameraUpdater.js

@@ -0,0 +1,312 @@
+import {math} from "../../math/math.js";
+
+const SCALE_DOLLY_EACH_FRAME = 1; // Recalculate dolly speed for eye->target distance on each Nth frame
+const EPSILON = 0.001;
+const tempVec3 = math.vec3();
+
+/**
+ * Handles camera updates on each "tick" that were scheduled by the various controllers.
+ *
+ * @private
+ */
+class CameraUpdater {
+
+    constructor(scene, controllers, configs, states, updates) {
+
+        this._scene = scene;
+        const camera = scene.camera;
+        const pickController = controllers.pickController;
+        const pivotController = controllers.pivotController;
+        const panController = controllers.panController;
+
+        let countDown = SCALE_DOLLY_EACH_FRAME; // Decrements on each tick
+        let dollyDistFactor = 1.0; // Calculated when countDown is zero
+        let followPointerWorldPos = null; // Holds the pointer's World position when configs.followPointer is true
+        
+        this._onTick = scene.on("tick", () => {
+
+            if (!(configs.active && configs.pointerEnabled)) {
+                return;
+            }
+
+            let cursorType = "default";
+
+            //----------------------------------------------------------------------------------------------------------
+            // Dolly decay
+            //------------------------------------------------------------------------------------  ----------------------
+
+            if (Math.abs(updates.dollyDelta) < EPSILON) {
+                updates.dollyDelta = 0;
+            }
+
+            //----------------------------------------------------------------------------------------------------------
+            // Rotation decay
+            //----------------------------------------------------------------------------------------------------------
+
+            if (Math.abs(updates.rotateDeltaX) < EPSILON) {
+                updates.rotateDeltaX = 0;
+            }
+
+            if (Math.abs(updates.rotateDeltaY) < EPSILON) {
+                updates.rotateDeltaY = 0;
+            }
+
+            if (updates.rotateDeltaX !== 0 || updates.rotateDeltaY !== 0) {
+                updates.dollyDelta = 0;
+            }
+
+            //----------------------------------------------------------------------------------------------------------
+            // Dolly speed eye->look scaling
+            //
+            // If pointer is over an object, then dolly speed is proportional to the distance to that object.
+            //
+            // If pointer is not over an object, then dolly speed is proportional to the distance to the last
+            // object the pointer was over. This is so that we can dolly to structures that may have gaps through
+            // which empty background shows, that the pointer may inadvertently be over. In these cases, we don't
+            // want dolly speed wildly varying depending on how accurately the user avoids the gaps with the pointer.
+            //----------------------------------------------------------------------------------------------------------
+
+            if (configs.followPointer) {
+
+                if (--countDown <= 0) {
+
+                    countDown = SCALE_DOLLY_EACH_FRAME;
+
+                    if (updates.dollyDelta !== 0) {
+                        if (updates.rotateDeltaY === 0 && updates.rotateDeltaX === 0) {
+
+                            if (configs.followPointer && states.followPointerDirty) {
+
+                                pickController.pickCursorPos = states.pointerCanvasPos;
+                                pickController.schedulePickSurface = true;
+                                pickController.update();
+
+                                if (pickController.pickResult && pickController.pickResult.worldPos) {
+                                    followPointerWorldPos = pickController.pickResult.worldPos;
+                                    
+                                } else {
+                                    dollyDistFactor = 1.0;
+                                    followPointerWorldPos = null;
+                                }
+
+                                states.followPointerDirty = false;
+                            }
+                        }
+
+                        if (followPointerWorldPos) {
+                            const dist = Math.abs(math.lenVec3(math.subVec3(followPointerWorldPos, scene.camera.eye, tempVec3)));
+                            dollyDistFactor = dist / configs.dollyProximityThreshold;
+                        }
+
+                        if (dollyDistFactor < configs.dollyMinSpeed) {
+                            dollyDistFactor = configs.dollyMinSpeed;
+                        }
+                    }
+                }
+            }
+
+            const dollyDeltaForDist = (updates.dollyDelta * dollyDistFactor);
+
+            //----------------------------------------------------------------------------------------------------------
+            // Rotation
+            //----------------------------------------------------------------------------------------------------------
+
+            if (updates.rotateDeltaY !== 0 || updates.rotateDeltaX !== 0) {
+
+                if ((!configs.firstPerson) && configs.followPointer && pivotController.getPivoting()) {
+                    pivotController.continuePivot(updates.rotateDeltaY, updates.rotateDeltaX);
+                    pivotController.showPivot();
+
+                } else {
+
+                    if (updates.rotateDeltaX !== 0) {
+                        if (configs.firstPerson) {
+                            camera.pitch(-updates.rotateDeltaX);
+                        } else {
+                            camera.orbitPitch(updates.rotateDeltaX);
+                        }
+                    }
+
+                    if (updates.rotateDeltaY !== 0) {
+                        if (configs.firstPerson) {
+                            camera.yaw(updates.rotateDeltaY);
+                        } else {
+                            camera.orbitYaw(updates.rotateDeltaY);
+                        }
+                    }
+                }
+
+                updates.rotateDeltaX *= configs.rotationInertia;
+                updates.rotateDeltaY *= configs.rotationInertia;
+
+                cursorType = "grabbing";
+            }
+
+            //----------------------------------------------------------------------------------------------------------
+            // Panning
+            //----------------------------------------------------------------------------------------------------------
+
+            if (Math.abs(updates.panDeltaX) < EPSILON) {
+                updates.panDeltaX = 0;
+            }
+
+            if (Math.abs(updates.panDeltaY) < EPSILON) {
+                updates.panDeltaY = 0;
+            }
+
+            if (Math.abs(updates.panDeltaZ) < EPSILON) {
+                updates.panDeltaZ = 0;
+            }
+
+            if (updates.panDeltaX !== 0 || updates.panDeltaY !== 0 || updates.panDeltaZ !== 0) {
+
+                const vec = math.vec3();
+
+                vec[0] = updates.panDeltaX;
+                vec[1] = updates.panDeltaY;
+                vec[2] = updates.panDeltaZ;
+
+                let verticalEye;
+                let verticalLook;
+
+                if (configs.constrainVertical) {
+
+                    if (camera.xUp) {
+                        verticalEye = camera.eye[0];
+                        verticalLook = camera.look[0];
+                    } else if (camera.yUp) {
+                        verticalEye = camera.eye[1];
+                        verticalLook = camera.look[1];
+                    } else if (camera.zUp) {
+                        verticalEye = camera.eye[2];
+                        verticalLook = camera.look[2];
+                    }
+
+                    camera.pan(vec);
+
+                    const eye = camera.eye;
+                    const look = camera.look;
+
+                    if (camera.xUp) {
+                        eye[0] = verticalEye;
+                        look[0] = verticalLook;
+                    } else if (camera.yUp) {
+                        eye[1] = verticalEye;
+                        look[1] = verticalLook;
+                    } else if (camera.zUp) {
+                        eye[2] = verticalEye;
+                        look[2] = verticalLook;
+                    }
+
+                    camera.eye = eye;
+                    camera.look = look;
+
+                } else {
+                    camera.pan(vec);
+                }
+
+                cursorType = "grabbing";
+            }
+
+            updates.panDeltaX *= configs.panInertia;
+            updates.panDeltaY *= configs.panInertia;
+            updates.panDeltaZ *= configs.panInertia;
+
+            //----------------------------------------------------------------------------------------------------------
+            // Dollying
+            //----------------------------------------------------------------------------------------------------------
+
+            if (dollyDeltaForDist !== 0) {
+
+                if (dollyDeltaForDist < 0) {
+                    cursorType = "zoom-in";
+                } else {
+                    cursorType = "zoom-out";
+                }
+
+                if (configs.firstPerson) {
+
+                    let verticalEye;
+                    let verticalLook;
+
+                    if (configs.constrainVertical) {
+                        if (camera.xUp) {
+                            verticalEye = camera.eye[0];
+                            verticalLook = camera.look[0];
+                        } else if (camera.yUp) {
+                            verticalEye = camera.eye[1];
+                            verticalLook = camera.look[1];
+                        } else if (camera.zUp) {
+                            verticalEye = camera.eye[2];
+                            verticalLook = camera.look[2];
+                        }
+                    }
+
+                    if (configs.followPointer) {
+                        const dolliedThroughSurface = panController.dollyToCanvasPos(followPointerWorldPos, states.pointerCanvasPos, -dollyDeltaForDist);
+                        if (dolliedThroughSurface) {
+                            states.followPointerDirty = true;
+                        }
+                    } else {
+                        camera.pan([0, 0, dollyDeltaForDist]);
+                        camera.ortho.scale = camera.ortho.scale - dollyDeltaForDist;
+                    }
+
+                    if (configs.constrainVertical) {
+                        const eye = camera.eye;
+                        const look = camera.look;
+                        if (camera.xUp) {
+                            eye[0] = verticalEye;
+                            look[0] = verticalLook;
+                        } else if (camera.yUp) {
+                            eye[1] = verticalEye;
+                            look[1] = verticalLook;
+                        } else if (camera.zUp) {
+                            eye[2] = verticalEye;
+                            look[2] = verticalLook;
+                        }
+                        camera.eye = eye;
+                        camera.look = look;
+                    }
+
+                } else if (configs.planView) {
+
+                    if (configs.followPointer) {
+                        const dolliedThroughSurface = panController.dollyToCanvasPos(followPointerWorldPos, states.pointerCanvasPos, -dollyDeltaForDist);
+                        if (dolliedThroughSurface) {
+                            states.followPointerDirty = true;
+                        }
+                    } else {
+                        camera.ortho.scale = camera.ortho.scale + dollyDeltaForDist;
+                        camera.zoom(dollyDeltaForDist);
+                    }
+
+                } else { // Orbiting
+
+                    if (configs.followPointer) {
+                        const dolliedThroughSurface = panController.dollyToCanvasPos(followPointerWorldPos, states.pointerCanvasPos, -dollyDeltaForDist);
+                        if (dolliedThroughSurface) {
+                            states.followPointerDirty = true;
+                        }
+                    } else {
+                        camera.ortho.scale = camera.ortho.scale + dollyDeltaForDist;
+                        camera.zoom(dollyDeltaForDist);
+                    }
+                }
+
+                updates.dollyDelta *= configs.dollyInertia;
+            }
+
+            pickController.fireEvents();
+
+            document.body.style.cursor = cursorType;
+        });
+    }
+
+
+    destroy() {
+        this._scene.off(this._onTick);
+    }
+}
+
+export {CameraUpdater};

package/src/viewer/scene/CameraControl/lib/controllers/PanController.js

@@ -0,0 +1,112 @@
+import {math} from "../../../math/math.js";
+
+const screenPos = math.vec4();
+const viewPos = math.vec4();
+
+const tempVec3a = math.vec3();
+const tempVec3b = math.vec3();
+const tempVec3c = math.vec3();
+
+const tempVec4a = math.vec4();
+const tempVec4b = math.vec4();
+const tempVec4c = math.vec4();
+
+/**
+ * @private
+ */
+class PanController {
+
+    constructor(scene) {
+        this._scene = scene;
+    }
+
+    /**
+     * Dollys the Camera towards the given target 2D canvas position.
+     *
+     * When the target's corresponding World-space position is also provided, then this function will also test if we've
+     * dollied past the target, and will return ````true```` if that's the case.
+     *
+     * @param [optionalTargetWorldPos] Optional world position of the target
+     * @param targetCanvasPos Canvas position of the target
+     * @param dollyDelta Amount to dolly
+     * @return True if optionalTargetWorldPos was given, and we've dollied past that position.
+     */
+    dollyToCanvasPos(optionalTargetWorldPos, targetCanvasPos, dollyDelta) {
+
+        let dolliedThroughSurface = false;
+
+        const camera = this._scene.camera;
+
+        if (optionalTargetWorldPos) {
+            const eyeToWorldPosVec = math.subVec3(optionalTargetWorldPos, camera.eye, tempVec3a);
+            const eyeWorldPosDist = math.lenVec3(eyeToWorldPosVec);
+            dolliedThroughSurface = (eyeWorldPosDist < dollyDelta);
+        }
+
+        if (camera.projection === "perspective") {
+
+            camera.ortho.scale = camera.ortho.scale - dollyDelta;
+
+            const unprojectedWorldPos = this._unproject(targetCanvasPos, tempVec4a);
+            const offset = math.subVec3(unprojectedWorldPos, camera.eye, tempVec4c);
+            const moveVec = math.mulVec3Scalar(math.normalizeVec3(offset), -dollyDelta, []);
+
+            camera.eye = [camera.eye[0] - moveVec[0], camera.eye[1] - moveVec[1], camera.eye[2] - moveVec[2]];
+            camera.look = [camera.look[0] - moveVec[0], camera.look[1] - moveVec[1], camera.look[2] - moveVec[2]];
+
+            if (optionalTargetWorldPos) {
+
+                // Subtle UX tweak - if we have a target World position, then set camera eye->look distance to
+                // the same distance as from eye->target. This just gives us a better position for look,
+                // if we subsequently orbit eye about look, so that we don't orbit a position that's
+                // suddenly a lot closer than the point we pivoted about on the surface of the last object
+                // that we click-drag-pivoted on.
+
+                const eyeTargetVec = math.subVec3(optionalTargetWorldPos, camera.eye, tempVec3a);
+                const lenEyeTargetVec = math.lenVec3(eyeTargetVec);
+                const eyeLookVec = math.mulVec3Scalar(math.normalizeVec3(math.subVec3(camera.look, camera.eye, tempVec3b)), lenEyeTargetVec);
+                camera.look = [camera.eye[0] + eyeLookVec[0], camera.eye[1] + eyeLookVec[1], camera.eye[2] + eyeLookVec[2]];
+            }
+
+        } else if (camera.projection === "ortho") {
+
+            // - set ortho scale, getting the unprojected targetCanvasPos before and after, get that difference in a vector;
+            // - get the vector in which we're dollying;
+            // - add both vectors to camera eye and look.
+
+            const worldPos1 = this._unproject(targetCanvasPos, tempVec4a);
+
+            camera.ortho.scale = camera.ortho.scale - dollyDelta;
+            camera.ortho._update(); // HACK
+
+            const worldPos2 = this._unproject(targetCanvasPos, tempVec4b);
+            const offset = math.subVec3(worldPos2, worldPos1, tempVec4c);
+            const eyeLookMoveVec = math.mulVec3Scalar(math.normalizeVec3(math.subVec3(camera.look, camera.eye, tempVec3a)), -dollyDelta, tempVec3b);
+            const moveVec = math.addVec3(offset, eyeLookMoveVec, tempVec3c);
+
+            camera.eye = [camera.eye[0] - moveVec[0], camera.eye[1] - moveVec[1], camera.eye[2] - moveVec[2]];
+            camera.look = [camera.look[0] - moveVec[0], camera.look[1] - moveVec[1], camera.look[2] - moveVec[2]];
+        }
+
+        return dolliedThroughSurface;
+    }
+
+    _unproject(canvasPos, worldPos) {
+
+        const camera = this._scene.camera;
+        const transposedProjectMat = camera.project.transposedMatrix;
+        const Pt3 = transposedProjectMat.subarray(8, 12);
+        const Pt4 = transposedProjectMat.subarray(12);
+        const D = [0, 0, -1.0, 1];
+        const screenZ = math.dotVec4(D, Pt3) / math.dotVec4(D, Pt4);
+
+        camera.project.unproject(canvasPos, screenZ, screenPos, viewPos, worldPos);
+
+        return worldPos;
+    }
+
+    destroy() {
+    }
+}
+
+export {PanController};

package/src/viewer/scene/CameraControl/lib/controllers/PickController.js

@@ -0,0 +1,264 @@
+import {math} from "../../../math/math.js";
+import {Scene} from "../../../scene/Scene.js";
+import {PickResult} from "../../../webgl/PickResult.js";
+
+const DEFAULT_SNAP_PICK_RADIUS = 45;
+const DEFAULT_SNAP_MODE = "vertex";
+
+/**
+ *
+ * @private
+ */
+class PickController {
+
+    constructor(cameraControl, configs) {
+        /**
+         * @type {Scene}
+         */
+        this._scene = cameraControl.scene;
+
+        this._cameraControl = cameraControl;
+
+        this._scene.canvas.canvas.oncontextmenu = function (e) {
+            e.preventDefault();
+        };
+
+        this._configs = configs;
+
+        /**
+         * Set true to schedule picking of an Entity.
+         * @type {boolean}
+         */
+        this.schedulePickEntity = false;
+
+        /**
+         * Set true to schedule picking of a position on teh surface of an Entity.
+         * @type {boolean}
+         */
+        this.schedulePickSurface = false;
+
+        /**
+         * Set true to schedule snap-picking with surface picking as a fallback - used for measurement.
+         * @type {boolean}
+         */
+        this.scheduleSnapOrPick = false;
+
+        /**
+         * The canvas position at which to do the next scheduled pick.
+         * @type {Number[]}
+         */
+        this.pickCursorPos = math.vec2();
+
+        /**
+         * Will be true after picking to indicate that something was picked.
+         * @type {boolean}
+         */
+        this.picked = false;
+
+        /**
+         * Will be true after picking to indicate that a position on the surface of an Entity was picked.
+         * @type {boolean}
+         */
+        this.pickedSurface = false;
+
+        /**
+         * Will hold the PickResult after after picking.
+         * @type {PickResult}
+         */
+        this.pickResult = null;
+
+        this._lastPickedEntityId = null;
+
+        this._needFireEvents = false;
+    }
+
+    /**
+     * Immediately attempts a pick, if scheduled.
+     */
+    update() {
+
+        if (!this._configs.pointerEnabled) {
+            return;
+        }
+
+        if (!this.schedulePickEntity && !this.schedulePickSurface) {
+            return;
+        }
+
+        this.picked = false;
+        this.pickedSurface = false;
+        this.snappedOrPicked = false;
+        this.hoveredSnappedOrSurfaceOff = false;
+
+        this._needFireEvents = false;
+
+        const hasHoverSurfaceSubs = this._cameraControl.hasSubs("hoverSurface");
+
+        if (this.scheduleSnapOrPick) {
+            const snapPickResult = this._scene.snapPick({
+                canvasPos: this.pickCursorPos,
+                snapRadius: this._configs.snapRadius,
+                snapMode: this._configs.snapMode,
+            });
+            if (snapPickResult && snapPickResult.snappedWorldPos) {
+                this.snapPickResult = snapPickResult;
+                this.snappedOrPicked = true;
+                this._needFireEvents = true;
+            } else {
+                this.schedulePickSurface = true; // Fallback
+                this.snapPickResult = null;
+            }
+        }
+
+        if (this.schedulePickSurface) {
+            if (this.pickResult && this.pickResult.worldPos) {
+                const pickResultCanvasPos = this.pickResult.canvasPos;
+                if (pickResultCanvasPos[0] === this.pickCursorPos[0] && pickResultCanvasPos[1] === this.pickCursorPos[1]) {
+                    this.picked = true;
+                    this.pickedSurface = true;
+                    this._needFireEvents = hasHoverSurfaceSubs;
+                    this.schedulePickEntity = false;
+                    this.schedulePickSurface = false;
+                    if (this.scheduleSnapOrPick) {
+                        this.snappedOrPicked = true;
+                    } else {
+                        this.hoveredSnappedOrSurfaceOff = true;
+                    }
+                    this.scheduleSnapOrPick = false;
+                    return;
+                }
+            }
+        }
+
+        if (this.schedulePickEntity) {
+            if (this.pickResult && (this.pickResult.canvasPos || this.pickResult.snappedCanvasPos)) {
+                const pickResultCanvasPos = this.pickResult.canvasPos || this.pickResult.snappedCanvasPos;
+                if (pickResultCanvasPos[0] === this.pickCursorPos[0] && pickResultCanvasPos[1] === this.pickCursorPos[1]) {
+                    this.picked = true;
+                    this.pickedSurface = false;
+                    this._needFireEvents = false;
+                    this.schedulePickEntity = false;
+                    this.schedulePickSurface = false;
+                    return;
+                }
+            }
+        }
+
+        if (this.schedulePickSurface || (this.scheduleSnapOrPick && !this.snapPickResult)) {
+            this.pickResult = this._scene.pick({
+                pickSurface: true,
+                pickSurfaceNormal: false,
+                canvasPos: this.pickCursorPos
+            });
+            if (this.pickResult) {
+                this.picked = true;
+                if (this.scheduleSnapOrPick) {
+                    this.snappedOrPicked = true;
+                } else {
+                    this.pickedSurface = true;
+                }
+                this._needFireEvents = true;
+            } else if (this.scheduleSnapOrPick) {
+                this.hoveredSnappedOrSurfaceOff = true;
+                this._needFireEvents = true;
+            }
+
+        } else { // schedulePickEntity == true
+
+            this.pickResult = this._scene.pick({
+                canvasPos: this.pickCursorPos
+            });
+
+            if (this.pickResult) {
+                this.picked = true;
+                this.pickedSurface = false;
+                this._needFireEvents = true;
+            }
+        }
+
+        this.scheduleSnapOrPick = false;
+        this.schedulePickEntity = false;
+        this.schedulePickSurface = false;
+    }
+
+    fireEvents() {
+
+        if (!this._needFireEvents) {
+            return;
+        }
+
+        if (this.hoveredSnappedOrSurfaceOff) {
+            this._cameraControl.fire("hoverSnapOrSurfaceOff", {
+                canvasPos: this.pickCursorPos
+            }, true);
+        }
+
+        if (this.snappedOrPicked) {
+            if (this.snapPickResult) {
+                const pickResult = new PickResult();
+                pickResult.worldPos = this.snapPickResult.snappedWorldPos;
+                pickResult.canvasPos = this.snapPickResult.snappedCanvasPos;
+                if (this._configs.snapMode === "vertex") {
+                    pickResult.snappedToVertex = true;
+                } else {
+                    pickResult.snappedToEdge = true;
+                }
+                this._cameraControl.fire("hoverSnapOrSurface", pickResult, true);
+                this.snapPickResult = null;
+            } else {
+                this._cameraControl.fire("hoverSnapOrSurface", this.pickResult, true);
+            }
+        } else {
+
+        }
+
+        if (this.picked && this.pickResult && (this.pickResult.entity || this.pickResult.worldPos)) {
+
+            if (this.pickResult.entity) {
+
+                const pickedEntityId = this.pickResult.entity.id;
+
+                if (this._lastPickedEntityId !== pickedEntityId) {
+
+                    if (this._lastPickedEntityId !== undefined) {
+                        this._cameraControl.fire("hoverOut", {
+                            entity: this._scene.objects[this._lastPickedEntityId]
+                        }, true);
+                    }
+
+                    this._cameraControl.fire("hoverEnter", this.pickResult, true);
+                    this._lastPickedEntityId = pickedEntityId;
+                }
+            }
+
+            this._cameraControl.fire("hover", this.pickResult, true);
+
+            if (this.pickResult.worldPos) {
+                this.pickedSurface = true;
+                this._cameraControl.fire("hoverSurface", this.pickResult, true);
+            }
+
+        } else {
+
+            if (this._lastPickedEntityId !== undefined) {
+                this._cameraControl.fire("hoverOut", {
+                    entity: this._scene.objects[this._lastPickedEntityId]
+                }, true);
+                this._lastPickedEntityId = undefined;
+            }
+
+            this._cameraControl.fire("hoverOff", {
+                canvasPos: this.pickCursorPos
+            }, true);
+        }
+
+        this.pickResult = null;
+
+        this._needFireEvents = false;
+    }
+
+    destroy() {
+    }
+}
+
+export {PickController};