@realsee/dnalogel 0.1.7 → 2.0.0-alpha.3

package/dist/style.css

@@ -0,0 +1 @@
+.room-label-item.svelte-17nkflf{position:absolute;font-size:.41667rem;z-index:0;transform:none;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.room-label-item__text.svelte-17nkflf{position:absolute;left:0;top:-3.33333rem;transform:translate(-50%);display:flex;justify-content:center;align-items:center;height:1.04167rem;min-width:1.66667rem;padding:0 .3125rem;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap}.room-label-item__bar.svelte-17nkflf{position:absolute;top:-2.29167rem;height:2.5rem;width:1px;background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0))}.wide.svelte-17nkflf{font-size:.52083rem}.room-labels-container.svelte-185yvaa{width:100%;height:100%;position:relative;color:#fff}.floorplan__camera-position.svelte-1kosz2p{position:absolute;width:0;height:0}.floorplan__camera-rotate.svelte-1kosz2p{position:absolute;left:.78125rem;top:.78125rem;transform-origin:.78125rem .78125rem;background-repeat:no-repeat;background-size:100%}.floorplan-plugin__compass.svelte-5l80pv{position:absolute;left:50%;top:-2.39583rem;width:12.03125rem;height:2.13542rem;will-change:opacity;transform-origin:center 9.58333rem}.floorplan-plugin__compass-image.svelte-5l80pv{width:100%;height:100%;position:absolute;left:0;top:0;opacity:.1;background-repeat:no-repeat;background-size:100% 100%}.floorplan-plugin__compass-text.svelte-5l80pv{position:absolute;left:50%;top:.78125rem;transform:translate(-50%);opacity:.2;font-weight:700;font-size:.52083rem;color:#fff}.floorplan-plugin__room-label-item.svelte-1ashbdx{position:absolute;display:flex;flex-flow:column;align-items:center;line-height:.78125rem;color:#fff;transform:translate(-50%,-50%);white-space:nowrap}.floorplan-plugin__room-size.svelte-1ashbdx{opacity:.45}.floorplan-plugin__room-labels.svelte-sw25w3{width:100%;height:100%;position:absolute;left:0;top:0;z-index:20}.floorplan-plugin__rule-labels.svelte-1rr09in{position:absolute;height:.26042rem;display:flex;align-items:center}.floorplan-plugin__rule-labels-top.svelte-1rr09in{left:0;top:0}.floorplan-plugin__rule-labels-bottom.svelte-1rr09in{left:0;bottom:0}.floorplan-plugin__rule-labels-left.svelte-1rr09in{bottom:0;left:0}.floorplan-plugin__rule-labels-right.svelte-1rr09in{bottom:0;right:0}.floorplan-plugin__rule-line.svelte-1rr09in{background:#fff;opacity:.05;width:100%;height:1px}.floorplan-plugin__rule-scale.svelte-1rr09in{position:absolute;background:#fff;opacity:.05;transform-origin:center;width:1px;height:.26042rem}.floorplan-plugin__text-wrapper.svelte-1rr09in{width:0;height:0;position:absolute}.floorplan-plugin__text-wrapper.floorplan-plugin__text-wrapper--is-left-or-top.svelte-1rr09in{top:.52083rem}.floorplan-plugin__text-wrapper.floorplan-plugin__text-wrapper-is-right-or-bottom.svelte-1rr09in{bottom:.52083rem}.floorplan-plugin__rule-text.svelte-1rr09in{position:absolute;width:-webkit-max-content;width:-moz-max-content;width:max-content;display:block;transform:translate(-50%,-50%) rotate(180deg);font-size:.52083rem;color:#fff;opacity:.2}.floorplan-plugin__rule-text.is-row.svelte-1rr09in{transform:translate(-50%,-50%)}img.svelte-1cuuebb,.floorplan-plugin__base-image.svelte-1qqy56u{width:100%;height:100%}.floorplan-plugin__base-image.svelte-126ja8e{position:absolute;z-index:10;width:100%;height:100%;pointer-events:none}svg.svelte-1b0icjc{position:absolute;width:100%;height:100%;overflow:visible}path.svelte-11takew{opacity:0}path.svelte-11takew:hover{opacity:.1}.floorplan-plugin__room-highlight.svelte-1aais5l{position:absolute;width:100%;height:100%;pointer-events:all}svg.svelte-1aais5l{width:100%;height:100%;overflow:visible}.floorplan-current-floor.svelte-3pdgs4{position:relative;width:100%;height:100%}.floorplan-main.svelte-177x2q7{width:100%;height:100%}.plugin-radar__camera-wrapper.svelte-o7uo2v{width:100%;height:100%;position:absolute;pointer-events:none}.plugin-radar__camera-position.svelte-o7uo2v{position:absolute;left:0;top:0;width:0;height:0;transform:none;pointer-events:none;transition:transform 1s linear}.plugin-radar__camera-rotate.svelte-o7uo2v{position:absolute;left:-.78125rem;top:-.78125rem;width:.88542rem;height:.88542rem;transform-origin:.78125rem .78125rem;transform:rotate(45deg);background-repeat:no-repeat;background-size:100%}.plugin-pano-floorplan__extra-objects.svelte-8n0d4v{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.plugin-pano-floorplan__extra-object-item--position.svelte-8n0d4v{position:absolute;width:0;height:0}.plugin-pano-floorplan__extra-object-item.svelte-8n0d4v{transform:translate(-50%,-50%)}.plugin-floorplan-radar.svelte-7d8ub2{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.plugin-floorplan-radar-container.svelte-7d8ub2{position:relative}

package/{plugins → libs}/CSS3DRenderPlugin/index.d.ts

@@ -1,7 +1,7 @@
 import { FivePlugin } from '@realsee/five';
 import { Vector3 } from 'three';
 import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
-import { Vector3Position } from '../../typings/math.type';
+import { Vector3Position } from '../typings/math.type';
 export declare type CSS3DRenderPluginParameterType = undefined;
 export interface CSS3DRenderPluginExportType {
     /**

package/libs/CSS3DRenderPlugin/index.js

@@ -0,0 +1,181 @@
+import * as THREE from 'three';
+import { Scene, Vector3 } from 'three';
+import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import evenNumber from '../shared-utils/math/evenNumber';
+import centerPoint from '../shared-utils/three/centerPoint';
+import transformPositionToVector3 from '../shared-utils/three/transformPositionToVector3';
+import createResizeObserver from './utils/createResizeObserver';
+/**
+ * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
+ * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
+ *
+ * @returns
+ */
+export const CSS3DRenderPlugin = (five) => {
+    const state = { disposeCallbacks: [] };
+    const create3DDomContainer = (...params) => {
+        const points = params[0].map((point) => (point instanceof 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 Scene(), css3DRenderer: new CSS3DRenderer() };
+        }
+        if (frontModeUnInited) {
+            state.frontMode = { scene: new Scene(), css3DRenderer: new 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 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 Vector3(0, 1, 0).angleTo(new Vector3(0, vector12.y, vector12.z));
+        const rotateYAngle = new Vector3(1, 0, 0).angleTo(new Vector3(vector01.x, 0, vector01.z));
+        const rotateZAngle = vector01.angleTo(new 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 Vector3(1, 0, 0), rotateX); // x
+        css3DObject.rotateOnWorldAxis(new Vector3(0, 1, 0), rotateY); // y
+        css3DObject.rotateOnWorldAxis(new Vector3(0, 0, 1), rotateZ); // z
+        css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+        let mesh;
+        if (mode === 'behind') {
+            const material = new THREE.MeshBasicMaterial({
+                opacity: 0,
+                transparent: false,
+                side: THREE.DoubleSide,
+            });
+            const geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
+            mesh = new THREE.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 = [];
+        },
+    };
+};
+export default CSS3DRenderPlugin;

package/libs/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/libs/CSS3DRenderPlugin/utils/createResizeObserver.js

@@ -0,0 +1,18 @@
+/**
+ * @description: 究极简陋的 ResizeObserver polyfill
+ */
+export default 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),
+        };
+    }
+}

package/libs/CameraMovementPlugin/index.js

@@ -0,0 +1,159 @@
+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,
+    };
+};
+export default CameraMovementPlugin;

package/libs/CameraMovementPlugin/typing.js

@@ -0,0 +1,17 @@
+/**
+ * 运镜效果
+ */
+export var CameraMovementEffect;
+(function (CameraMovementEffect) {
+    CameraMovementEffect["Move"] = "Move";
+    CameraMovementEffect["Rotate"] = "Rotate";
+})(CameraMovementEffect || (CameraMovementEffect = {}));
+/**
+ * 旋转类型
+ */
+export var Rotation;
+(function (Rotation) {
+    Rotation["Clockwise"] = "Clockwise";
+    Rotation["Anticlockwise"] = "Anticlockwise";
+    Rotation["Loop"] = "Loop";
+})(Rotation || (Rotation = {}));

package/{plugins → libs}/ModelChassisCompassPlugin/index.d.ts

@@ -15,5 +15,5 @@ export interface ModelChassisCompassPluginExportType {
 /**
  * 模型底盘指南针插件
  */
-declare const ModelChassisCompassPlugin: FivePlugin<ModelChassisCompassPluginParameterType, ModelChassisCompassPluginExportType>;
+export declare const ModelChassisCompassPlugin: FivePlugin<ModelChassisCompassPluginParameterType, ModelChassisCompassPluginExportType>;
 export default ModelChassisCompassPlugin;

package/libs/ModelChassisCompassPlugin/index.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?.fbx_url || defaultFbxUrl;
+        const northRad = 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/{plugins → libs}/ModelEntryDoorGuidePlugin/index.d.ts

@@ -1,5 +1,5 @@
 import type { FivePlugin } from '@realsee/five';
-import { Vector3Position } from '../../typings/math.type';
+import { Vector3Position } from '../typings/math.type';
 export interface ModelEntryDoorGuidePluginData {
     position?: Vector3Position;
     rad?: number;
@@ -18,5 +18,9 @@ export interface ModelEntryDoorGuidePluginExportType {
 /**
  * 模型入户门引导插件
  */
-declare const ModelEntryDoorGuidePlugin: FivePlugin<ModelEntryDoorGuidePluginParameterType, ModelEntryDoorGuidePluginExportType>;
+export declare const ModelEntryDoorGuidePlugin: FivePlugin<ModelEntryDoorGuidePluginParameterType, ModelEntryDoorGuidePluginExportType>;
+export declare const modelEntryDoorGuidePluginServerParams: {
+    name: string;
+    version: number;
+};
 export default ModelEntryDoorGuidePlugin;

package/libs/ModelEntryDoorGuidePlugin/index.js

@@ -0,0 +1,136 @@
+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) => {
+    // 局部状态
+    const state = {};
+    const defaultAnimationEnable = params.animationEnabled ?? true;
+    const defaultModelPosition = params.position ?? undefined;
+    const defaultRad = params.rad ?? undefined;
+    const defaultFbxUrl = params.fbx_url || '//vrlab-image4.ljcdn.com/release/web/entryDoorMini/Anim_Door1.fbx';
+    const mixers = [];
+    const load = async (data) => {
+        const position = data?.position ?? defaultModelPosition;
+        if (!position)
+            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): position is undefined`);
+        const modelPosition = transformPositionToVector3(position);
+        const rad = data?.rad ?? defaultRad;
+        const fbxUrl = data?.fbx_url ?? 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 = object.children?.[0]?.children?.[3]?.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?.();
+            stopAnimation = undefined;
+        };
+        const animation = { play, stop };
+        state.animation = animation;
+    };
+    const show = (config) => {
+        if (!state.object)
+            return console.error('ModelEntryDoorGuidePlugin.enable(): object is ', state.object);
+        const animationEnable = config?.animationEnable ?? 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;
+        five.off('modeChange', modeChangeHandler);
+        return true;
+    };
+    return { load, enable, disable };
+};
+export const modelEntryDoorGuidePluginServerParams = {
+    name: 'ModelEntryDoorGuidePlugin',
+    version: 0,
+};
+export default ModelEntryDoorGuidePlugin;

package/libs/ModelRoomLabelPlugin/Assets/roomLabelBg.d.ts

@@ -0,0 +1 @@
+export declare const ROOM_LABEL_BG = "data:image/png;base64,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";