@realsee/dnalogel 2.0.0-alpha.6 → 2.0.0-alpha.9

package/CHANGELOG.md

@@ -14,3 +14,17 @@
 - 2.fix: TopviewFloorplanPlugin && ModelFloorplanPlugin 插件小雷达位置显示不正确问题；
 - 3.feat: 为 TopviewFloorplanPlugin && ModelFloorplanPlugin 插件新增线框图吸附位置配置选项。 
   - 可选地板、天花板、模型中心，默认吸附选项为模型中心。
+
+## 2.0.0-alpha.7
+- 1.fix: PanoCompassPlugin 向下兼容；
+- 2.feat: 新增 PC 全景测量插件：PanoMeasurePlugin；
+- 3.docs: 修改 README.md；
+
+## 2.0.0-alpha.8
+- 1.fix: 修复 ModelViewPlugin 实景 VR 模型不居中问题；
+- 2.fix: 修复 ModelRoomLabelPlugin fov 更新未 rerender 问题；
+- 2.fix: 修复 ModelRoomLabelPlugin enable 判断问题；
+- 4.fix: 修改 ModelFloorplanPlugin 在全景态满足户型图的俯仰角时会自动切换户型图问题。
+
+## 2.0.0-alpha.9
+- 1.refactor: 增加插件独立 js 输出及对 svelte 的编译。

package/README.md

@@ -1,11 +1,50 @@
 # 注意
+2.x 版本依赖 `svelte`， 使用时请同时安装 
+```bash
+npm install svelte 
+```
 
+# 如视 -- "Dnalogel"
 
-此版本为 **测试** 版本， 不推荐使用。
+[如视(realsee.com)](https://realsee.com) 提供了在浏览器环境中的渲染三维空间 [VR 看房 SDK Five](https://open-platform.realsee.com/developer/docs/front/3d-space/get-started/rendering-engine/) 。
+通过 [如视开放 API](https://open-platform.realsee.com/developer/open/api/#/) 并结合 Five 的渲染能力可以制作丰富多彩的三维空间应用。
 
-如您有插件使用需求，请安装 1.x 版本。
+除了 Five 强大的三维空间渲染能力之外，我们也积累了大量的 **VR 看房** 常用功能，并以 `Five Plugins` 的形式进行抽象。
 
-此版本依赖 `svelte`， 使用时请同时安装 
-```bash
-npm install svelte 
+无论是经过线上环境千锤百炼的刚需功能，还是灵感一现的炫酷尝试，凡是最终落地的功能我们均毫无保留的开源至 github [realsee-developer](https://github.com/realsee-developer) 空间。
+
+如果插件满足您的需求，`npm install @realsee/dnalogel`一键安装使用。
+
+如果不满足需求，没关系，把我们当作代码示例，我们抛砖引玉。
+
+我们也很期待您基于 [Three.js](https://threejs.org/) 、[Five.js](https://www.npmjs.com/package/@realsee/five) 等这类渲染库做出有意思的功能。
+
+
+### 插件列表
+- ModelViewPlugin：模型小窗插件
+- PanoFloorplanRadarPlugin：全景户型雷达图插件
+- ModelRoomLabelPlugin：模型态房屋标签插件
+- TopviewFloorplanPlugin：俯视模型户型图插件
+- ModelChassisCompassPlugin：模型底盘指南针插件
+- ModelEntryDoorGuidePlugin：模型入户门引导插件
+- CSS3DRenderPlugin：CSS3D渲染插件
+- CameraMovementPlugin：相机运镜插件
+- ModelFloorplanPlugin：模型户型图插件
+- PanoRulerPlugin：全景标尺插件
+- PanoCompassPlugin：全景指南针插件
+- ... 待补充
+
+### 使用方式
+
+```js
+import { Five } from '@realsee/five'
+import Plugin from '@realsee/dnalogel/plugins/Plugin'
+const five = new Five({
+  plugins: [[Plugin, 'PluginName', initOptions]],
+})
+
+// 不同插件提供的方法可能存在差异,请参考各插件 API 文档
+five.plugins.PluginName.load(data)
+five.plugins.PluginName.enable()
+five.plugins.PluginName.disable()
 ```

package/dist/CSS3DRenderPlugin/index.d.ts

@@ -0,0 +1,49 @@
+import { FivePlugin } from '@realsee/five';
+import { Vector3 } from 'three';
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { Vector3Position } from '../typings/math.type';
+export declare type CSS3DRenderPluginParameterType = undefined;
+export interface CSS3DRenderPluginExportType {
+    /**
+     * @description: 根据传入的四个点位创建一个3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+     * @param {Five} five
+     * @param {Vector3[] | Vector3Position[]} points: 矩形四个点坐标
+     * @param {number} config.ratio: 1px对应多少米，默认为 0.002，即1px对应2mm
+     * @param {number} config.dpr: dpr, 默认为1
+     * @param {HTMLElement} config.container: HTMLElement
+     * @param {number} config.autoRender: 默认为true，如果需要手动render则传false
+     * @param {'front' | 'behind'} config.mode: 两种模式
+     * @param {HTMLElement} config.behindFiveContainer: 如果config.mode为'behind'，需要传入容器，并确保此容器位five下方，且中间没有其他dom元素遮挡
+     * @return {{ container: HTMLElement; dispose: () => void }}: container: dom容器, dispose: 清理函数
+     */
+    create3DDomContainer: (points: Vector3[] | Vector3Position[], config?: {
+        ratio?: number;
+        dpr?: number;
+        autoRender?: boolean;
+        container?: HTMLElement;
+        [key: string]: any;
+    } & ({
+        mode?: 'front';
+    } | {
+        mode: 'behind';
+        behindFiveContainer: HTMLElement;
+    })) => {
+        container: HTMLElement;
+        dispose: () => void;
+        css3DObject: CSS3DObject;
+        render?: () => void;
+    } | void;
+    /**
+     * @description: 销毁所有的渲染内容
+     * @return {void}
+     */
+    disposeAll: () => void;
+}
+/**
+ * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
+ * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
+ *
+ * @returns
+ */
+export declare const CSS3DRenderPlugin: FivePlugin<CSS3DRenderPluginParameterType, CSS3DRenderPluginExportType>;
+export default CSS3DRenderPlugin;

package/dist/CSS3DRenderPlugin/index.js

@@ -0,0 +1,233 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var THREE = require('three');
+var CSS3DRenderer = require('three/examples/jsm/renderers/CSS3DRenderer');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+
+function evenNumber(num, config) {
+    const roundNum = Math.round(num);
+    return roundNum % 2 === 0 ? roundNum : roundNum + Number(config?.smaller ? -1 : 1);
+}
+
+function centerPoint(point1, point2) {
+    return new THREE.Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
+}
+
+const transformPositionToVector3 = ({ x, y, z }) => new THREE.Vector3(x, y, z);
+
+/**
+ * @description: 究极简陋的 ResizeObserver polyfill
+ */
+function createResizeObserver(func, element) {
+    if (!element || typeof ResizeObserver === 'undefined') {
+        return {
+            observe: () => window.addEventListener('resize', func),
+            unobserve: () => window.removeEventListener('resize', func),
+        };
+    }
+    else {
+        const observer = new ResizeObserver(func);
+        return {
+            observe: () => observer.observe(element),
+            unobserve: () => observer.unobserve(element),
+        };
+    }
+}
+
+/**
+ * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
+ * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
+ *
+ * @returns
+ */
+const CSS3DRenderPlugin = (five) => {
+    const state = { disposeCallbacks: [] };
+    const create3DDomContainer = (...params) => {
+        const points = params[0].map((point) => (point instanceof THREE.Vector3 ? point : transformPositionToVector3(point)));
+        const config = params[1];
+        if (points?.length < 4)
+            return console.error('points must be equal or greater than than 4');
+        if (!five?.model?.loaded)
+            return console.error('five.model.loaded is: ', five?.model?.loaded);
+        const fiveElement = five.getElement();
+        if (!fiveElement)
+            return console.error('five.getElement() is ' + fiveElement);
+        const disposers = [];
+        const ratio = config?.ratio || 0.00216;
+        if (ratio <= 0.00215)
+            console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
+        const dpr = config?.dpr || 1;
+        const mode = config?.mode || 'front';
+        const autoRender = config?.autoRender ?? true;
+        const behindFiveContainer = config?.behindFiveContainer || fiveElement.parentElement || document.body;
+        const container = config?.container || document.createElement('div');
+        container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin');
+        // 获取css3DObject, 如果mode为behind的话，一起获取mesh
+        const { css3DObject, mesh } = createObject(points, { ratio, dpr, container, mode });
+        // ======= INIT START =======
+        let resizeObserver;
+        const frontModeUnInited = mode === 'front' && !state.frontMode;
+        const behindModeUnInited = mode === 'behind' && !state.behindMode;
+        const inited = !(frontModeUnInited || behindModeUnInited);
+        let stopRenderFlag = false;
+        let requestAnimationFrameId = null;
+        if (behindModeUnInited) {
+            state.behindMode = { scene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+        }
+        if (frontModeUnInited) {
+            state.frontMode = { scene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+        }
+        const { scene, css3DRenderer } = mode === 'behind' ? state.behindMode : state.frontMode;
+        const render = (() => {
+            if (!inited) {
+                const css3DRendererSetSize = () => {
+                    // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
+                    // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
+                    const rendererWidth = evenNumber(fiveElement.clientWidth, { smaller: true });
+                    const rendererHeight = evenNumber(fiveElement.clientHeight, { smaller: true });
+                    css3DRenderer.setSize(rendererWidth, rendererHeight);
+                };
+                css3DRendererSetSize();
+                resizeObserver = createResizeObserver(css3DRendererSetSize, fiveElement);
+                css3DRenderer.domElement.style.position = 'absolute';
+                css3DRenderer.domElement.style.top = '0';
+                css3DRenderer.domElement.style.userSelect = 'none';
+                css3DRenderer.domElement.style.pointerEvents = 'none';
+                const renderEveryFrame = () => {
+                    if (stopRenderFlag)
+                        return;
+                    requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+                    css3DRenderer.render(scene, five.camera);
+                };
+                return () => {
+                    scene.add(css3DObject);
+                    resizeObserver?.observe?.();
+                    renderEveryFrame();
+                    if (mode === 'behind' && mesh) {
+                        five.scene.add(mesh);
+                        disposers.push(() => mesh && five.scene.remove(mesh));
+                    }
+                };
+            }
+            else {
+                return () => {
+                    scene.add(css3DObject);
+                };
+            }
+        })();
+        if (frontModeUnInited) {
+            const wrapper = fiveElement.parentElement || document.body;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        if (behindModeUnInited) {
+            const wrapper = behindFiveContainer;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        // ======= INIT END =======
+        const dispose = () => {
+            stopRenderFlag = true;
+            disposers.forEach((d) => d?.());
+            scene.remove(css3DObject);
+            if (typeof requestAnimationFrameId === 'number')
+                cancelAnimationFrame(requestAnimationFrameId);
+            if (scene.children.length === 0) {
+                css3DRenderer.domElement.remove();
+                if (mode === 'front')
+                    state.frontMode = undefined;
+                if (mode === 'behind')
+                    state.behindMode = undefined;
+                if (!state.behindMode && !state.frontMode) {
+                    resizeObserver?.unobserve?.();
+                }
+            }
+            return true;
+        };
+        const idx = state.disposeCallbacks.findIndex((item) => item === dispose);
+        if (idx !== -1) {
+            state.disposeCallbacks.splice(idx, 1);
+        }
+        else {
+            state.disposeCallbacks.push(dispose);
+        }
+        if (autoRender)
+            render();
+        return { container, dispose, css3DObject, render: autoRender ? undefined : render };
+    };
+    const createObject = (points, config) => {
+        const { ratio, dpr, container: element, mode } = config;
+        const planeWidth = points[0].distanceTo(points[1]);
+        const planeHeight = points[1].distanceTo(points[2]);
+        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
+        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
+        const css3DObject = new CSS3DRenderer.CSS3DObject(element);
+        css3DObject.scale.set(ratio, ratio, ratio);
+        element.style.width = domWidthPx + 'px';
+        element.style.height = domHeightPx + 'px';
+        element.style.pointerEvents = 'none';
+        const centerPosition = centerPoint(points[0], points[2]);
+        const vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
+        const vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
+        // 旋转
+        const rotateXAngle = new THREE.Vector3(0, 1, 0).angleTo(new THREE.Vector3(0, vector12.y, vector12.z));
+        const rotateYAngle = new THREE.Vector3(1, 0, 0).angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
+        const rotateZAngle = vector01.angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
+        /**
+         * [0,1,0] => [0,0,1]  为rolate Worldx正方向
+         * [0,0,1] => [0,1,0]  为rolate Worldy正方向
+         * [0,1,1] => [-1,0,0] 为rolate Worldz正方向
+         */
+        const rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
+        const rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
+        const rotateZ = ((vector01.x > 0 && vector01.y < 0) || (vector01.x < 0 && vector01.y > 0) ? -1 : 1) * rotateZAngle;
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), rotateX); // x
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), rotateY); // y
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), rotateZ); // z
+        css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+        let mesh;
+        if (mode === 'behind') {
+            const material = new THREE__namespace.MeshBasicMaterial({
+                opacity: 0,
+                transparent: false,
+                side: THREE__namespace.DoubleSide,
+            });
+            const geometry = new THREE__namespace.PlaneGeometry(domWidthPx, domHeightPx);
+            mesh = new THREE__namespace.Mesh(geometry, material);
+            mesh.name = 'CSS3DRenderPlugin-mesh';
+            mesh.position.copy(css3DObject.position);
+            mesh.rotation.copy(css3DObject.rotation);
+            mesh.scale.copy(css3DObject.scale);
+        }
+        return { css3DObject, mesh };
+    };
+    return {
+        create3DDomContainer,
+        disposeAll: () => {
+            state.disposeCallbacks.forEach((d) => d?.());
+            state.disposeCallbacks = [];
+        },
+    };
+};
+
+exports.CSS3DRenderPlugin = CSS3DRenderPlugin;
+exports["default"] = CSS3DRenderPlugin;

package/dist/CSS3DRenderPlugin/utils/createResizeObserver.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description: 究极简陋的 ResizeObserver polyfill
+ */
+export default function createResizeObserver(func: () => any, element?: HTMLElement): {
+    observe: () => void;
+    unobserve: () => void;
+};

package/dist/CameraMovementPlugin/index.d.ts

@@ -0,0 +1,7 @@
+import type { FivePlugin } from '@realsee/five';
+import { CameraMovementPluginExportType, CameraMovementPluginParameterType } from './typing';
+/**
+ * **运镜插件** 模拟类似于电影运镜效果。
+ */
+export declare const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType, CameraMovementPluginExportType>;
+export default CameraMovementPlugin;

package/dist/CameraMovementPlugin/index.js

@@ -0,0 +1,302 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var five = require('@realsee/five');
+var TWEEN = require('@tweenjs/tween.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var TWEEN__namespace = /*#__PURE__*/_interopNamespace(TWEEN);
+
+const _requestAnimationFrame = window.requestAnimationFrame || ((fn) => setTimeout(fn, 16));
+const _cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+function nextFrame(fn, delay = 0) {
+    if (delay <= 0)
+        _requestAnimationFrame(fn);
+    else
+        _requestAnimationFrame(() => nextFrame(fn, delay - 1));
+}
+/**
+ * 在每个 AnimationFrame 中调用传入的函数
+ * @param callback 每次 AnimationFrame 中调用的函数
+ * @param frame 每秒运行多少次
+ * @returns 返回一个函数，调用可以停止 AnimationFrameLoop
+ */
+function requestAnimationFrameInterval(callback, frame = 60) {
+    let index = -1;
+    let oldTime = 0;
+    let startTime = -1;
+    const minDeltaTime = 1000 / frame;
+    function loop(time) {
+        startTime === -1 && (startTime = time);
+        index = _requestAnimationFrame(loop);
+        const deltaTime = time - oldTime;
+        if (deltaTime < minDeltaTime)
+            return;
+        oldTime = time;
+        callback && callback(time - startTime);
+    }
+    index = _requestAnimationFrame(loop);
+    return function stop() {
+        _cancelAnimationFrame(index);
+    };
+}
+// export { Easing } from './tween'
+// export { default as tween } from './tween'
+
+const Easing = TWEEN__namespace.Easing;
+/**
+ * 对象变化的补间动画
+ * 1. 应用 requestAnimationFrameInterval 做 update
+ * 2. 在原生 tween 上新增 destroy 方法和 onDestroy 监听
+ * DOC： https://github.com/tweenjs/tween.js
+ * @param from 对象起始状态
+ * @param to 对象末尾状态
+ * @param duration 经历时间（s）
+ * @param easing 过程动画，默认是 Easing.Linear.None
+ */
+function tween(from, to, duration, easing = Easing.Linear.None) {
+    const tween = new TWEEN__namespace.Tween(from).to(to, duration).easing(easing);
+    // 这里注意一下，因为 requestAnimationFrameInterval 给的时间是从 0 开始的，tween 动画也从 0 开始
+    nextFrame(() => tween.start(0));
+    const cancelAnimationFrame = requestAnimationFrameInterval((time) => {
+        if (tween.update(time) === false)
+            cancelAnimationFrame();
+    });
+    const destroyMethods = [];
+    tween.onDestroy = (fn) => {
+        destroyMethods.push(fn);
+        return tween;
+    };
+    tween.destroy = function () {
+        this.stop();
+        Object.assign(tween, {
+            _onStartCallback: null,
+            _onUpdateCallback: null,
+            _onCompleteCallback: null,
+            _onStopCallbackL: null,
+        });
+        let destroyMethod;
+        while ((destroyMethod = destroyMethods.shift()))
+            destroyMethod();
+        cancelAnimationFrame();
+    };
+    return tween;
+}
+function tweenProgress(duration, easing) {
+    return tween({ progress: 0 }, { progress: 1 }, duration, easing);
+}
+
+/**
+ * 运镜效果
+ */
+var CameraMovementEffect;
+(function (CameraMovementEffect) {
+    CameraMovementEffect["Move"] = "Move";
+    CameraMovementEffect["Rotate"] = "Rotate";
+})(CameraMovementEffect || (CameraMovementEffect = {}));
+/**
+ * 旋转类型
+ */
+var Rotation;
+(function (Rotation) {
+    Rotation["Clockwise"] = "Clockwise";
+    Rotation["Anticlockwise"] = "Anticlockwise";
+    Rotation["Loop"] = "Loop";
+})(Rotation || (Rotation = {}));
+
+const PI_2 = Math.PI * 2;
+/**
+ * 把一个任意角度的弧度值转换为一个 [0, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+function formatLongitude(rad) {
+    return ((rad % PI_2) + PI_2) % PI_2;
+}
+/**
+ * 把一个任意角度的弧度值转换为一个 [-2PI, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+function formatLatitude(rad) {
+    return rad % PI_2;
+}
+
+/**
+ * 线性过程插值
+ */
+function progressNumber(from, to, pst) {
+    return from + (to - from) * pst;
+}
+
+const getLongitudeParams = (from, to, rotation) => {
+    const PI = Math.PI;
+    const PI_2 = PI * 2;
+    from = formatLongitude(from);
+    to = formatLongitude(to);
+    // 逆时针旋转，初始值必须是较大的值
+    if (rotation === Rotation.Anticlockwise && from < to)
+        from += PI_2;
+    // 顺时针旋转，结束值必须是较大值
+    if (rotation === Rotation.Clockwise && to < from)
+        to += PI_2;
+    // Loop 旋转，找锐角旋转
+    // 如果 to 比 from 大 180°，逆时针转
+    // 如果 from 比 to 大 180°，顺时针转
+    if (rotation === Rotation.Loop && to - from > PI)
+        return getLongitudeParams(from, to, Rotation.Anticlockwise);
+    if (rotation === Rotation.Loop && from - to > PI)
+        return getLongitudeParams(from, to, Rotation.Clockwise);
+    return { from, to };
+};
+/**
+ * **运镜插件** 模拟类似于电影运镜效果。
+ */
+const CameraMovementPlugin = (five$1) => {
+    const state = {};
+    const move = async (args, duration, opts = { preload: true }) => {
+        if (state.interruptCallback) {
+            state.interruptCallback(false);
+        }
+        if (opts.asyncStartCallback) {
+            await opts.asyncStartCallback();
+        }
+        if (args.mode && args.mode !== five$1.currentMode) {
+            await five$1.changeMode(args.mode);
+        }
+        if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five$1.panoIndex) {
+            await five$1.preloadPano(args.panoIndex);
+        }
+        if (opts.asyncEndCallback) {
+            await opts.asyncEndCallback();
+        }
+        if (args.panoIndex === undefined &&
+            args.fov === undefined &&
+            args.latitude === undefined &&
+            args.longitude === undefined) {
+            return true;
+        }
+        return await new Promise((resolve, reject) => {
+            const panoIndex = args.panoIndex !== undefined ? args.panoIndex : five$1.panoIndex;
+            if (panoIndex !== undefined) {
+                five$1.moveToPano(panoIndex, Object.assign({
+                    duration,
+                    moveEndCallback: () => resolve(true),
+                    moveCancelCallback: () => reject(false), // 移动开始
+                }, args));
+            }
+            else {
+                reject(false);
+            }
+        });
+    };
+    const getAnimeParams = (args) => {
+        const currentFiveState = five$1.state;
+        // latitude
+        const fromLatitude = formatLatitude(currentFiveState.latitude);
+        const toLatitude = formatLatitude(args.latitude);
+        // longitude
+        const { from: fromLongitude, to: toLongitude } = getLongitudeParams(currentFiveState.longitude, args.longitude, args.rotation || Rotation.Loop);
+        // fov
+        const fromFov = currentFiveState.fov;
+        const toFov = args.fov;
+        return {
+            from: { latitude: fromLatitude, longitude: fromLongitude, fov: fromFov },
+            to: { latitude: toLatitude, longitude: toLongitude, fov: toFov },
+        };
+    };
+    const rotate = async (args, duration, opts = {}) => {
+        if (state.interruptCallback) {
+            state.interruptCallback(false);
+        }
+        if (opts.asyncStartCallback) {
+            await opts.asyncStartCallback();
+        }
+        if (five$1.currentMode !== five.Five.Mode.Panorama) {
+            await five$1.changeMode(five.Five.Mode.Panorama);
+        }
+        if (args.panoIndex !== undefined && args.panoIndex !== five$1.panoIndex) {
+            if (opts.preload)
+                await five$1.preloadPano(args.panoIndex);
+            await new Promise((resolve, reject) => {
+                if (!args.panoIndex) {
+                    resolve(true);
+                    return;
+                }
+                five$1.moveToPano(args.panoIndex, {
+                    moveEndCallback: () => resolve(true),
+                    moveCancelCallback: () => reject(false), // 移动开始
+                });
+            });
+        }
+        if (opts.asyncEndCallback) {
+            await opts.asyncEndCallback();
+        }
+        const { from, to } = getAnimeParams(args);
+        return await new Promise((resolve) => {
+            const onUpdate = ({ progress }) => {
+                const state = {};
+                state.longitude = progressNumber(from.longitude, to.longitude, progress);
+                state.latitude = progressNumber(from.latitude, to.latitude, progress);
+                state.fov = progressNumber(from.fov, to.fov, progress);
+                five$1.setState(state, true);
+            };
+            const onComplete = () => {
+                resolve(true);
+            };
+            const onDestroy = () => {
+                resolve(false);
+            };
+            const animeDuration = args.rotateSpeed
+                ? Math.ceil((Math.abs(to.longitude - from.longitude) / args.rotateSpeed) * 1000)
+                : duration;
+            const tween = tweenProgress(animeDuration, TWEEN__namespace.Easing.Linear.None)
+                .onUpdate(onUpdate)
+                .onComplete(onComplete)
+                .onDestroy(onDestroy);
+            if (args.rotation === Rotation.Loop) {
+                tween.repeat(Infinity).yoyo(true);
+            }
+            /**
+             * 中断回调：可能会被其他动画中断。
+             */
+            state.interruptCallback = (flag = true) => {
+                tween.destroy();
+                state.interruptCallback = undefined;
+                if (state.timeoutId) {
+                    clearTimeout(state.timeoutId);
+                    state.timeoutId = undefined;
+                }
+                resolve(flag);
+            };
+            state.timeoutId = setTimeout(() => {
+                // 总时间到了之后强制结束，同时也是 Loop 模式的结束方式
+                if (state.interruptCallback)
+                    state.interruptCallback(true);
+            }, duration);
+        });
+    };
+    return {
+        move,
+        rotate,
+    };
+};
+
+exports.CameraMovementPlugin = CameraMovementPlugin;
+exports["default"] = CameraMovementPlugin;