@aibee/owlly 1.0.25 → 1.0.29

package/lib/owlly/controller/camera-controller.d.ts

@@ -0,0 +1,37 @@
+import { Controller } from './controller';
+import { CameraView } from '../view/camera-view';
+/**
+ * 相机元素控制器, 需要升级
+ */
+declare class CameraController extends Controller {
+    private enabled;
+    private view;
+    private target;
+    private mousePosition;
+    private mouseDownPosition;
+    private state;
+    private cameraInfoHolder;
+    private listeners;
+    private renderThisFrame;
+    /**
+     * @param view 需要绑定的View
+     */
+    constructor(view: CameraView);
+    private onPointerDown;
+    private onPointerUpOrLeave;
+    private onPointerMove;
+    /**
+     * 绑定视图
+     * @param view 需要绑定的CameraView
+     */
+    bindCameraView(view: CameraView): void;
+    unbind(): void;
+    /** @ignore */
+    update(): boolean;
+    /**
+     * 启用/禁用该控制器
+     * @param enabled 目标值
+     */
+    setEnabled(enabled: boolean): void;
+}
+export { CameraController };

package/lib/owlly/controller/camera-controller.js

@@ -0,0 +1,137 @@
+import { Externals } from '../stage/externals';
+import { Controller } from './controller';
+import { Events } from '../utils/events';
+/** @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 = {}));
+/**
+ * 相机元素控制器, 需要升级
+ */
+class CameraController extends Controller {
+    /**
+     * @param view 需要绑定的View
+     */
+    constructor(view) {
+        super();
+        this.enabled = false;
+        const { THREE } = Externals.getInstance();
+        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.bindCameraView(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;
+        const camera = this.view.getActiveCamera();
+        if (!camera)
+            return;
+        this.emit(Events.ELEMENT_POSE_UPDATED, camera.getQuaternion(), camera.getUUID());
+    }
+    onPointerMove(e) {
+        const { offsetX, offsetY } = e;
+        this.mousePosition.x = offsetX;
+        this.mousePosition.y = offsetY;
+        e.stopPropagation();
+        e.preventDefault();
+        const camera = this.view.getActiveCamera();
+        if (!camera)
+            return;
+        if (this.state === STATE.TO_MOVE_CAMERA) {
+            this.cameraInfoHolder.yaw = camera.getYaw();
+            this.cameraInfoHolder.pitch = camera.getPitch();
+            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.getAspect();
+            const vFov = camera.getFov();
+            const hFov = vFov * aspect;
+            const degreeX = diffX / width * vFov;
+            const degreeY = diffY / height * hFov;
+            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;
+            camera.setYaw(targetYaw);
+            camera.setPitch(targetPitch);
+            this.renderThisFrame = true;
+        }
+    }
+    /**
+     * 绑定视图
+     * @param view 需要绑定的CameraView
+     */
+    bindCameraView(view) {
+        if (!view.renderer) {
+            throw new Error('No Renderer found in view');
+        }
+        this.view = view;
+        this.target = view.renderer.domElement;
+        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 { CameraController };

package/lib/owlly/controller/controller.d.ts

@@ -0,0 +1,61 @@
+import { NS_THREE } from '../stage/externals';
+import { View } from '../view/view';
+import { Element } from '../element/element';
+import { EventHubClassic } from '../utils/event-hub';
+/**
+ * @ignore
+ */
+interface ListenerSet {
+    pointerdown(e: PointerEvent): void;
+    pointerup(e: PointerEvent): void;
+    pointerleave(e: PointerEvent): void;
+    pointermove(e: PointerEvent): void;
+}
+/**
+ * 控制器
+ */
+declare class Controller extends EventHubClassic {
+    constructor();
+    /**
+     * @deprecated
+     * 解除当前绑定的视图
+     */
+    unbind(): void;
+    dispose(): void;
+}
+interface Controller {
+    /**
+     * 绑定视图到当前控制器
+     * @param view 需要绑定的视图
+     */
+    bindView(view: View): void;
+    /**
+     * 解除当前绑定的视图
+     */
+    unbindView(): void;
+    /**
+     * @ignore
+     */
+    update(): boolean;
+    /**
+     * 绑定元素到当前控制器
+     * @param element 需要绑定的元素或元素数组
+     */
+    bindElement?(element: Element | Element[]): void;
+    /**
+     * 将目标元素解除绑定, 解除绑定的元素将不再被该控制器所管理
+     * @param element 需要解绑的元素或元素数组
+     */
+    unbindElement?(element: Element | Element[]): void;
+    /**
+     * 对于需要Scene的controller, 初始化时会传递scene
+     * @param scene 传入的Scene
+     */
+    initWithScene?(scene: NS_THREE.Scene): void;
+    /**
+     * 对于需要根据View变化的Controller, 使用该钩子函数进行处理
+     * @param view 当前view
+     */
+    renderingViewChanged?(view: View): void;
+}
+export { Controller, ListenerSet };

package/lib/owlly/controller/controller.js

@@ -0,0 +1,23 @@
+import { EventHubClassic } from '../utils/event-hub';
+import { Owlly } from '../stage/owlly';
+/**
+ * 控制器
+ */
+class Controller extends EventHubClassic {
+    constructor() {
+        super();
+        Owlly.GetSharedInstance().registerController(this);
+    }
+    /**
+     * @deprecated
+     * 解除当前绑定的视图
+     */
+    unbind() {
+        this.dispose();
+    }
+    dispose() {
+        this.eventMap.clear();
+        Owlly.GetSharedInstance().unregisterController(this);
+    }
+}
+export { Controller };

package/lib/owlly/controller/index.d.ts

@@ -0,0 +1,2 @@
+export * from './controller';
+export * from './basic-controller';

package/lib/owlly/controller/index.js

@@ -0,0 +1,13 @@
+export * from './controller';
+export * from './basic-controller';
+// 需要兼容的 Controller
+// export * from './panorama-controller';
+// export * from './transform-controller';
+// export * from './camera-controller';
+// export * from './mouse-indicator-controller';
+// export * from './aerial-element-controller';
+// 将被废弃的 Controller
+// export * from './orbit-control';
+// export * from './panorama-adjust-controller';
+// export * from './panorama-transform-controller';
+// export * from './plane-controller';

package/lib/owlly/controller/mouse-indicator-controller.d.ts

@@ -0,0 +1,34 @@
+import { NS_THREE } from '../stage/externals';
+import { Controller } from './controller';
+import { View } from '../view/view';
+import { FloorModel } from '../element/floor-model';
+/**
+ * 鼠标位置控制器, 用于展示鼠标位置, vr.aibee.cn
+ */
+declare class MouseIndicatorController extends Controller {
+    indicator: NS_THREE.Mesh;
+    indicatorUrl: string;
+    view: View;
+    target: FloorModel;
+    enabled: boolean;
+    scene: NS_THREE.Scene;
+    protected renderFrame: boolean;
+    protected mouseEventHandlers: {
+        onPointerMove: (ev: MouseEvent) => void;
+        onPointerEnter: (ev: MouseEvent) => void;
+        onPointerLeave: (ev: MouseEvent) => void;
+    };
+    constructor(indicatorUrl: string);
+    private onPointerEnter;
+    private onPointerLeave;
+    private onPointerMove;
+    initWithScene(scene: NS_THREE.Scene): void;
+    bindView(view: View): void;
+    unbind(): void;
+    update(): boolean;
+    setTarget(target: FloorModel): void;
+    setEnabled(enabled: boolean): void;
+    protected registerPointerEvents(dom: HTMLElement): void;
+    protected unregisterPointerEvents(dom: HTMLElement): void;
+}
+export { MouseIndicatorController };

package/lib/owlly/controller/mouse-indicator-controller.js

@@ -0,0 +1,118 @@
+import { Externals } from '../stage/externals';
+import { Controller } from './controller';
+/**
+ * 鼠标位置控制器, 用于展示鼠标位置, vr.aibee.cn
+ */
+class MouseIndicatorController extends Controller {
+    constructor(indicatorUrl) {
+        super();
+        this.indicatorUrl = indicatorUrl;
+        this.mouseEventHandlers = {
+            // onPointerDown: (e): void => { this.onPointerDown(e); },
+            onPointerMove: (e) => { this.onPointerMove(e); },
+            onPointerEnter: () => { this.onPointerEnter(); },
+            onPointerLeave: () => { this.onPointerLeave(); },
+        };
+        this.enabled = true;
+    }
+    onPointerEnter() {
+        if (!this.indicator)
+            return;
+        this.indicator.visible = true;
+        this.indicator.material.visible = true;
+    }
+    onPointerLeave() {
+        if (!this.indicator)
+            return;
+        this.indicator.visible = false;
+        this.indicator.material.visible = false;
+    }
+    onPointerMove(e) {
+        if (!this.enabled || !this.target || !this.view || !this.view.camera || !this.indicator)
+            return;
+        const { clientX, clientY } = e;
+        const { clientWidth, clientHeight } = this.view.container;
+        const { left: rectX, top: rectY } = this.view.container.getBoundingClientRect();
+        const x = clientX - rectX;
+        const y = clientY - rectY;
+        const { THREE } = Externals.getInstance();
+        const raycaster = new THREE.Raycaster();
+        raycaster.setFromCamera({ x: 2 * x / clientWidth - 1, y: 1 - 2 * y / clientHeight }, this.view.camera);
+        const result = this.target.intersectRay(raycaster.ray.origin, raycaster.ray.direction, true);
+        if (result && result.length) {
+            const target = result[0];
+            if (target.triangle) {
+                const plane = new THREE.Plane().setFromCoplanarPoints(target.triangle[0], target.triangle[1], target.triangle[2]);
+                this.indicator.position.copy(target.intersectionPoint);
+                this.indicator.lookAt(target.intersectionPoint.clone().add(plane.normal.clone()));
+                this.renderFrame = true;
+            }
+        }
+    }
+    initWithScene(scene) {
+        const { THREE } = Externals.getInstance();
+        const geometry = new THREE.PlaneBufferGeometry(0.3, 0.3);
+        const texture = new THREE.TextureLoader().load(this.indicatorUrl);
+        const material = new THREE.MeshBasicMaterial({
+            depthTest: false,
+            depthWrite: false,
+            map: texture,
+            side: THREE.DoubleSide,
+            transparent: true,
+            visible: false,
+        });
+        this.indicator = new THREE.Mesh(geometry, material);
+        this.indicator.renderOrder = 999;
+        this.indicator.visible = false;
+        scene.add(this.indicator);
+        this.scene = scene;
+        this.renderFrame = true;
+    }
+    bindView(view) {
+        if (!view.camera || !view.renderer) {
+            throw new Error('No Camera or Renderer found in view');
+        }
+        this.view = view;
+        this.registerPointerEvents(view.container);
+    }
+    unbind() {
+        super.unbind();
+        if (this.scene && this.indicator)
+            this.scene.remove(this.indicator);
+        this.unregisterPointerEvents(this.view.container);
+    }
+    update() {
+        const result = !!this.renderFrame;
+        this.renderFrame = false;
+        return result;
+    }
+    setTarget(target) {
+        this.target = target;
+    }
+    setEnabled(enabled) {
+        this.enabled = enabled;
+        if (this.view) {
+            if (enabled) {
+                this.registerPointerEvents(this.view.container);
+            }
+            else {
+                this.unregisterPointerEvents(this.view.container);
+            }
+        }
+    }
+    registerPointerEvents(dom) {
+        // dom.addEventListener('mousedown', this.mouseEventHandlers.onPointerDown);
+        dom.addEventListener('mousemove', this.mouseEventHandlers.onPointerMove);
+        dom.addEventListener('mouseenter', this.mouseEventHandlers.onPointerEnter);
+        dom.addEventListener('mouseleave', this.mouseEventHandlers.onPointerLeave);
+        // dom.addEventListener('mouseup', this.mouseEventHandlers.onPointerUp);
+    }
+    unregisterPointerEvents(dom) {
+        // dom.removeEventListener('mousedown', this.mouseEventHandlers.onPointerDown);
+        dom.removeEventListener('mousemove', this.mouseEventHandlers.onPointerMove);
+        dom.removeEventListener('mouseenter', this.mouseEventHandlers.onPointerEnter);
+        dom.removeEventListener('mouseleave', this.mouseEventHandlers.onPointerLeave);
+        // dom.removeEventListener('mouseup', this.mouseEventHandlers.onPointerUp);
+    }
+}
+export { MouseIndicatorController };

package/lib/owlly/controller/orbit-control.d.ts

@@ -0,0 +1,147 @@
+import { NS_THREE } from '../stage/externals';
+import { OrbitControls } from '../../external/orbit-controls';
+import { Controller } from './controller';
+import { View } from '../view/view';
+/**
+ * 使用Three.js OrbitControls实现的场景控制器
+ */
+declare class OrbitControl extends Controller {
+    controls: OrbitControls;
+    protected renderFrame: boolean | undefined;
+    private view;
+    private enabled;
+    private box;
+    private prevPosition;
+    /**
+     * @param view 需要绑定的View
+     */
+    constructor(view: View);
+    protected renderThisFrame(): void;
+    /**
+     * 绑定视图
+     * @param view 需要绑定的View
+     */
+    bindView(view: View): void;
+    unbind(): void;
+    /** @ignore */
+    update(): boolean;
+    /**
+     * 设置视图中心点位
+     * @param x x
+     * @param y y
+     */
+    setPosition(x: number, y: number): void;
+    /**
+     * 设置键盘控制启用
+     * @param value 是否启用键盘控制
+     */
+    setKeysEnabled(value: boolean): void;
+    /**
+     * 设置是否启用惯性
+     * @param value 开关值
+     */
+    setDampingEnabled(value: boolean): void;
+    /**
+     * 设置位移速度
+     * @param value 位移速度
+     */
+    setPanSpeed(value: number): void;
+    /**
+     * 设置是否启用旋转功能
+     * @param value 开关值
+     */
+    setRotateEnabled(value: boolean): void;
+    /**
+     * 设置是否启用平移功能
+     * @param value 开关值
+     */
+    setPanEnabled(value: boolean): void;
+    /**
+     * 设置是否启用缩放功能
+     * @param value 开关值
+     */
+    setZoomEnabled(value: boolean): void;
+    /**
+     * 设置是否启用该控制器
+     * @param value 开关值
+     */
+    setEnabled(value: boolean): void;
+    /**
+     * 设置惯性阻尼
+     * @param value 衰减值
+     */
+    setDampingFactor(value: number): void;
+    /**
+     * 设置触摸操作模式
+     * @param touches 触摸配置
+     */
+    setTouchControls(touches: {
+        ONE: NS_THREE.TOUCH;
+        TWO: NS_THREE.TOUCH;
+    }): void;
+    /**
+     * 设置鼠标操作模式
+     * @param mouseButtons 鼠标按键配置
+     */
+    setMouseControls(mouseButtons: {
+        LEFT: NS_THREE.MOUSE;
+        MIDDLE: NS_THREE.MOUSE;
+        RIGHT: NS_THREE.MOUSE;
+    }): void;
+    /**
+     * 设置控制中心点
+     * @param x 世界坐标X
+     * @param y 世界坐标Y
+     * @param z 世界坐标Z
+     */
+    setTarget(x: number, y: number, z: number): void;
+    /**
+     * 设置纵向转动范围, 最低为0, 最高为Math.PI
+     * @param min 纵向转动范围最小值
+     * @param max 纵向转动范围最大值
+     */
+    setPolarAngle(min: number, max: number): void;
+    /**
+     * 设置zoom范围
+     * @param min zoom最小值
+     * @param max zoom最大值
+     */
+    setZoomRange(min: number, max: number): void;
+    /**
+     * 设置横向转动范围, 最低为-Math.PI, 最高为Math.PI
+     * @param min 横向转动范围最小值
+     * @param max 横向转动范围最大值
+     */
+    setAzimuthAngle(min: number, max: number): void;
+    /**
+     * 获取相机缩放
+     */
+    getZoom(): number | null;
+    /**
+     * 设置相机缩放
+     * @param zoom 目标缩放值
+     */
+    setZoom(zoom: number): void;
+    /**
+     * 获得相机旋转
+     * @returns 当前相机的旋转, 单位为弧度
+     */
+    getCameraRotation(): number;
+    /**
+     * 设置相机的旋转
+     * @param radius 目标弧度
+     */
+    setCameraRotation(radius: number): void;
+    /**
+     * 设置相机姿态
+     * @param worldMatrix 相机的姿态矩阵
+     */
+    setCameraWorldMatrix(worldMatrix: number[]): void;
+    /**
+     * 设置旋转速度
+     * @param speed 速度, 默认为1, 不传值时为重置为默认值
+     */
+    setRotateSpeed(speed?: number): void;
+    setPositionRange(min: NS_THREE.Vector3, max: NS_THREE.Vector3): void;
+}
+export { OrbitControl };