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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## 2.0.0-alpha.28
+- 1.chore: 优化打包输出路径.
+
+## 2.0.0-alpha.27
+- 1.feat: PanoSpatialTagPlugin 兼容 bvh 为 false 模式.
+
+## 2.0.0-alpha.26
+- 1.fix: ModelRoomLabelPlugin - 修复渲染区域大小改变时，标签位置没有更新
+- 2.pref: ModelRoomLabelPlugin - 优化渲染逻辑
+
 ## 2.0.0-alpha.25
 - 1.refactor: 恢复发版
 

package/dist/CSS3DRenderPlugin/Plugin.d.ts

@@ -0,0 +1,49 @@
+import type { FivePlugin } from '@realsee/five';
+import type { Vector3Position } from '../typings/math.type';
+import { Vector3 } from 'three';
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+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.d.ts

@@ -1,49 +1,4 @@
-import type { FivePlugin } from '@realsee/five';
-import type { Vector3Position } from '../typings/math.type';
-import { Vector3 } from 'three';
-import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
-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>;
+import CSS3DRenderPlugin from './Plugin';
+export { CSS3DRenderPlugin };
 export default CSS3DRenderPlugin;
+export type { CSS3DRenderPluginExportType } from './Plugin';

package/dist/CameraMovementPlugin/CameraMovementPlugin.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.d.ts

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

package/dist/CameraMovementPlugin/index.js

@@ -107,20 +107,20 @@ function tweenProgress(duration, easing) {
 /**
  * 运镜效果
  */
-var CameraMovementEffect;
+exports.CameraMovementEffect = void 0;
 (function (CameraMovementEffect) {
     CameraMovementEffect["Move"] = "Move";
     CameraMovementEffect["Rotate"] = "Rotate";
-})(CameraMovementEffect || (CameraMovementEffect = {}));
+})(exports.CameraMovementEffect || (exports.CameraMovementEffect = {}));
 /**
  * 旋转类型
  */
-var Rotation;
+exports.Rotation = void 0;
 (function (Rotation) {
     Rotation["Clockwise"] = "Clockwise";
     Rotation["Anticlockwise"] = "Anticlockwise";
     Rotation["Loop"] = "Loop";
-})(Rotation || (Rotation = {}));
+})(exports.Rotation || (exports.Rotation = {}));
 
 const PI_2 = Math.PI * 2;
 /**
@@ -151,18 +151,18 @@ const getLongitudeParams = (from, to, rotation) => {
     from = formatLongitude(from);
     to = formatLongitude(to);
     // 逆时针旋转，初始值必须是较大的值
-    if (rotation === Rotation.Anticlockwise && from < to)
+    if (rotation === exports.Rotation.Anticlockwise && from < to)
         from += PI_2;
     // 顺时针旋转，结束值必须是较大值
-    if (rotation === Rotation.Clockwise && to < from)
+    if (rotation === exports.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);
+    if (rotation === exports.Rotation.Loop && to - from > PI)
+        return getLongitudeParams(from, to, exports.Rotation.Anticlockwise);
+    if (rotation === exports.Rotation.Loop && from - to > PI)
+        return getLongitudeParams(from, to, exports.Rotation.Clockwise);
     return { from, to };
 };
 /**
@@ -212,7 +212,7 @@ const CameraMovementPlugin = (five$1) => {
         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);
+        const { from: fromLongitude, to: toLongitude } = getLongitudeParams(currentFiveState.longitude, args.longitude, args.rotation || exports.Rotation.Loop);
         // fov
         const fromFov = currentFiveState.fov;
         const toFov = args.fov;
@@ -270,7 +270,7 @@ const CameraMovementPlugin = (five$1) => {
                 .onUpdate(onUpdate)
                 .onComplete(onComplete)
                 .onDestroy(onDestroy);
-            if (args.rotation === Rotation.Loop) {
+            if (args.rotation === exports.Rotation.Loop) {
                 tween.repeat(Infinity).yoyo(true);
             }
             /**

package/dist/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/dist/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/dist/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/dist/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';

package/dist/ModelEntryDoorGuidePlugin/index.js

@@ -191,11 +191,6 @@ const ModelEntryDoorGuidePlugin = (five, params) => {
     };
     return { load, enable, disable };
 };
-const modelEntryDoorGuidePluginServerParams = {
-    name: 'ModelEntryDoorGuidePlugin',
-    version: 0,
-};
 
 exports.ModelEntryDoorGuidePlugin = ModelEntryDoorGuidePlugin;
 exports["default"] = ModelEntryDoorGuidePlugin;
-exports.modelEntryDoorGuidePluginServerParams = modelEntryDoorGuidePluginServerParams;

package/dist/ModelItemLabelPlugin/ModelItemLabelPlugin.d.ts

@@ -0,0 +1,4 @@
+import type { FivePlugin } from "@realsee/five";
+import { ModelItemLabelPluginExportReturnsType, ModelItemLabelPluginParametersType } from "./typings";
+export declare const ModelItemLabelPlugin: FivePlugin<ModelItemLabelPluginParametersType, ModelItemLabelPluginExportReturnsType>;
+export default ModelItemLabelPlugin;

package/dist/ModelItemLabelPlugin/index.d.ts

@@ -1,4 +1,9 @@
-import type { FivePlugin } from "@realsee/five";
-import { ModelItemLabelPluginExportReturnsType, ModelItemLabelPluginParametersType } from "./typings";
-export declare const ModelItemLabelPlugin: FivePlugin<ModelItemLabelPluginParametersType, ModelItemLabelPluginExportReturnsType>;
+import ModelItemLabelPlugin from './ModelItemLabelPlugin';
+export { ModelItemLabelPlugin };
 export default ModelItemLabelPlugin;
+export declare const modelItemLabelPluginServerParams: {
+    name: string;
+    version: number;
+};
+export type { ModelItemLabelPluginParametersType, ModelItemLabelPluginData, ModelItemLabelPluginExportReturnsType } from './typings';
+export { DISPLAY_STRATEGY_TYPE } from './typings';

package/dist/ModelItemLabelPlugin/index.js

@@ -31,13 +31,13 @@ function _interopNamespace(e) {
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
-var DISPLAY_STRATEGY_TYPE;
+exports.DISPLAY_STRATEGY_TYPE = void 0;
 (function (DISPLAY_STRATEGY_TYPE) {
     DISPLAY_STRATEGY_TYPE["SMALL"] = "small";
     DISPLAY_STRATEGY_TYPE["MIDLLE"] = "middle";
     DISPLAY_STRATEGY_TYPE["LARGE"] = "large";
     DISPLAY_STRATEGY_TYPE["EXTRA_LARGE"] = "x-large";
-})(DISPLAY_STRATEGY_TYPE || (DISPLAY_STRATEGY_TYPE = {}));
+})(exports.DISPLAY_STRATEGY_TYPE || (exports.DISPLAY_STRATEGY_TYPE = {}));
 
 /* src/ModelItemLabelPlugin/ItemLabelItem.svelte generated by Svelte v3.47.0 */
 
@@ -177,7 +177,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (162:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (163:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let itemlabelitem;
@@ -378,13 +378,13 @@ function instance($$self, $$props, $$invalidate) {
 
 	function getStrokeLength(itemSpaceHeight, type) {
 		switch (type) {
-			case DISPLAY_STRATEGY_TYPE.SMALL:
+			case exports.DISPLAY_STRATEGY_TYPE.SMALL:
 				return Math.ceil(-27.78 * itemSpaceHeight + 85);
-			case DISPLAY_STRATEGY_TYPE.MIDLLE:
+			case exports.DISPLAY_STRATEGY_TYPE.MIDLLE:
 				return Math.ceil(-38.9 * itemSpaceHeight + 130);
-			case DISPLAY_STRATEGY_TYPE.LARGE:
+			case exports.DISPLAY_STRATEGY_TYPE.LARGE:
 				return Math.ceil(-44.44 * itemSpaceHeight + 140);
-			case DISPLAY_STRATEGY_TYPE.EXTRA_LARGE:
+			case exports.DISPLAY_STRATEGY_TYPE.EXTRA_LARGE:
 				return Math.ceil(-92.59 * itemSpaceHeight + 300);
 		}
 	}
@@ -560,7 +560,7 @@ const ModelItemLabelPlugin = (five$1, params) => {
         app: undefined,
         hooks: new five.Subscribe(),
         modelOcclusionEnable: (_a = params === null || params === void 0 ? void 0 : params.modelOcclusionEnable) !== null && _a !== void 0 ? _a : true,
-        displayStrategyType: (_b = params === null || params === void 0 ? void 0 : params.displayStrategyType) !== null && _b !== void 0 ? _b : DISPLAY_STRATEGY_TYPE.SMALL,
+        displayStrategyType: (_b = params === null || params === void 0 ? void 0 : params.displayStrategyType) !== null && _b !== void 0 ? _b : exports.DISPLAY_STRATEGY_TYPE.SMALL,
     };
     pluginState.container.setAttribute('class', 'model-item-label-plugin-container');
     pluginState.container.style.cssText = `
@@ -664,5 +664,11 @@ const ModelItemLabelPlugin = (five$1, params) => {
     };
 };
 
+const modelItemLabelPluginServerParams = {
+    name: 'ModelItemLabelPlugin',
+    version: 0,
+};
+
 exports.ModelItemLabelPlugin = ModelItemLabelPlugin;
 exports["default"] = ModelItemLabelPlugin;
+exports.modelItemLabelPluginServerParams = modelItemLabelPluginServerParams;

package/dist/ModelRoomLabelPlugin/index.js

@@ -110,17 +110,19 @@ class RoomLabelItem extends internal.SvelteComponent {
 
 /* src/ModelRoomLabelPlugin/RoomLabelItems.svelte generated by Svelte v3.47.0 */
 
+const { Map: Map_1 } = internal.globals;
+
 function add_css(target) {
 	internal.append_styles(target, "svelte-9eg4zi", ".room-labels-container.svelte-9eg4zi{width:100%;height:100%;position:relative;color:#fff}");
 }
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[9] = list[i];
+	child_ctx[12] = list[i];
 	return child_ctx;
 }
 
-// (70:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
+// (82:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let roomlabelitem;
@@ -128,7 +130,7 @@ function create_each_block(key_1, ctx) {
 
 	roomlabelitem = new RoomLabelItem({
 			props: {
-				roomLabel: /*roomLableItem*/ ctx[9],
+				roomLabel: /*roomLableItem*/ ctx[12],
 				five: /*five*/ ctx[1]
 			}
 		});
@@ -149,7 +151,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const roomlabelitem_changes = {};
-			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[9];
+			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[12];
 			if (dirty & /*five*/ 2) roomlabelitem_changes.five = /*five*/ ctx[1];
 			roomlabelitem.$set(roomlabelitem_changes);
 		},
@@ -172,11 +174,11 @@ function create_each_block(key_1, ctx) {
 function create_fragment(ctx) {
 	let div;
 	let each_blocks = [];
-	let each_1_lookup = new Map();
+	let each_1_lookup = new Map_1();
 	let div_resize_listener;
 	let current;
 	let each_value = /*roomLabels*/ ctx[0];
-	const get_key = ctx => /*roomLableItem*/ ctx[9].id;
+	const get_key = ctx => /*roomLableItem*/ ctx[12].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -193,7 +195,7 @@ function create_fragment(ctx) {
 			}
 
 			internal.attr(div, "class", "room-labels-container svelte-9eg4zi");
-			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[4].call(div));
+			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[6].call(div));
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -202,7 +204,7 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[4].bind(div));
+			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[6].bind(div));
 			current = true;
 		},
 		p(ctx, [dirty]) {
@@ -242,22 +244,17 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
+	let rendererSize;
 	let { five } = $$props;
 	let { roomLabels } = $$props;
 	let containerWidth;
 	let containerHeight;
+	let shownFloor = null;
 
-	function getLabelVisible(five, roomLabelItem) {
-		// 先看是不是在当前展示的楼层上
-		const isLabelInFloor = five.model.shownFloor === null || roomLabelItem.floorIndex === five.model.shownFloor;
-
-		if (!isLabelInFloor) return false;
-
-		// 再看是不是被模型遮挡
+	function getLabelVisible(item) {
 		const raycaster = new three.Raycaster();
-
 		const cameraPosition = five.camera.position.clone();
-		const position = new three.Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+		const position = new three.Vector3(item.position.x, item.position.y, item.position.z);
 		const vectorDistance = position.distanceTo(cameraPosition);
 		raycaster.set(cameraPosition.clone(), position.clone().sub(cameraPosition).normalize());
 		const [intersection] = five.model.intersectRaycaster(raycaster);
@@ -265,53 +262,60 @@ function instance($$self, $$props, $$invalidate) {
 		return true;
 	}
 
-	function getLabelTransform(five, roomLabelItem) {
-		const position = new three.Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+	function getLabelTransform(item, rendererSize) {
+		const position = new three.Vector3(item.position.x, item.position.y, item.position.z);
 		const mouse = position.clone().project(five.camera);
-		const xOffset = Math.ceil((mouse.x + 1) / 2 * containerWidth);
-		const yOffset = Math.ceil((-mouse.y + 1) / 2 * containerHeight);
+		const xOffset = Math.ceil((mouse.x + 1) / 2 * rendererSize.x);
+		const yOffset = Math.ceil((-mouse.y + 1) / 2 * rendererSize.y);
 		return `translate(${xOffset}px, ${yOffset}px)`;
 	}
 
-	function getFormatedRoomLabels(five, labels) {
-		const newLabels = labels.map(roomLabelItem => {
-			// 计算是否可见，如果不可见，不会更新位置
-			const visible = getLabelVisible(five, roomLabelItem);
+	function getFormatedRoomLabels(rendererSize) {
+		// 因为 item distance 需要重复计算，所以缓存一下
+		const distanceMap = new Map();
+
+		function getItemDistance(item) {
+			const cacheDistance = distanceMap.get(item.id);
+			if (cacheDistance) return cacheDistance;
+			const { x, y, z } = item.position;
+			const distance = new three.Vector3(x, y, z).clone().distanceTo(five.camera.position);
+			distanceMap.set(item.id, distance);
+			return distance;
+		}
 
-			if (!visible) return Object.assign(Object.assign({}, roomLabelItem), { visible });
+		const formatedItems = roomLabels.map(item => {
+			const visible = getLabelVisible(item);
 
-			// 更新位置
-			const transform = getLabelTransform(five, roomLabelItem);
+			const transform = visible
+			? getLabelTransform(item, rendererSize)
+			: item.transform;
 
-			return Object.assign(Object.assign({}, roomLabelItem), { visible, transform });
-		});
+			const itemDistance = getItemDistance(item);
 
-		const sortedRoomLabelItems = newLabels.filter(({ visible }) => visible).map(roomLabelItem => ({
-			roomLabelItem,
-			distance: new three.Vector3(...Object.values(roomLabelItem.position)).clone().distanceTo(five.camera.position)
-		})).sort((a, b) => a.distance - b.distance);
+			// visible === true 的 item 中，distance 比自己小的 item 个数
+			const minItemLen = roomLabels.filter(item => item.visible && getItemDistance(item) < itemDistance).length;
 
-		return newLabels.map(roomLabelItem => {
-			const sortIndex = sortedRoomLabelItems.findIndex(item => item.roomLabelItem.id === roomLabelItem.id);
-			if (sortIndex !== undefined) return Object.assign(Object.assign({}, roomLabelItem), { zIndex: sortIndex * 10 });
-			return roomLabelItem;
+			const zIndex = minItemLen * 10;
+			return Object.assign(Object.assign({}, item), { visible, transform, zIndex });
 		});
+
+		return formatedItems;
 	}
 
 	function onFiveCameraUpdate() {
-		$$invalidate(0, roomLabels = getFormatedRoomLabels(five, roomLabels));
+		$$invalidate(0, roomLabels = getFormatedRoomLabels(rendererSize));
+	}
+
+	function onFiveModelShownFloorChange(floorIndex) {
+		$$invalidate(4, shownFloor = floorIndex);
 	}
 
 	five.on('cameraUpdate', onFiveCameraUpdate);
-	five.on('modelShownFloorChange', onFiveCameraUpdate);
+	five.on('modelShownFloorChange', onFiveModelShownFloorChange);
 
 	svelte.onDestroy(() => {
 		five.off('cameraUpdate', onFiveCameraUpdate);
-		five.off('modelShownFloorChange', onFiveCameraUpdate);
-	});
-
-	svelte.onMount(() => {
-		onFiveCameraUpdate();
+		five.off('modelShownFloorChange', onFiveModelShownFloorChange);
 	});
 
 	function div_elementresize_handler() {
@@ -326,7 +330,39 @@ function instance($$self, $$props, $$invalidate) {
 		if ('roomLabels' in $$props) $$invalidate(0, roomLabels = $$props.roomLabels);
 	};
 
-	return [roomLabels, five, containerWidth, containerHeight, div_elementresize_handler];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*containerWidth, containerHeight*/ 12) {
+			$$invalidate(5, rendererSize = { x: containerWidth, y: containerHeight });
+		}
+
+		if ($$self.$$.dirty & /*rendererSize*/ 32) {
+			{
+				// rendererSize 变化时，触发 reRender
+				$$invalidate(0, roomLabels = getFormatedRoomLabels(rendererSize));
+			}
+		}
+
+		if ($$self.$$.dirty & /*roomLabels, shownFloor*/ 17) {
+			{
+				// shownFloor 变化时，更新 item visible
+				$$invalidate(0, roomLabels = roomLabels.map(item => {
+					const isLabelInFloor = shownFloor === null || item.floorIndex === shownFloor;
+					const visible = isLabelInFloor ? item.visible : false;
+					return Object.assign(Object.assign({}, item), { visible });
+				}));
+			}
+		}
+	};
+
+	return [
+		roomLabels,
+		five,
+		containerWidth,
+		containerHeight,
+		shownFloor,
+		rendererSize,
+		div_elementresize_handler
+	];
 }
 
 class RoomLabelItems extends internal.SvelteComponent {

package/dist/ModelTVVideoPlugin/Plugin.d.ts

@@ -0,0 +1,4 @@
+import type { FivePlugin } from '@realsee/five';
+import type { ModelTVVideoPluginExportType, ModelTVVideoPluginParameterType } from "./typings";
+export declare const ModelTVVideoPlugin: FivePlugin<ModelTVVideoPluginParameterType, ModelTVVideoPluginExportType>;
+export default ModelTVVideoPlugin;

package/dist/ModelTVVideoPlugin/index.d.ts

@@ -1,4 +1,5 @@
-import type { FivePlugin } from '@realsee/five';
-import type { ModelTVVideoPluginExportType, ModelTVVideoPluginParameterType } from "./typings";
-export declare const ModelTVVideoPlugin: FivePlugin<ModelTVVideoPluginParameterType, ModelTVVideoPluginExportType>;
+import ModelTVVideoPlugin from './Plugin';
+export { ModelTVVideoPlugin };
 export default ModelTVVideoPlugin;
+export type { ModelTVVideoPluginParameterType, ModelTVVideoPluginData, Point, ModelTVVideoPluginExportType } from './typings';
+export { DIRECTION } from './typings';