@realsee/dnalogel 2.0.0-alpha.2 → 2.0.0-alpha.20

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;

package/dist/CameraMovementPlugin/typing.d.ts

@@ -0,0 +1,68 @@
+import type { Mode, Pose } from '@realsee/five';
+export interface CameraMovementPluginParameterType {
+}
+export interface CameraMovementPluginExportType {
+    /**
+     * 运镜：移动
+     * @param moveArgs 移动参数
+     * @param duration 移动耗时
+     * @param opts 额外配置
+     */
+    move(moveArgs: Partial<MoveArgs>, duration: number, opts?: MoveOpts): Promise<boolean>;
+    /**
+     * 运镜：旋转
+     * @param rotateArgs 旋转参数
+     * @param duration 旋转耗时
+     * @param opts 额外配置
+     */
+    rotate(rotateArgs: Partial<RotateArgs>, duration: number, opts?: RotateOpts): Promise<boolean>;
+}
+/**
+ * 运镜效果
+ */
+export declare enum CameraMovementEffect {
+    Move = "Move",
+    Rotate = "Rotate"
+}
+/**
+ * 旋转类型
+ */
+export declare enum Rotation {
+    Clockwise = "Clockwise",
+    Anticlockwise = "Anticlockwise",
+    Loop = "Loop"
+}
+/**
+ * 回调配置
+ */
+export interface CameraMovementOptsCallback {
+    asyncStartCallback?: () => void;
+    asyncEndCallback?: () => void;
+}
+/**
+ * 移动运镜参数
+ */
+export declare type MoveArgs = {
+    mode: Mode;
+    panoIndex: number;
+} & Pose;
+/**
+ * 移动运镜配置
+ */
+export declare type MoveOpts = {
+    preload?: boolean;
+} & CameraMovementOptsCallback;
+/**
+ * 旋转运镜参数
+ */
+export declare type RotateArgs = {
+    panoIndex?: number;
+    rotateSpeed?: number;
+    rotation?: Rotation;
+} & Pose;
+/**
+ * 旋转运镜配置
+ */
+export declare type RotateOpts = {
+    preload?: boolean;
+} & CameraMovementOptsCallback;

package/dist/ModelChassisCompassPlugin/index.d.ts

@@ -0,0 +1,19 @@
+import type { FivePlugin } from '@realsee/five';
+export interface ModelChassisCompassPluginParameterType {
+    north_rad?: number;
+    fbx_url?: string;
+}
+export interface ModelChassisCompassPluginData {
+    north_rad?: number;
+    fbx_url?: string;
+}
+export interface ModelChassisCompassPluginExportType {
+    enable: () => void;
+    disable: () => void;
+    load: (data?: ModelChassisCompassPluginData) => Promise<boolean>;
+}
+/**
+ * 模型底盘指南针插件
+ */
+export declare const ModelChassisCompassPlugin: FivePlugin<ModelChassisCompassPluginParameterType, ModelChassisCompassPluginExportType>;
+export default ModelChassisCompassPlugin;

package/dist/ModelChassisCompassPlugin/index.js

@@ -0,0 +1,143 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var THREE = require('three');
+var FBXLoader = require('three/examples/jsm/loaders/FBXLoader');
+
+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);
+
+const genRotationMatrix = (x, y, z) => {
+    const matrix = new THREE__namespace.Matrix4();
+    const euler = new THREE__namespace.Euler(x, y, z, 'YXZ');
+    matrix.makeRotationFromEuler(euler);
+    return matrix;
+};
+const bject3d2LocalMatrix = (mesh, { scale, rotation, position, }) => {
+    if (scale) {
+        mesh.scale.set(scale, scale, scale);
+    }
+    if (rotation) {
+        const [x, y, z] = rotation;
+        if (x) {
+            mesh.applyMatrix4(genRotationMatrix(x, 0, 0));
+        }
+        if (y) {
+            mesh.applyMatrix4(genRotationMatrix(0, y, 0));
+        }
+        if (z) {
+            mesh.applyMatrix4(genRotationMatrix(0, 0, z));
+        }
+    }
+    if (position) {
+        mesh.position.set(position.x, position.y, position.z);
+    }
+    return mesh;
+};
+
+function transfromToMeshBasicMaterial(object, options) {
+    object.traverse((ele) => {
+        var _a;
+        if (ele.type === 'Mesh') {
+            const mesh = ele;
+            const materialConf = Object.assign({ map: mesh.material.map || {} }, options);
+            mesh.material = new THREE.MeshBasicMaterial(materialConf);
+            mesh.renderOrder = 1;
+            if (((_a = ele.parent) === null || _a === void 0 ? void 0 : _a.type) === 'Mesh') {
+                ele.renderOrder = ele.parent.renderOrder + 1;
+            }
+        }
+    });
+}
+
+/**
+ * 模型底盘指南针插件
+ */
+const ModelChassisCompassPlugin = (five, params) => {
+    const defaultFbxUrl = params.fbx_url || '//vrlab-static.ljcdn.com/release/web/v3/dipan3/dipan.FBX';
+    const defaultNorthRad = params.north_rad || undefined;
+    // 局部状态
+    const state = {};
+    const load = async (data) => {
+        const fbxUrl = (data === null || data === void 0 ? void 0 : data.fbx_url) || defaultFbxUrl;
+        const northRad = (data === null || data === void 0 ? void 0 : data.north_rad) || defaultNorthRad;
+        if (!northRad) {
+            throw new Error('"northRad"配置参数缺失：未配置指南针指向！');
+        }
+        const bounding = five.model.bounding;
+        const xOffset = bounding.max.x - bounding.min.x;
+        const zOffset = bounding.max.z - bounding.min.z;
+        const maxOffset = Math.max(xOffset, zOffset);
+        const fbxLoader = new FBXLoader.FBXLoader();
+        const object = await fbxLoader.loadAsync(fbxUrl);
+        transfromToMeshBasicMaterial(object, {
+            transparent: true,
+            side: THREE__namespace.DoubleSide,
+            blending: THREE__namespace.AdditiveBlending,
+        });
+        const rotation = [0, northRad - Math.PI / 2, 0];
+        const { model: { bounding: { max: { x: xMax, z: zMax }, min: { x: xMin, y: yMin, z: zMin }, }, }, } = five;
+        state.yBase = yMin;
+        const position = { x: (xMax + xMin) / 2, y: yMin - 1.6, z: (zMax + zMin) / 2 };
+        const scale = 0.0045 * maxOffset;
+        bject3d2LocalMatrix(object, { position, rotation, scale });
+        state.object = object;
+        return true;
+    };
+    const onCameraUpdate = ({ latitude }) => {
+        if (!state.object)
+            return;
+        const y = getPositionY(latitude);
+        if (y) {
+            state.object.position.y = y;
+        }
+    };
+    const getPositionY = (latitude) => {
+        if (state.yBase === undefined)
+            return;
+        const difference = 0.6;
+        if (latitude >= Math.PI / 4)
+            return state.yBase - (difference + 1.6);
+        const ratio = latitude * (4 / Math.PI);
+        return state.yBase - (difference * ratio + 1.6);
+    };
+    const enable = () => {
+        if (!state.object)
+            return;
+        const y = getPositionY(five.getPose().latitude);
+        if (y)
+            state.object.position.y = y;
+        five.scene.add(state.object);
+        five.needsRender = true;
+        five.on('cameraDirectionUpdate', onCameraUpdate);
+    };
+    const disable = () => {
+        if (!state.object)
+            return;
+        five.scene.remove(state.object);
+        five.needsRender = true;
+        five.off('cameraDirectionUpdate', onCameraUpdate);
+    };
+    return { load, disable, enable };
+};
+
+exports.ModelChassisCompassPlugin = ModelChassisCompassPlugin;
+exports["default"] = ModelChassisCompassPlugin;

package/dist/ModelEntryDoorGuidePlugin/index.d.ts

@@ -0,0 +1,26 @@
+import type { FivePlugin } from '@realsee/five';
+import type { Vector3Position } from '../typings/math.type';
+export interface ModelEntryDoorGuidePluginData {
+    position?: Vector3Position;
+    rad?: number;
+    fbx_url?: string;
+}
+export declare type ModelEntryDoorGuidePluginParameterType = {
+    animationEnabled?: boolean;
+} & ModelEntryDoorGuidePluginData;
+export interface ModelEntryDoorGuidePluginExportType {
+    enable: (config?: {
+        animationEnable?: boolean;
+    }) => boolean;
+    disable: () => boolean;
+    load: (data?: Partial<ModelEntryDoorGuidePluginData>) => Promise<boolean>;
+}
+/**
+ * 模型入户门引导插件
+ */
+export declare const ModelEntryDoorGuidePlugin: FivePlugin<ModelEntryDoorGuidePluginParameterType, ModelEntryDoorGuidePluginExportType>;
+export declare const modelEntryDoorGuidePluginServerParams: {
+    name: string;
+    version: number;
+};
+export default ModelEntryDoorGuidePlugin;