@realsee/dnalogel 2.0.0-alpha.26 → 2.0.0-alpha.28

package/libs/CameraMovementPlugin/index.js

@@ -1,159 +1,4 @@
-import { Five } from '@realsee/five';
-import * as TWEEN from '@tweenjs/tween.js';
-import { tweenProgress } from '../shared-utils/animationFrame/tween';
-import { Rotation, } from './typing';
-import { formatLongitude, formatLatitude } from '../shared-utils/animationFrame/formatRad';
-import { progressNumber } from '../shared-utils/animationFrame/calculateProgress';
-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 };
-};
-/**
- * **运镜插件** 模拟类似于电影运镜效果。
- */
-export const CameraMovementPlugin = (five) => {
-    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.currentMode) {
-            await five.changeMode(args.mode);
-        }
-        if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
-            await five.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.panoIndex;
-            if (panoIndex !== undefined) {
-                five.moveToPano(panoIndex, Object.assign({
-                    duration,
-                    moveEndCallback: () => resolve(true),
-                    moveCancelCallback: () => reject(false), // 移动开始
-                }, args));
-            }
-            else {
-                reject(false);
-            }
-        });
-    };
-    const getAnimeParams = (args) => {
-        const currentFiveState = five.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.currentMode !== Five.Mode.Panorama) {
-            await five.changeMode(Five.Mode.Panorama);
-        }
-        if (args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
-            if (opts.preload)
-                await five.preloadPano(args.panoIndex);
-            await new Promise((resolve, reject) => {
-                if (!args.panoIndex) {
-                    resolve(true);
-                    return;
-                }
-                five.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.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.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,
-    };
-};
+import CameraMovementPlugin from "./CameraMovementPlugin";
+export { CameraMovementPlugin };
 export default CameraMovementPlugin;
+export { CameraMovementEffect, Rotation } from './typing';

package/libs/ModelChassisCompassPlugin/Plugin.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/libs/ModelChassisCompassPlugin/Plugin.js

@@ -0,0 +1,75 @@
+import * as THREE from 'three';
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
+import object3d2LocalMatrix from '../shared-utils/object3d2LocalMatrix';
+import transfromToMeshBasicMaterial from '../shared-utils/three/transfromToMeshBasicMaterial';
+/**
+ * 模型底盘指南针插件
+ */
+export 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();
+        const object = await fbxLoader.loadAsync(fbxUrl);
+        transfromToMeshBasicMaterial(object, {
+            transparent: true,
+            side: THREE.DoubleSide,
+            blending: THREE.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;
+        object3d2LocalMatrix(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 };
+};
+export default ModelChassisCompassPlugin;

package/libs/ModelChassisCompassPlugin/index.d.ts

@@ -1,19 +1,4 @@
-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>;
+import ModelChassisCompassPlugin from './Plugin';
+export { ModelChassisCompassPlugin };
 export default ModelChassisCompassPlugin;
+export type { ModelChassisCompassPluginParameterType, ModelChassisCompassPluginData, ModelChassisCompassPluginExportType } from './Plugin';

package/libs/ModelChassisCompassPlugin/index.js

@@ -1,75 +1,3 @@
-import * as THREE from 'three';
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
-import object3d2LocalMatrix from '../shared-utils/object3d2LocalMatrix';
-import transfromToMeshBasicMaterial from '../shared-utils/three/transfromToMeshBasicMaterial';
-/**
- * 模型底盘指南针插件
- */
-export 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();
-        const object = await fbxLoader.loadAsync(fbxUrl);
-        transfromToMeshBasicMaterial(object, {
-            transparent: true,
-            side: THREE.DoubleSide,
-            blending: THREE.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;
-        object3d2LocalMatrix(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 };
-};
+import ModelChassisCompassPlugin from './Plugin';
+export { ModelChassisCompassPlugin };
 export default ModelChassisCompassPlugin;

package/libs/ModelEntryDoorGuidePlugin/Plugin.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;

package/libs/ModelEntryDoorGuidePlugin/Plugin.js

@@ -0,0 +1,140 @@
+import { AnimationMixer, MeshBasicMaterial } from 'three';
+import * as THREE from 'three';
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
+import createCanvasTextTexture from '../shared-utils/createCanvasTextTexture';
+import transformPositionToVector3 from '../shared-utils/three/transformPositionToVector3';
+import transfromToMeshBasicMaterial from '../shared-utils/three/transfromToMeshBasicMaterial';
+/**
+ * 模型入户门引导插件
+ */
+export const ModelEntryDoorGuidePlugin = (five, params) => {
+    var _a, _b, _c;
+    // 局部状态
+    const state = {};
+    const defaultAnimationEnable = (_a = params.animationEnabled) !== null && _a !== void 0 ? _a : true;
+    const defaultModelPosition = (_b = params.position) !== null && _b !== void 0 ? _b : undefined;
+    const defaultRad = (_c = params.rad) !== null && _c !== void 0 ? _c : undefined;
+    const defaultFbxUrl = params.fbx_url || '//vrlab-image4.ljcdn.com/release/web/entryDoorMini/Anim_Door1.fbx';
+    const mixers = [];
+    const load = async (data) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const position = (_a = data === null || data === void 0 ? void 0 : data.position) !== null && _a !== void 0 ? _a : defaultModelPosition;
+        if (!position)
+            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): position is undefined`);
+        const modelPosition = transformPositionToVector3(position);
+        const rad = (_b = data === null || data === void 0 ? void 0 : data.rad) !== null && _b !== void 0 ? _b : defaultRad;
+        const fbxUrl = (_c = data === null || data === void 0 ? void 0 : data.fbx_url) !== null && _c !== void 0 ? _c : defaultFbxUrl;
+        state.rad = rad;
+        if (rad === undefined)
+            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): rad is ${rad}`);
+        // 加载模型
+        const object = await new FBXLoader().loadAsync(fbxUrl);
+        // 设置位置
+        object.position.copy(modelPosition);
+        object.rotation.z = rad;
+        object.scale.set(0.8, 0.8, 0.8);
+        transfromToMeshBasicMaterial(object, { transparent: true, side: THREE.DoubleSide });
+        const textMesh = (_g = (_f = (_e = (_d = object.children) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f[3]) === null || _g === void 0 ? void 0 : _g.clone();
+        if (!textMesh)
+            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): textMesh is ${textMesh}`);
+        textMesh.material = new MeshBasicMaterial({ transparent: true, map: createCanvasTextTexture('入户门') });
+        textMesh.renderOrder = 3;
+        object.children[0].add(textMesh);
+        state.object = object;
+        return true;
+    };
+    const initAnimation = () => {
+        if (state.animation)
+            return;
+        if (!state.object)
+            return console.error('ModelEntryDoorGuidePlugin.initAnimation(): state.object is ', state.object);
+        // action
+        const animationSpeed = 1;
+        const mixer = new AnimationMixer(state.object);
+        mixers.push(mixer);
+        const action = mixer.clipAction(state.object.animations[0]);
+        action.timeScale = animationSpeed;
+        let stopAnimation;
+        const requestAnimationFrameLoop = () => {
+            let index = 0;
+            let oldTime = 0;
+            const minDeltaTime = 1000 / 30;
+            const animation = (time) => {
+                index = requestAnimationFrame(animation);
+                const deltaTime = time - oldTime;
+                if (deltaTime < minDeltaTime)
+                    return;
+                oldTime = time;
+                mixers.forEach((mixer) => mixer.update(deltaTime / 1000));
+                five.needsRender = true;
+            };
+            index = requestAnimationFrame(animation);
+            return () => {
+                cancelAnimationFrame(index);
+            };
+        };
+        const play = () => {
+            if (stopAnimation)
+                return;
+            action.play();
+            stopAnimation = requestAnimationFrameLoop();
+            // 开始播动画时，rotation可能会还原
+            requestAnimationFrame(() => {
+                if (state.object && state.object.rotation.z !== state.rad)
+                    state.object.rotation.z = state.rad;
+            });
+        };
+        const stop = () => {
+            action.stop();
+            stopAnimation === null || stopAnimation === void 0 ? void 0 : stopAnimation();
+            stopAnimation = undefined;
+        };
+        const animation = { play, stop };
+        state.animation = animation;
+    };
+    const show = (config) => {
+        var _a;
+        if (!state.object)
+            return console.error('ModelEntryDoorGuidePlugin.enable(): object is ', state.object);
+        const animationEnable = (_a = config === null || config === void 0 ? void 0 : config.animationEnable) !== null && _a !== void 0 ? _a : defaultAnimationEnable;
+        if (animationEnable) {
+            if (!state.animation)
+                initAnimation();
+            state.animation.play();
+        }
+        five.scene.add(state.object);
+        five.needsRender = true;
+    };
+    const hide = () => {
+        if (!state.object)
+            return;
+        if (state.animation)
+            state.animation.stop();
+        five.scene.remove(state.object);
+        five.needsRender = true;
+    };
+    const modeChangeHandler = (mode) => (mode === 'Floorplan' ? show() : hide());
+    const enable = (config) => {
+        if (state.enabled)
+            return true;
+        state.enabled = true;
+        modeChangeHandler(five.currentMode);
+        five.on('modeChange', modeChangeHandler);
+        show(config);
+        return true;
+    };
+    const disable = () => {
+        if (!state.enabled)
+            return true;
+        state.enabled = false;
+        hide();
+        five.off('modeChange', modeChangeHandler);
+        return true;
+    };
+    return { load, enable, disable };
+};
+export const modelEntryDoorGuidePluginServerParams = {
+    name: 'ModelEntryDoorGuidePlugin',
+    version: 0,
+};
+export default ModelEntryDoorGuidePlugin;

package/libs/ModelEntryDoorGuidePlugin/index.d.ts

@@ -1,26 +1,4 @@
-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;
-};
+import ModelEntryDoorGuidePlugin from './Plugin';
+export { ModelEntryDoorGuidePlugin };
 export default ModelEntryDoorGuidePlugin;
+export type { ModelEntryDoorGuidePluginData, ModelEntryDoorGuidePluginParameterType, ModelEntryDoorGuidePluginExportType } from './Plugin';