@realsee/dnalogel 2.0.0-alpha.30 → 2.0.0-alpha.32

package/dist/index.js

@@ -1030,6 +1030,7 @@ const pluginStyle$1 = {
     top: '50%',
     transform: 'translate(-50%, -50%)',
     zIndex: '10',
+    pointerEvents: 'none'
 };
 
 const FLOORPLAN_EXTRA_OBJECT_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAwCAYAAACFUvPfAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAALaADAAQAAAABAAAAMAAAAADe2FZjAAAEF0lEQVRoBe2WzWskRRiHf13V092TxI2oEzYeVDwITtyDuCiihwiCePGgxIM3vYgHL4J4UIhBRA8i/gPqyUvWg7AiIuIeloDiYUHJLOK6BPwIk9nNODM9Xf1RVe1b3elJRjCZmQ6euqGmuqer33rq4e23GqiOykBloDJQGagMVAYqA5WBykBlYFYD1qwP/tdzaZqOx9zYOLxeX0+L5yzLGp0X/03a25MOnGRcBtx+6Rlo9SL08G4EooFnxa8Yiivox5/h5Ys/4cl7NVorNDRnngX+0MIkVMeMSf23zyKML8J7/Dy8hwF2Buh9CnS+AEQIdLspBuGb+M7/qLW4qJrNpsLapjYhpwVnx3BMfCtNNx3Etc9xywvnMf80wG8HmQainw0RxSGrnmeBp+8k5/j9S0HbvXb5io0Lz880/0wPHV1NlhLd316He+4xOCv5ragF7L9PrH1qBJyB0626x/lC+qrSvH5r/W+n1WpxUM5nMY4GPeH8lHJaPgfeAFQHCL+ntkXT+vnUc3W6pvTIwC0wy3rA4dwLmK2avZ7Eo9uKBuYJfgJscbs8dLCxDMt+EOEPBEZNEWyBYHqTz6bPXrzUnNrSShxHIsYiOL69zrCGLLcLqJP68tB+9w5wj+YhWDafQ2s61wNqxjZhmrQ2pvMFCEvXuCUZ7wqH794ZWs28LJqlTXSUyuksF2M/yOwqgkx2c1ADa4wLAQRk2sAGQQakhN6yFC2hltfz5kSY44NKQeeh+vtI/SSzWhg2CzCgmWISmKUGmaYFBDfCSymnfxJ6/+ospVcWOLLp5DGP/y0P/Rp66O99DQNq7Po3Ds0a0wY+My2QSv2N2mO/OyxR2o6UQk+Lv7yJ06JYSnnolZVU9cUn2O9SmaMWGFBqYXRwbqAJWIi94TX5biotpcGl1DXZ6LnqIbNDTnmUgi52Mv5l5ysMxIcZcGjy2DTK4ZHlcBC14zeSge4qphICjj3bS0A7o9nSp2TOkm7aZ8bGZy/jxhO87V91G0+dfY/Z7BWIIK9KYUi5qy/Hf8YfBG3sqJTHiQWhmTVkbip+wX3x6volVSx+LPAxF+VLXhZ8VQ+iP2Rta/iWe5v42Fngj0BbdnRTXh12ZIcKhTaGbcYjybRwXBU1lu9KlndXp04NM52poKWO0RZsviNaP9a6grkO972+st05pXhE5c1hTEluJy7XUejGUQNLMbAmTdWY1rKBLW3aTJqBZ7nZkb36DhYCreeYHbMUXHvaYi5XDK70EcgulmRjm77wNtenzuXCbmnTRaAx493rbGf3Jr/njMzj920CnKdUaFCjlDioy7NYNvOdGrQJNgI32/L2tkXfFPlxgToqjWVhD6KdLnQRdARf/HHQz2r2X2Gqy8pAZaAyUBmoDFQGKgP/q4F/AJYg9/s0ZoABAAAAAElFTkSuQmCC';
@@ -3893,7 +3894,7 @@ class CurrentFloor$1 extends internal.SvelteComponent {
 /* src/floorplan/Components/Main.svelte generated by Svelte v3.47.0 */
 
 function add_css$9(target) {
-	internal.append_styles(target, "svelte-q5wdnn", ".floorplan-main.svelte-q5wdnn{width:100%;height:100%}");
+	internal.append_styles(target, "svelte-86bqav", ".floorplan-main.svelte-86bqav{width:100%;height:100%;pointer-events:none}");
 }
 
 function get_each_context$4(ctx, list, i) {
@@ -3951,7 +3952,7 @@ function create_if_block$4(ctx) {
 			internal.create_component(camera.$$.fragment);
 			t1 = internal.space();
 			if (if_block) if_block.c();
-			internal.attr(div, "class", "floorplan-main svelte-q5wdnn");
+			internal.attr(div, "class", "floorplan-main svelte-86bqav");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -6287,6 +6288,7 @@ class ModelFloorplanPluginController {
             top: '50%',
             transform: 'translate(-50%, -50%)',
             zIndex: 10,
+            pointerEvents: 'none'
         });
         this.five.addExtraElement(this.container);
         // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
@@ -7357,7 +7359,7 @@ const PanoRulerPlugin = (five$1, params) => {
             throw new Error('标尺数据依赖不齐全！');
         }
         state.loaded = false;
-        state.options = Object.assign({}, state.options, options || {});
+        state.options = Object.assign(Object.assign({}, state.options), options || {});
         if (five$1.model.loaded) {
             return _load(roomInfo, roomRules);
         }
@@ -7459,7 +7461,8 @@ const PanoRulerPlugin = (five$1, params) => {
                 $element.style.display = 'none';
                 continue;
             }
-            if (start.distanceTo(end) < 0.5) {
+            // 线小于0.3m隐藏
+            if (start.distanceTo(end) < 0.3) {
                 $element.style.display = 'none';
                 continue;
             }
@@ -13793,7 +13796,7 @@ function create_if_block$1(ctx) {
 			div1 = internal.element("div");
 			div0 = internal.element("div");
 			internal.attr(div0, "class", "icon svelte-4rvov0");
-			internal.attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon ?? defaultIcon})`);
+			internal.attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`);
 			internal.attr(div1, "class", "icon-wrap svelte-4rvov0");
 		},
 		m(target, anchor) {
@@ -13806,7 +13809,7 @@ function create_if_block$1(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*itemLabel*/ 1 && div0_style_value !== (div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon ?? defaultIcon})`)) {
+			if (dirty & /*itemLabel*/ 1 && div0_style_value !== (div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`)) {
 				internal.attr(div0, "style", div0_style_value);
 			}
 		},
@@ -13824,7 +13827,7 @@ function create_fragment$1(ctx) {
 	let t0;
 	let div0;
 	let span0;
-	let t1_value = (/*itemLabel*/ ctx[0].code ?? /*itemLabel*/ ctx[0].id) + "";
+	let t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "";
 	let t1;
 	let t2;
 	let span1;
@@ -13896,7 +13899,7 @@ function create_fragment$1(ctx) {
 				if_block = null;
 			}
 
-			if (dirty & /*itemLabel*/ 1 && t1_value !== (t1_value = (/*itemLabel*/ ctx[0].code ?? /*itemLabel*/ ctx[0].id) + "")) internal.set_data(t1, t1_value);
+			if (dirty & /*itemLabel*/ 1 && t1_value !== (t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "")) internal.set_data(t1, t1_value);
 			if (dirty & /*itemLabel*/ 1 && t3_value !== (t3_value = /*itemLabel*/ ctx[0].name + "")) internal.set_data(t3, t3_value);
 
 			if (dirty & /*itemLabel*/ 1) {
@@ -13934,14 +13937,13 @@ function create_fragment$1(ctx) {
 	};
 }
 
-const defaultIcon = '//vrlab-public.ljcdn.com/common/file/web/c8591aaa-e62b-4e31-8fed-671483ace37f.svg\n';
-
 function instance$1($$self, $$props, $$invalidate) {
 	let { itemLabel } = $$props;
 	let { hooks } = $$props;
 	let { anchorEnabled } = $$props;
 	let { onIconClick } = $$props;
 
+	// const defaultIcon = '//vrlab-public.ljcdn.com/common/file/web/c8591aaa-e62b-4e31-8fed-671483ace37f.svg\n'
 	function onClick() {
 		hooks.emit('onLabelClick', itemLabel);
 	}
@@ -13988,7 +13990,8 @@ const isImpacted = (five, sourceVector, targetVector, distance) => {
     const raycaster = new Raycaster();
     raycaster.set(targetVector, direction);
     const [intersection] = five.model.intersectRaycaster(raycaster);
-    return intersection && distance <= intersection.distance + 0.1;
+    return intersection && intersection.distance + 0.01 < distance;
+    // return intersection && distance <= intersection.distance + 0.1
 };
 
 /**
@@ -14024,18 +14027,18 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[31] = list[i];
+	child_ctx[32] = list[i];
 	return child_ctx;
 }
 
-// (229:2) {#if itemLabelItem.visible}
+// (248:2) {#if itemLabelItem.visible}
 function create_if_block(ctx) {
 	let itemlabelitem;
 	let current;
 
 	itemlabelitem = new ItemLabelItem({
 			props: {
-				itemLabel: /*itemLabelItem*/ ctx[31],
+				itemLabel: /*itemLabelItem*/ ctx[32],
 				hooks: /*hooks*/ ctx[0],
 				anchorEnabled: /*anchorEnabled*/ ctx[2],
 				onIconClick: /*onIconClick*/ ctx[6]
@@ -14052,7 +14055,7 @@ function create_if_block(ctx) {
 		},
 		p(ctx, dirty) {
 			const itemlabelitem_changes = {};
-			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[31];
+			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[32];
 			if (dirty[0] & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
 			if (dirty[0] & /*anchorEnabled*/ 4) itemlabelitem_changes.anchorEnabled = /*anchorEnabled*/ ctx[2];
 			itemlabelitem.$set(itemlabelitem_changes);
@@ -14072,12 +14075,12 @@ function create_if_block(ctx) {
 	};
 }
 
-// (228:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (247:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let if_block_anchor;
 	let current;
-	let if_block = /*itemLabelItem*/ ctx[31].visible && create_if_block(ctx);
+	let if_block = /*itemLabelItem*/ ctx[32].visible && create_if_block(ctx);
 
 	return {
 		key: key_1,
@@ -14097,7 +14100,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (/*itemLabelItem*/ ctx[31].visible) {
+			if (/*itemLabelItem*/ ctx[32].visible) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
@@ -14144,7 +14147,7 @@ function create_fragment(ctx) {
 	let div_resize_listener;
 	let current;
 	let each_value = /*renderItemLabels*/ ctx[1];
-	const get_key = ctx => /*itemLabelItem*/ ctx[31].id;
+	const get_key = ctx => /*itemLabelItem*/ ctx[32].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -14246,7 +14249,7 @@ function instance($$self, $$props, $$invalidate) {
  * 1、当前楼层(假设先不考虑多楼层)
  * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
  * */
-	const getLabelVisible = (five$1, itemLabel) => {
+	const judgeImpacted = (five$1, itemLabel) => {
 		// 虚拟 VR 仅有一层，不考虑楼层信息
 		const cameraPosition = five$1.camera.position.clone();
 
@@ -14267,6 +14270,17 @@ function instance($$self, $$props, $$invalidate) {
 	// const [intersection] = five.model.intersectRaycaster(raycaster)
 	// return !(intersection && intersection.distance + 1 < vectorDistance);
 
+	const judgeInViewport = modelPoint => {
+		const { camera, model } = five$1;
+		const { x: offsetXFromCenter, y: offsetYFromCenter, z: offsetZFromCenter } = modelPoint.clone().project(camera);
+		const ratioFromLeft = (offsetXFromCenter + 1) / 2;
+		const ratioFromTop = (2 - (offsetYFromCenter + 1)) / 2;
+		const isFront = Math.abs(offsetZFromCenter) < 1;
+		const cssOffset = [ratioFromLeft, ratioFromTop];
+		const isInViewport = isFront && cssOffset.every(ratio => ratio < 1 && ratio >= 0);
+		return Boolean(isInViewport);
+	};
+
 	// cssOffset 获取
 	const getLabelCssOffset = (five, itemLabel) => {
 		const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
@@ -14283,19 +14297,26 @@ function instance($$self, $$props, $$invalidate) {
 		return [xOffset, yOffset];
 	};
 
-	const getFormatedItemLabels = (five, labels) => {
+	const getFormatedItemLabels = (five$1, labels) => {
 		// 计算位置 & 可见性
 		const newLabels = labels.map(label => {
-			const cssOffset = getLabelCssOffset(five, label);
+			const cssOffset = getLabelCssOffset(five$1, label);
 			label.name.length * basicWidth;
 			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
 
 			// 是否加入碰撞检测
-			const naturalVisible = modelOcclusionEnable
-			? getLabelVisible(five, label)
-			: label.visible;
+			// 配置加入碰撞检测，则判断碰撞检测
+			// 在可见范围内， 仅在 Panorama 模态计算
+			const isInViewport = five$1.currentMode === five.Five.Mode.Panorama
+			? judgeInViewport(new Vector3(label.position[0], label.position[1], label.position[2]))
+			: true;
+
+			// 碰撞
+			const isBlocked = modelOcclusionEnable
+			? judgeImpacted(five$1, label)
+			: false;
 
-			const visible = naturalVisible;
+			const visible = isInViewport && !isBlocked;
 
 			// 关掉重叠计算
 			// const visible = naturalVisible && !isOverlap([cssOffset[0], cssOffset[1] + strokeLength], curLabelWidth)
@@ -14311,7 +14332,7 @@ function instance($$self, $$props, $$invalidate) {
 
 		const sortedItemLabelItems = newLabels.filter(({ visible }) => visible).map(label => ({
 			itemLabelItem: label,
-			distance: new Vector3(label.modelPosition[0], label.modelPosition[1], label.modelPosition[2]).clone().distanceTo(five.camera.position)
+			distance: new Vector3(label.modelPosition[0], label.modelPosition[1], label.modelPosition[2]).clone().distanceTo(five$1.camera.position)
 		})).sort((a, b) => a.distance - b.distance);
 
 		return newLabels.map(label => {
@@ -14326,24 +14347,11 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(1, renderItemLabels = getFormatedItemLabels(five$1, renderItemLabels));
 	};
 
-	svelte.beforeUpdate(() => {
-		addDataUpdateListener();
-	});
-
 	const handleCameraUpdateCallback = () => {
 		$$invalidate(5, itemsVisible = false);
 		handleCameraUpdate();
 	};
 
-	svelte.onMount(() => {
-		$$invalidate(1, renderItemLabels = transform2RenderData(itemLabels));
-		curItemLabels = itemLabels;
-		onItemLabelUpdate();
-		addResizeListener();
-		five$1.on('cameraUpdate', handleCameraUpdateCallback);
-		five$1.on('modeChange', onFiveModeChange);
-	});
-
 	const onFiveModeChange = mode => {
 		$$invalidate(5, itemsVisible = false);
 
@@ -14391,12 +14399,6 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		});
 
-	svelte.onDestroy(() => {
-		five$1.off('cameraUpdate', handleCameraUpdateCallback);
-		five$1.off('modeChange', onFiveModeChange);
-		resizeObserver.unobserve(wrapper);
-	});
-
 	const getNearObserverPano = (fromPositionVector, observers) => {
 		let candidates = [];
 
@@ -14434,6 +14436,7 @@ function instance($$self, $$props, $$invalidate) {
 		const observer = getNearObserverPano(fromPositionVector, observers);
 
 		if (observer) {
+			console.log('--has observer--');
 			itemLabel.observerIndex = observer.panoIndex;
 		}
 
@@ -14466,6 +14469,25 @@ function instance($$self, $$props, $$invalidate) {
 		}
 	};
 
+	svelte.beforeUpdate(() => {
+		addDataUpdateListener();
+	});
+
+	svelte.onMount(() => {
+		$$invalidate(1, renderItemLabels = transform2RenderData(itemLabels));
+		curItemLabels = itemLabels;
+		onItemLabelUpdate();
+		addResizeListener();
+		five$1.on('cameraUpdate', handleCameraUpdateCallback);
+		five$1.on('modeChange', onFiveModeChange);
+	});
+
+	svelte.onDestroy(() => {
+		five$1.off('cameraUpdate', handleCameraUpdateCallback);
+		five$1.off('modeChange', onFiveModeChange);
+		resizeObserver.unobserve(wrapper);
+	});
+
 	function div_elementresize_handler() {
 		containerWidth = this.clientWidth;
 		containerHeight = this.clientHeight;

package/dist/index.umd.js

@@ -1018,6 +1018,7 @@
         top: '50%',
         transform: 'translate(-50%, -50%)',
         zIndex: '10',
+        pointerEvents: 'none'
     };
 
     const FLOORPLAN_EXTRA_OBJECT_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAwCAYAAACFUvPfAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAALaADAAQAAAABAAAAMAAAAADe2FZjAAAEF0lEQVRoBe2WzWskRRiHf13V092TxI2oEzYeVDwITtyDuCiihwiCePGgxIM3vYgHL4J4UIhBRA8i/gPqyUvWg7AiIuIeloDiYUHJLOK6BPwIk9nNODM9Xf1RVe1b3elJRjCZmQ6euqGmuqer33rq4e23GqiOykBloDJQGagMVAYqA5WBykBlYFYD1qwP/tdzaZqOx9zYOLxeX0+L5yzLGp0X/03a25MOnGRcBtx+6Rlo9SL08G4EooFnxa8Yiivox5/h5Ys/4cl7NVorNDRnngX+0MIkVMeMSf23zyKML8J7/Dy8hwF2Buh9CnS+AEQIdLspBuGb+M7/qLW4qJrNpsLapjYhpwVnx3BMfCtNNx3Etc9xywvnMf80wG8HmQainw0RxSGrnmeBp+8k5/j9S0HbvXb5io0Lz880/0wPHV1NlhLd316He+4xOCv5ragF7L9PrH1qBJyB0626x/lC+qrSvH5r/W+n1WpxUM5nMY4GPeH8lHJaPgfeAFQHCL+ntkXT+vnUc3W6pvTIwC0wy3rA4dwLmK2avZ7Eo9uKBuYJfgJscbs8dLCxDMt+EOEPBEZNEWyBYHqTz6bPXrzUnNrSShxHIsYiOL69zrCGLLcLqJP68tB+9w5wj+YhWDafQ2s61wNqxjZhmrQ2pvMFCEvXuCUZ7wqH794ZWs28LJqlTXSUyuksF2M/yOwqgkx2c1ADa4wLAQRk2sAGQQakhN6yFC2hltfz5kSY44NKQeeh+vtI/SSzWhg2CzCgmWISmKUGmaYFBDfCSymnfxJ6/+ospVcWOLLp5DGP/y0P/Rp66O99DQNq7Po3Ds0a0wY+My2QSv2N2mO/OyxR2o6UQk+Lv7yJ06JYSnnolZVU9cUn2O9SmaMWGFBqYXRwbqAJWIi94TX5biotpcGl1DXZ6LnqIbNDTnmUgi52Mv5l5ysMxIcZcGjy2DTK4ZHlcBC14zeSge4qphICjj3bS0A7o9nSp2TOkm7aZ8bGZy/jxhO87V91G0+dfY/Z7BWIIK9KYUi5qy/Hf8YfBG3sqJTHiQWhmTVkbip+wX3x6volVSx+LPAxF+VLXhZ8VQ+iP2Rta/iWe5v42Fngj0BbdnRTXh12ZIcKhTaGbcYjybRwXBU1lu9KlndXp04NM52poKWO0RZsviNaP9a6grkO972+st05pXhE5c1hTEluJy7XUejGUQNLMbAmTdWY1rKBLW3aTJqBZ7nZkb36DhYCreeYHbMUXHvaYi5XDK70EcgulmRjm77wNtenzuXCbmnTRaAx493rbGf3Jr/njMzj920CnKdUaFCjlDioy7NYNvOdGrQJNgI32/L2tkXfFPlxgToqjWVhD6KdLnQRdARf/HHQz2r2X2Gqy8pAZaAyUBmoDFQGKgP/q4F/AJYg9/s0ZoABAAAAAElFTkSuQmCC';
@@ -3881,7 +3882,7 @@
     /* src/floorplan/Components/Main.svelte generated by Svelte v3.47.0 */
 
     function add_css$9(target) {
-    	internal.append_styles(target, "svelte-q5wdnn", ".floorplan-main.svelte-q5wdnn{width:100%;height:100%}");
+    	internal.append_styles(target, "svelte-86bqav", ".floorplan-main.svelte-86bqav{width:100%;height:100%;pointer-events:none}");
     }
 
     function get_each_context$4(ctx, list, i) {
@@ -3939,7 +3940,7 @@
     			internal.create_component(camera.$$.fragment);
     			t1 = internal.space();
     			if (if_block) if_block.c();
-    			internal.attr(div, "class", "floorplan-main svelte-q5wdnn");
+    			internal.attr(div, "class", "floorplan-main svelte-86bqav");
     		},
     		m(target, anchor) {
     			internal.insert(target, div, anchor);
@@ -6275,6 +6276,7 @@
                 top: '50%',
                 transform: 'translate(-50%, -50%)',
                 zIndex: 10,
+                pointerEvents: 'none'
             });
             this.five.addExtraElement(this.container);
             // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
@@ -7345,7 +7347,7 @@
                 throw new Error('标尺数据依赖不齐全！');
             }
             state.loaded = false;
-            state.options = Object.assign({}, state.options, options || {});
+            state.options = Object.assign(Object.assign({}, state.options), options || {});
             if (five$1.model.loaded) {
                 return _load(roomInfo, roomRules);
             }
@@ -7447,7 +7449,8 @@
                     $element.style.display = 'none';
                     continue;
                 }
-                if (start.distanceTo(end) < 0.5) {
+                // 线小于0.3m隐藏
+                if (start.distanceTo(end) < 0.3) {
                     $element.style.display = 'none';
                     continue;
                 }
@@ -13781,7 +13784,7 @@
     			div1 = internal.element("div");
     			div0 = internal.element("div");
     			internal.attr(div0, "class", "icon svelte-4rvov0");
-    			internal.attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon ?? defaultIcon})`);
+    			internal.attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`);
     			internal.attr(div1, "class", "icon-wrap svelte-4rvov0");
     		},
     		m(target, anchor) {
@@ -13794,7 +13797,7 @@
     			}
     		},
     		p(ctx, dirty) {
-    			if (dirty & /*itemLabel*/ 1 && div0_style_value !== (div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon ?? defaultIcon})`)) {
+    			if (dirty & /*itemLabel*/ 1 && div0_style_value !== (div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`)) {
     				internal.attr(div0, "style", div0_style_value);
     			}
     		},
@@ -13812,7 +13815,7 @@
     	let t0;
     	let div0;
     	let span0;
-    	let t1_value = (/*itemLabel*/ ctx[0].code ?? /*itemLabel*/ ctx[0].id) + "";
+    	let t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "";
     	let t1;
     	let t2;
     	let span1;
@@ -13884,7 +13887,7 @@
     				if_block = null;
     			}
 
-    			if (dirty & /*itemLabel*/ 1 && t1_value !== (t1_value = (/*itemLabel*/ ctx[0].code ?? /*itemLabel*/ ctx[0].id) + "")) internal.set_data(t1, t1_value);
+    			if (dirty & /*itemLabel*/ 1 && t1_value !== (t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "")) internal.set_data(t1, t1_value);
     			if (dirty & /*itemLabel*/ 1 && t3_value !== (t3_value = /*itemLabel*/ ctx[0].name + "")) internal.set_data(t3, t3_value);
 
     			if (dirty & /*itemLabel*/ 1) {
@@ -13922,14 +13925,13 @@
     	};
     }
 
-    const defaultIcon = '//vrlab-public.ljcdn.com/common/file/web/c8591aaa-e62b-4e31-8fed-671483ace37f.svg\n';
-
     function instance$1($$self, $$props, $$invalidate) {
     	let { itemLabel } = $$props;
     	let { hooks } = $$props;
     	let { anchorEnabled } = $$props;
     	let { onIconClick } = $$props;
 
+    	// const defaultIcon = '//vrlab-public.ljcdn.com/common/file/web/c8591aaa-e62b-4e31-8fed-671483ace37f.svg\n'
     	function onClick() {
     		hooks.emit('onLabelClick', itemLabel);
     	}
@@ -13976,7 +13978,8 @@
         const raycaster = new Raycaster();
         raycaster.set(targetVector, direction);
         const [intersection] = five.model.intersectRaycaster(raycaster);
-        return intersection && distance <= intersection.distance + 0.1;
+        return intersection && intersection.distance + 0.01 < distance;
+        // return intersection && distance <= intersection.distance + 0.1
     };
 
     /**
@@ -14012,18 +14015,18 @@
 
     function get_each_context(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[31] = list[i];
+    	child_ctx[32] = list[i];
     	return child_ctx;
     }
 
-    // (229:2) {#if itemLabelItem.visible}
+    // (248:2) {#if itemLabelItem.visible}
     function create_if_block(ctx) {
     	let itemlabelitem;
     	let current;
 
     	itemlabelitem = new ItemLabelItem({
     			props: {
-    				itemLabel: /*itemLabelItem*/ ctx[31],
+    				itemLabel: /*itemLabelItem*/ ctx[32],
     				hooks: /*hooks*/ ctx[0],
     				anchorEnabled: /*anchorEnabled*/ ctx[2],
     				onIconClick: /*onIconClick*/ ctx[6]
@@ -14040,7 +14043,7 @@
     		},
     		p(ctx, dirty) {
     			const itemlabelitem_changes = {};
-    			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[31];
+    			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[32];
     			if (dirty[0] & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
     			if (dirty[0] & /*anchorEnabled*/ 4) itemlabelitem_changes.anchorEnabled = /*anchorEnabled*/ ctx[2];
     			itemlabelitem.$set(itemlabelitem_changes);
@@ -14060,12 +14063,12 @@
     	};
     }
 
-    // (228:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+    // (247:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
     function create_each_block(key_1, ctx) {
     	let first;
     	let if_block_anchor;
     	let current;
-    	let if_block = /*itemLabelItem*/ ctx[31].visible && create_if_block(ctx);
+    	let if_block = /*itemLabelItem*/ ctx[32].visible && create_if_block(ctx);
 
     	return {
     		key: key_1,
@@ -14085,7 +14088,7 @@
     		p(new_ctx, dirty) {
     			ctx = new_ctx;
 
-    			if (/*itemLabelItem*/ ctx[31].visible) {
+    			if (/*itemLabelItem*/ ctx[32].visible) {
     				if (if_block) {
     					if_block.p(ctx, dirty);
 
@@ -14132,7 +14135,7 @@
     	let div_resize_listener;
     	let current;
     	let each_value = /*renderItemLabels*/ ctx[1];
-    	const get_key = ctx => /*itemLabelItem*/ ctx[31].id;
+    	const get_key = ctx => /*itemLabelItem*/ ctx[32].id;
 
     	for (let i = 0; i < each_value.length; i += 1) {
     		let child_ctx = get_each_context(ctx, each_value, i);
@@ -14234,7 +14237,7 @@
      * 1、当前楼层(假设先不考虑多楼层)
      * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
      * */
-    	const getLabelVisible = (five$1, itemLabel) => {
+    	const judgeImpacted = (five$1, itemLabel) => {
     		// 虚拟 VR 仅有一层，不考虑楼层信息
     		const cameraPosition = five$1.camera.position.clone();
 
@@ -14255,6 +14258,17 @@
     	// const [intersection] = five.model.intersectRaycaster(raycaster)
     	// return !(intersection && intersection.distance + 1 < vectorDistance);
 
+    	const judgeInViewport = modelPoint => {
+    		const { camera, model } = five$1;
+    		const { x: offsetXFromCenter, y: offsetYFromCenter, z: offsetZFromCenter } = modelPoint.clone().project(camera);
+    		const ratioFromLeft = (offsetXFromCenter + 1) / 2;
+    		const ratioFromTop = (2 - (offsetYFromCenter + 1)) / 2;
+    		const isFront = Math.abs(offsetZFromCenter) < 1;
+    		const cssOffset = [ratioFromLeft, ratioFromTop];
+    		const isInViewport = isFront && cssOffset.every(ratio => ratio < 1 && ratio >= 0);
+    		return Boolean(isInViewport);
+    	};
+
     	// cssOffset 获取
     	const getLabelCssOffset = (five, itemLabel) => {
     		const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
@@ -14271,19 +14285,26 @@
     		return [xOffset, yOffset];
     	};
 
-    	const getFormatedItemLabels = (five, labels) => {
+    	const getFormatedItemLabels = (five$1, labels) => {
     		// 计算位置 & 可见性
     		const newLabels = labels.map(label => {
-    			const cssOffset = getLabelCssOffset(five, label);
+    			const cssOffset = getLabelCssOffset(five$1, label);
     			label.name.length * basicWidth;
     			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
 
     			// 是否加入碰撞检测
-    			const naturalVisible = modelOcclusionEnable
-    			? getLabelVisible(five, label)
-    			: label.visible;
+    			// 配置加入碰撞检测，则判断碰撞检测
+    			// 在可见范围内， 仅在 Panorama 模态计算
+    			const isInViewport = five$1.currentMode === five.Five.Mode.Panorama
+    			? judgeInViewport(new Vector3(label.position[0], label.position[1], label.position[2]))
+    			: true;
+
+    			// 碰撞
+    			const isBlocked = modelOcclusionEnable
+    			? judgeImpacted(five$1, label)
+    			: false;
 
-    			const visible = naturalVisible;
+    			const visible = isInViewport && !isBlocked;
 
     			// 关掉重叠计算
     			// const visible = naturalVisible && !isOverlap([cssOffset[0], cssOffset[1] + strokeLength], curLabelWidth)
@@ -14299,7 +14320,7 @@
 
     		const sortedItemLabelItems = newLabels.filter(({ visible }) => visible).map(label => ({
     			itemLabelItem: label,
-    			distance: new Vector3(label.modelPosition[0], label.modelPosition[1], label.modelPosition[2]).clone().distanceTo(five.camera.position)
+    			distance: new Vector3(label.modelPosition[0], label.modelPosition[1], label.modelPosition[2]).clone().distanceTo(five$1.camera.position)
     		})).sort((a, b) => a.distance - b.distance);
 
     		return newLabels.map(label => {
@@ -14314,24 +14335,11 @@
     		$$invalidate(1, renderItemLabels = getFormatedItemLabels(five$1, renderItemLabels));
     	};
 
-    	svelte.beforeUpdate(() => {
-    		addDataUpdateListener();
-    	});
-
     	const handleCameraUpdateCallback = () => {
     		$$invalidate(5, itemsVisible = false);
     		handleCameraUpdate();
     	};
 
-    	svelte.onMount(() => {
-    		$$invalidate(1, renderItemLabels = transform2RenderData(itemLabels));
-    		curItemLabels = itemLabels;
-    		onItemLabelUpdate();
-    		addResizeListener();
-    		five$1.on('cameraUpdate', handleCameraUpdateCallback);
-    		five$1.on('modeChange', onFiveModeChange);
-    	});
-
     	const onFiveModeChange = mode => {
     		$$invalidate(5, itemsVisible = false);
 
@@ -14379,12 +14387,6 @@
     			}
     		});
 
-    	svelte.onDestroy(() => {
-    		five$1.off('cameraUpdate', handleCameraUpdateCallback);
-    		five$1.off('modeChange', onFiveModeChange);
-    		resizeObserver.unobserve(wrapper);
-    	});
-
     	const getNearObserverPano = (fromPositionVector, observers) => {
     		let candidates = [];
 
@@ -14422,6 +14424,7 @@
     		const observer = getNearObserverPano(fromPositionVector, observers);
 
     		if (observer) {
+    			console.log('--has observer--');
     			itemLabel.observerIndex = observer.panoIndex;
     		}
 
@@ -14454,6 +14457,25 @@
     		}
     	};
 
+    	svelte.beforeUpdate(() => {
+    		addDataUpdateListener();
+    	});
+
+    	svelte.onMount(() => {
+    		$$invalidate(1, renderItemLabels = transform2RenderData(itemLabels));
+    		curItemLabels = itemLabels;
+    		onItemLabelUpdate();
+    		addResizeListener();
+    		five$1.on('cameraUpdate', handleCameraUpdateCallback);
+    		five$1.on('modeChange', onFiveModeChange);
+    	});
+
+    	svelte.onDestroy(() => {
+    		five$1.off('cameraUpdate', handleCameraUpdateCallback);
+    		five$1.off('modeChange', onFiveModeChange);
+    		resizeObserver.unobserve(wrapper);
+    	});
+
     	function div_elementresize_handler() {
     		containerWidth = this.clientWidth;
     		containerHeight = this.clientHeight;