@aibee/owlly 1.0.25 → 1.0.29

package/lib/owlly/controller/orbit-control.js

@@ -0,0 +1,264 @@
+import { Externals } from '../stage/externals';
+import { OrbitControls } from '../../external/orbit-controls';
+import { Events } from '../utils/events';
+import { Controller } from './controller';
+/**
+ * 使用Three.js OrbitControls实现的场景控制器
+ */
+class OrbitControl extends Controller {
+    /**
+     * @param view 需要绑定的View
+     */
+    constructor(view) {
+        super();
+        const { THREE } = Externals.getInstance();
+        if (view)
+            this.bindView(view);
+        this.enabled = true;
+        this.prevPosition = new THREE.Vector3();
+    }
+    renderThisFrame() {
+        if (!this.renderFrame) {
+            this.renderFrame = true;
+        }
+    }
+    /**
+     * 绑定视图
+     * @param view 需要绑定的View
+     */
+    bindView(view) {
+        if (!view.camera || !view.renderer) {
+            throw new Error('No Camera or Renderer found in view');
+        }
+        this.view = view;
+        this.controls = new OrbitControls(view.camera, view.container);
+        this.controls.addEventListener('start', () => { this.renderThisFrame(); });
+        this.controls.addEventListener('end', () => { this.renderThisFrame(); });
+        this.controls.addEventListener('change', () => {
+            this.emit(Events.ORBIT_CAMERA_CHANGED, view.camera.position, view.camera.quaternion, this);
+            if (this.box && !this.box.containsPoint(view.camera.position)) {
+                const position = view.camera.position.clone();
+                position.set(Math.max(this.box.min.x + 1, Math.min(position.x, this.box.max.x - 1)), Math.max(this.box.min.y + 1, Math.min(position.y, this.box.max.y - 1)), Math.max(this.box.min.z + 1, Math.min(position.z, this.box.max.z - 1)));
+                if (this.prevPosition.distanceToSquared(position) > 0.01) {
+                    this.prevPosition.copy(position);
+                }
+                this.setPosition(this.prevPosition.x, this.prevPosition.y);
+            }
+            this.renderThisFrame();
+        });
+        this.controls.update();
+    }
+    unbind() {
+        super.unbind();
+        this.controls.dispose();
+    }
+    /** @ignore */
+    update() {
+        this.controls.update();
+        const { renderFrame } = this;
+        this.renderFrame = undefined;
+        return !!renderFrame;
+    }
+    /**
+     * 设置视图中心点位
+     * @param x x
+     * @param y y
+     */
+    setPosition(x, y) {
+        const angle = this.controls.getAzimuthalAngle();
+        this.controls.object.position.set(x, y, this.controls.object.position.z);
+        this.controls.target.set(x, y, this.controls.target.z);
+        this.controls.update();
+        this.setCameraRotation(angle);
+    }
+    /**
+     * 设置键盘控制启用
+     * @param value 是否启用键盘控制
+     */
+    setKeysEnabled(value) {
+        this.controls.enableKeys = value;
+    }
+    /**
+     * 设置是否启用惯性
+     * @param value 开关值
+     */
+    setDampingEnabled(value) {
+        this.controls.enableDamping = value;
+    }
+    /**
+     * 设置位移速度
+     * @param value 位移速度
+     */
+    setPanSpeed(value) {
+        this.controls.panSpeed = value;
+    }
+    /**
+     * 设置是否启用旋转功能
+     * @param value 开关值
+     */
+    setRotateEnabled(value) {
+        this.controls.enableRotate = value;
+    }
+    /**
+     * 设置是否启用平移功能
+     * @param value 开关值
+     */
+    setPanEnabled(value) {
+        this.controls.enablePan = value;
+    }
+    /**
+     * 设置是否启用缩放功能
+     * @param value 开关值
+     */
+    setZoomEnabled(value) {
+        this.controls.enableZoom = value;
+    }
+    /**
+     * 设置是否启用该控制器
+     * @param value 开关值
+     */
+    setEnabled(value) {
+        if (this.enabled === value)
+            return;
+        this.enabled = value;
+        this.controls.enabled = this.enabled;
+    }
+    /**
+     * 设置惯性阻尼
+     * @param value 衰减值
+     */
+    setDampingFactor(value) {
+        this.controls.dampingFactor = value;
+    }
+    /**
+     * 设置触摸操作模式
+     * @param touches 触摸配置
+     */
+    setTouchControls(touches) {
+        this.controls.touches = touches;
+    }
+    /**
+     * 设置鼠标操作模式
+     * @param mouseButtons 鼠标按键配置
+     */
+    setMouseControls(mouseButtons) {
+        this.controls.mouseButtons = mouseButtons;
+    }
+    /**
+     * 设置控制中心点
+     * @param x 世界坐标X
+     * @param y 世界坐标Y
+     * @param z 世界坐标Z
+     */
+    setTarget(x, y, z) {
+        this.controls.target.set(x, y, z);
+        this.controls.update();
+    }
+    /**
+     * 设置纵向转动范围, 最低为0, 最高为Math.PI
+     * @param min 纵向转动范围最小值
+     * @param max 纵向转动范围最大值
+     */
+    setPolarAngle(min, max) {
+        this.controls.minPolarAngle = min;
+        this.controls.maxPolarAngle = max;
+    }
+    /**
+     * 设置zoom范围
+     * @param min zoom最小值
+     * @param max zoom最大值
+     */
+    setZoomRange(min, max) {
+        this.controls.minZoom = min;
+        this.controls.maxZoom = max;
+    }
+    /**
+     * 设置横向转动范围, 最低为-Math.PI, 最高为Math.PI
+     * @param min 横向转动范围最小值
+     * @param max 横向转动范围最大值
+     */
+    setAzimuthAngle(min, max) {
+        this.controls.minAzimuthAngle = min;
+        this.controls.maxAzimuthAngle = max;
+    }
+    /**
+     * 获取相机缩放
+     */
+    getZoom() {
+        const { THREE } = Externals.getInstance();
+        if (this.view.camera instanceof THREE.PerspectiveCamera
+            || this.view.camera instanceof THREE.OrthographicCamera)
+            return this.view.camera.zoom;
+        return null;
+    }
+    /**
+     * 设置相机缩放
+     * @param zoom 目标缩放值
+     */
+    setZoom(zoom) {
+        const { THREE } = Externals.getInstance();
+        if (!(this.view.camera instanceof THREE.PerspectiveCamera)
+            && !(this.view.camera instanceof THREE.OrthographicCamera))
+            throw new Error('Cannot set zoom for camera');
+        this.view.camera.zoom = zoom;
+        this.view.camera.updateProjectionMatrix();
+        this.renderFrame = true;
+    }
+    /**
+     * 获得相机旋转
+     * @returns 当前相机的旋转, 单位为弧度
+     */
+    getCameraRotation() {
+        return this.controls.getAzimuthalAngle();
+    }
+    /**
+     * 设置相机的旋转
+     * @param radius 目标弧度
+     */
+    setCameraRotation(radius) {
+        const { minAzimuthAngle, maxAzimuthAngle } = this.controls;
+        this.setAzimuthAngle(radius, radius + 0.000001);
+        this.controls.update();
+        this.setAzimuthAngle(minAzimuthAngle, maxAzimuthAngle);
+        this.controls.update();
+        this.renderThisFrame();
+    }
+    /**
+     * 设置相机姿态
+     * @param worldMatrix 相机的姿态矩阵
+     */
+    setCameraWorldMatrix(worldMatrix) {
+        if (!this.view.camera)
+            throw Error('Cannot set camera matrix to no-camera view.');
+        this.view.camera.matrixAutoUpdate = false;
+        const { THREE } = Externals.getInstance();
+        const position = new THREE.Vector3();
+        const scale = new THREE.Vector3();
+        const quaternion = new THREE.Quaternion();
+        const lookDistance = this.controls.object.position.distanceTo(this.controls.target);
+        new THREE.Matrix4().fromArray(worldMatrix).decompose(position, quaternion, scale);
+        this.view.camera.position.copy(position);
+        this.view.camera.scale.copy(scale);
+        this.view.camera.quaternion.copy(quaternion);
+        this.view.camera.updateMatrixWorld(true);
+        const lookVector = this.view.camera.getWorldDirection(new THREE.Vector3(0, 0, -1));
+        this.controls.target.copy(position.clone().add(lookVector.multiplyScalar(lookDistance)));
+        this.view.camera.matrixAutoUpdate = true;
+        const targetAngle = new THREE.Euler().setFromQuaternion(quaternion).z;
+        this.setCameraRotation(targetAngle);
+    }
+    /**
+     * 设置旋转速度
+     * @param speed 速度, 默认为1, 不传值时为重置为默认值
+     */
+    setRotateSpeed(speed = 1) {
+        if (!this.controls)
+            return;
+        this.controls.rotateSpeed = speed;
+    }
+    setPositionRange(min, max) {
+        const { THREE } = Externals.getInstance();
+        this.box = new THREE.Box3(min, max);
+    }
+}
+export { OrbitControl };

package/lib/owlly/controller/panorama-adjust-controller.d.ts

@@ -0,0 +1,45 @@
+import { Controller } from './controller';
+import { Panorama } from '../element/panorama';
+import { View } from '../view/view';
+/**
+ * 全景图矫正控制器, 暂不使用
+ * @ignore
+ */
+declare class PanoramaAdjustController extends Controller {
+    private enabled;
+    private view;
+    private target;
+    private mousePosition;
+    private mouseDownPosition;
+    private state;
+    private cameraInfoHolder;
+    private listeners;
+    private renderThisFrame;
+    private activePanorama?;
+    /**
+     * @param view 需要绑定的View
+     */
+    constructor(view: View);
+    private onPointerDown;
+    private onPointerUpOrLeave;
+    private onPointerMove;
+    /**
+     * 绑定视图
+     * @param view 需要绑定的CameraView
+     */
+    bindView(view: View): void;
+    /**
+     * 绑定全景图元素
+     * @param element 设定控制器控制的全景图元素, 类型需要为Panorama
+     */
+    bindElement(element: Panorama): void;
+    unbind(): void;
+    /** @ignore */
+    update(): boolean;
+    /**
+     * 启用/禁用该控制器
+     * @param enabled 目标值
+     */
+    setEnabled(enabled: boolean): void;
+}
+export { PanoramaAdjustController };

package/lib/owlly/controller/panorama-adjust-controller.js

@@ -0,0 +1,157 @@
+import { Externals } from '../stage/externals';
+import { Controller } from './controller';
+import { Camera } from '../utils/camera';
+/** @ignore */
+var STATE;
+(function (STATE) {
+    STATE[STATE["IDLE"] = 0] = "IDLE";
+    STATE[STATE["TO_MOVE_CAMERA"] = 1] = "TO_MOVE_CAMERA";
+    STATE[STATE["MOVE_CAMERA"] = 2] = "MOVE_CAMERA";
+})(STATE || (STATE = {}));
+/**
+ * 全景图矫正控制器, 暂不使用
+ * @ignore
+ */
+class PanoramaAdjustController extends Controller {
+    /**
+     * @param view 需要绑定的View
+     */
+    constructor(view) {
+        super();
+        const { THREE } = Externals.getInstance();
+        this.enabled = false;
+        this.mousePosition = new THREE.Vector2();
+        this.mouseDownPosition = new THREE.Vector2();
+        this.state = STATE.IDLE;
+        this.cameraInfoHolder = {};
+        this.renderThisFrame = false;
+        this.listeners = {
+            pointerdown: (e) => { this.onPointerDown(e); },
+            pointerup: () => { this.onPointerUpOrLeave(); },
+            pointerleave: () => { this.onPointerUpOrLeave(); },
+            pointermove: (e) => { this.onPointerMove(e); },
+        };
+        if (view)
+            this.bindView(view);
+    }
+    onPointerDown(e) {
+        const { offsetX, offsetY, button } = e;
+        if (button !== 0)
+            return;
+        this.mouseDownPosition.x = offsetX;
+        this.mouseDownPosition.y = offsetY;
+        e.stopPropagation();
+        e.preventDefault();
+        if (this.state !== STATE.IDLE)
+            return;
+        this.state = STATE.TO_MOVE_CAMERA;
+    }
+    onPointerUpOrLeave() {
+        if (this.state === STATE.IDLE)
+            return;
+        this.state = STATE.IDLE;
+    }
+    onPointerMove(e) {
+        const { offsetX, offsetY } = e;
+        this.mousePosition.x = offsetX;
+        this.mousePosition.y = offsetY;
+        e.stopPropagation();
+        e.preventDefault();
+        const camera = this.view.camera;
+        if (!camera)
+            return;
+        const { THREE } = Externals.getInstance();
+        if (this.state === STATE.TO_MOVE_CAMERA) {
+            const v = camera.getWorldDirection(new THREE.Vector3(0, 0, -1));
+            const { yaw, pitch } = Camera.getYawPitchFromCameraLookVector(v);
+            this.cameraInfoHolder.yaw = yaw;
+            this.cameraInfoHolder.pitch = pitch;
+            this.state = STATE.MOVE_CAMERA;
+        }
+        if (this.state === STATE.MOVE_CAMERA) {
+            const { width, height } = this.target.getBoundingClientRect();
+            const diffX = this.mousePosition.x - this.mouseDownPosition.x;
+            const diffY = this.mousePosition.y - this.mouseDownPosition.y;
+            const { aspect } = camera;
+            const vFov = camera.fov;
+            const hFov = vFov * aspect;
+            const degreeX = diffX / width * hFov;
+            const degreeY = diffY / height * vFov;
+            const { yaw, pitch } = this.cameraInfoHolder;
+            let targetPitch = parseFloat((pitch + degreeY).toFixed(2));
+            if (Math.abs(targetPitch) > 89.99)
+                targetPitch = Math.sign(targetPitch) * 89.99;
+            let targetYaw = parseFloat(((yaw + degreeX + 360) % 360).toFixed(2));
+            if (targetYaw > 360 || targetYaw < 0)
+                targetYaw = 0;
+            const { position } = Camera.getCameraLookAtPositionByYawPitch(camera.position.clone(), targetYaw, targetPitch);
+            camera.lookAt(position);
+            camera.updateProjectionMatrix();
+            this.renderThisFrame = true;
+        }
+    }
+    /**
+     * 绑定视图
+     * @param view 需要绑定的CameraView
+     */
+    bindView(view) {
+        if (!view.camera || !view.renderer) {
+            throw new Error('No Renderer or Camera found in view');
+        }
+        const { THREE } = Externals.getInstance();
+        if (!(view.camera instanceof THREE.PerspectiveCamera)) {
+            throw new Error('PanoramaAdjustController only works with views with PerspectiveCamera');
+        }
+        this.view = view;
+        this.target = view.renderer.domElement;
+        if (this.activePanorama) {
+            this.bindElement(this.activePanorama);
+            this.setEnabled(true);
+        }
+    }
+    /**
+     * 绑定全景图元素
+     * @param element 设定控制器控制的全景图元素, 类型需要为Panorama
+     */
+    bindElement(element) {
+        this.activePanorama = element;
+        const { x, y, z } = this.activePanorama.position.clone();
+        if (this.view)
+            this.view.camera.position.set(x, y, z);
+        this.renderThisFrame = true;
+        this.setEnabled(true);
+    }
+    unbind() {
+        super.unbind();
+        this.setEnabled(false);
+    }
+    /** @ignore */
+    update() {
+        let result = true;
+        if (!this.enabled || !this.renderThisFrame)
+            result = false;
+        this.renderThisFrame = false;
+        return result;
+    }
+    /**
+     * 启用/禁用该控制器
+     * @param enabled 目标值
+     */
+    setEnabled(enabled) {
+        if (!this.target)
+            return;
+        this.enabled = enabled;
+        if (enabled) {
+            Object.entries(this.listeners).forEach(([e, callback]) => {
+                this.target.addEventListener(e, callback);
+            });
+            this.renderThisFrame = true;
+        }
+        else {
+            Object.entries(this.listeners).forEach(([e, callback]) => {
+                this.target.removeEventListener(e, callback);
+            });
+        }
+    }
+}
+export { PanoramaAdjustController };