@realsee/dnalogel 2.0.0-alpha.13 → 2.0.0-alpha.16

package/dist/index.es.js

@@ -892,6 +892,7 @@ class ModelRoomLabelController {
         this.container.style.pointerEvents = 'none';
         this.container.style.left = '0';
         this.container.style.top = '0';
+        this.container.style.zIndex = '5';
         // five listener
         this.five.once('dispose', () => this.dispose());
         this.five.on('modeChange', this.onFiveModeChange);
@@ -10633,10 +10634,10 @@ if (typeof undefined$1 === 'function' && undefined$1.amd) {
 
 var Hammer = hammer.exports;
 
-var Hammer$1 = /*#__PURE__*/_mergeNamespaces({
+var Hammer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/_mergeNamespaces({
     __proto__: null,
     'default': Hammer
-}, [hammer.exports]);
+}, [hammer.exports]));
 
 // uuid
 function S4() {
@@ -14252,6 +14253,7 @@ var 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 = {}));
 
 /* src/ModelItemLabelPlugin/ItemLabelItem.svelte generated by Svelte v3.47.0 */
@@ -14365,6 +14367,21 @@ class ItemLabelItem extends SvelteComponent {
 	}
 }
 
+/**
+ * 创建一个防抖动函数，该函数会在 wait 毫秒后调用 func 方法
+ * @param func - 要防抖动的函数
+ * @param [wait=0] - 需要延迟的毫秒数
+ */
+function debounce(func, wait = 200) {
+    let last;
+    return function (...args) {
+        clearTimeout(last);
+        last = setTimeout(() => {
+            func(...args);
+        }, wait);
+    };
+}
+
 /* src/ModelItemLabelPlugin/ItemLabelComponent.svelte generated by Svelte v3.47.0 */
 
 function add_css(target) {
@@ -14373,11 +14390,11 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[26] = list[i];
+	child_ctx[28] = list[i];
 	return child_ctx;
 }
 
-// (179:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (162:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let itemlabelitem;
@@ -14385,7 +14402,7 @@ function create_each_block(key_1, ctx) {
 
 	itemlabelitem = new ItemLabelItem({
 			props: {
-				itemLabel: /*itemLabelItem*/ ctx[26],
+				itemLabel: /*itemLabelItem*/ ctx[28],
 				hooks: /*hooks*/ ctx[0]
 			}
 		});
@@ -14406,7 +14423,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const itemlabelitem_changes = {};
-			if (dirty & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[26];
+			if (dirty & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[28];
 			if (dirty & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
 			itemlabelitem.$set(itemlabelitem_changes);
 		},
@@ -14433,7 +14450,7 @@ function create_fragment(ctx) {
 	let div_resize_listener;
 	let current;
 	let each_value = /*renderItemLabels*/ ctx[1];
-	const get_key = ctx => /*itemLabelItem*/ ctx[26].id;
+	const get_key = ctx => /*itemLabelItem*/ ctx[28].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -14450,7 +14467,8 @@ function create_fragment(ctx) {
 			}
 
 			attr(div, "class", "item-labels-container svelte-rmdeb");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[9].call(div));
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[10].call(div));
+			set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -14459,7 +14477,7 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[9].bind(div));
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[10].bind(div));
 			current = true;
 		},
 		p(ctx, [dirty]) {
@@ -14469,6 +14487,10 @@ function create_fragment(ctx) {
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block, null, get_each_context);
 				check_outros();
 			}
+
+			if (dirty & /*itemsVisible*/ 16) {
+				set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
+			}
 		},
 		i(local) {
 			if (current) return;
@@ -14518,6 +14540,14 @@ function instance($$self, $$props, $$invalidate) {
 	// 计算重叠
 	let cssOffsetLists = [];
 
+	// 动画过程中 itemsVisible 为 false
+	let itemsVisible = true;
+
+	/**
+ * 可见性策略：
+ * 1、当前楼层(假设先不考虑多楼层)
+ * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
+ * */
 	const getLabelVisible = (five, itemLabel) => {
 		// 虚拟 VR 仅有一层，不考虑楼层信息
 		const raycaster = new Raycaster();
@@ -14571,6 +14601,8 @@ function instance($$self, $$props, $$invalidate) {
 				return Math.ceil(-38.9 * itemSpaceHeight + 130);
 			case DISPLAY_STRATEGY_TYPE.LARGE:
 				return Math.ceil(-44.44 * itemSpaceHeight + 140);
+			case DISPLAY_STRATEGY_TYPE.EXTRA_LARGE:
+				return Math.ceil(-92.59 * itemSpaceHeight + 300);
 		}
 	}
 
@@ -14617,15 +14649,27 @@ function instance($$self, $$props, $$invalidate) {
 		addDataUpdateListener();
 	});
 
+	const handleCameraUpdateCallback = () => {
+		$$invalidate(4, itemsVisible = false);
+		handleCameraUpdate();
+	};
+
 	onMount(() => {
 		$$invalidate(1, renderItemLabels = itemLabels);
 		curItemLabels = itemLabels;
 		onItemLabelUpdate();
-
-		// five.on('cameraUpdate', onItemLabelUpdate)
 		addResizeListener();
+		five.on('cameraUpdate', handleCameraUpdateCallback);
 	});
 
+	const handleCameraUpdate = debounce(
+		() => {
+			$$invalidate(4, itemsVisible = true);
+			onItemLabelUpdate();
+		},
+		300
+	);
+
 	const addResizeListener = () => {
 		wrapperSize = {
 			width: wrapper.clientWidth,
@@ -14639,7 +14683,6 @@ function instance($$self, $$props, $$invalidate) {
 		if (curItemLabels !== itemLabels) {
 			$$invalidate(1, renderItemLabels = itemLabels);
 			curItemLabels = itemLabels;
-			console.log('--debug--update--');
 			onItemLabelUpdate();
 		}
 	};
@@ -14657,13 +14700,11 @@ function instance($$self, $$props, $$invalidate) {
 		});
 
 	onDestroy(() => {
-		// five.off('cameraUpdate', onItemLabelUpdate)
+		five.off('cameraUpdate', handleCameraUpdateCallback);
 		resizeObserver.unobserve(wrapper);
-
-		curItemLabels = null;
-		$$invalidate(1, renderItemLabels = null);
-		wrapperSize = { width: 0, height: 0 };
-	});
+	}); // curItemLabels = null
+	// renderItemLabels = null
+	// wrapperSize = { width: 0, height: 0 }
 
 	function div_elementresize_handler() {
 		containerWidth = this.clientWidth;
@@ -14673,12 +14714,12 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('five' in $$props) $$invalidate(4, five = $$props.five);
-		if ('modelOcclusionEnable' in $$props) $$invalidate(5, modelOcclusionEnable = $$props.modelOcclusionEnable);
-		if ('itemLabels' in $$props) $$invalidate(6, itemLabels = $$props.itemLabels);
-		if ('wrapper' in $$props) $$invalidate(7, wrapper = $$props.wrapper);
+		if ('five' in $$props) $$invalidate(5, five = $$props.five);
+		if ('modelOcclusionEnable' in $$props) $$invalidate(6, modelOcclusionEnable = $$props.modelOcclusionEnable);
+		if ('itemLabels' in $$props) $$invalidate(7, itemLabels = $$props.itemLabels);
+		if ('wrapper' in $$props) $$invalidate(8, wrapper = $$props.wrapper);
 		if ('hooks' in $$props) $$invalidate(0, hooks = $$props.hooks);
-		if ('displayStrategyType' in $$props) $$invalidate(8, displayStrategyType = $$props.displayStrategyType);
+		if ('displayStrategyType' in $$props) $$invalidate(9, displayStrategyType = $$props.displayStrategyType);
 	};
 
 	return [
@@ -14686,6 +14727,7 @@ function instance($$self, $$props, $$invalidate) {
 		renderItemLabels,
 		containerWidth,
 		containerHeight,
+		itemsVisible,
 		five,
 		modelOcclusionEnable,
 		itemLabels,
@@ -14706,12 +14748,12 @@ class ItemLabelComponent extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				five: 4,
-				modelOcclusionEnable: 5,
-				itemLabels: 6,
-				wrapper: 7,
+				five: 5,
+				modelOcclusionEnable: 6,
+				itemLabels: 7,
+				wrapper: 8,
 				hooks: 0,
-				displayStrategyType: 8
+				displayStrategyType: 9
 			},
 			add_css
 		);
@@ -14735,7 +14777,7 @@ const ModelItemLabelPlugin = (five, params) => {
         app: undefined,
         hooks: new 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 : DISPLAY_STRATEGY_TYPE.SMALL,
     };
     pluginState.container.setAttribute('class', 'model-item-label-plugin-container');
     pluginState.container.style.cssText = `
@@ -14744,8 +14786,9 @@ const ModelItemLabelPlugin = (five, params) => {
         top: 0;
         width: 100%;
         height: 100%;
-        pointerEvents: none;
+        z-index: 5;
     `;
+    pluginState.container.style.pointerEvents = 'none'; // 写到 cssText 里不生效
     const appendTo = (wrapper) => {
         pluginState.wrapper = wrapper;
         wrapper.appendChild(pluginState.container);
@@ -14753,7 +14796,6 @@ const ModelItemLabelPlugin = (five, params) => {
         return true;
     };
     const load = (data) => {
-        console.log('🐶--当前标签总条数： ', data.model_item_labels.length);
         pluginState.itemLabels = parseModelItemLabelPluginData(data);
         render();
     };
@@ -14775,40 +14817,6 @@ const ModelItemLabelPlugin = (five, params) => {
         removeListener4Five();
         pluginState.container.remove();
     };
-    const handleRerender = () => {
-        if (!pluginState.enabled || !pluginState.fiveModeEnabled)
-            return;
-        disable();
-    };
-    const rerender = (a, b, c) => {
-        if (!pluginState.fiveModeEnabled)
-            return;
-        if (!c)
-            return;
-        enable();
-        render();
-    };
-    const handleInteriaPanRerender = (a, b) => {
-        if (!pluginState.fiveModeEnabled)
-            return;
-        if (!b)
-            return;
-        enable();
-        render();
-    };
-    const handleWantsPanGesture = (pose, final) => {
-        if (pose) {
-            handleRerender();
-        }
-    };
-    const handlePanGesture = (pose, final) => {
-        if (!pluginState.fiveModeEnabled)
-            return;
-        if (!final)
-            return;
-        enable();
-        render();
-    };
     const render = () => {
         var _a;
         if (!pluginState.wrapper)
@@ -14844,32 +14852,14 @@ const ModelItemLabelPlugin = (five, params) => {
     const addListener4Five = () => {
         five.on('modeChange', onFiveModeChange);
         five.once('dispose', dispose);
-        // five.on('wantsGesture', handleRerender)
-        // five.on('gesture', rerender)
-        five.on('wantsMouseWheel', handleRerender);
-        five.on('mouseWheel', rerender);
-        five.on('wantsInteriaPan', handleRerender);
-        five.on('interiaPan', handleInteriaPanRerender);
-        five.on('wantsPanGesture', handleWantsPanGesture);
-        five.on('panGesture', handlePanGesture);
-        five.on('wantsPinchGesture', handleRerender);
-        five.on('pinchGesture', rerender);
     };
     // 取消 five 监听
     const removeListener4Five = () => {
         five.off('modeChange', onFiveModeChange);
-        // five.off('wantsGesture', handleRerender)
-        // five.off('gesture', rerender)
-        five.off('wantsMouseWheel', handleRerender);
-        five.off('mouseWheel', rerender);
-        five.off('wantsInteriaPan', handleRerender);
-        five.off('interiaPan', handleInteriaPanRerender);
-        five.off('wantsPanGesture', handleWantsPanGesture);
-        five.off('panGesture', handlePanGesture);
-        five.off('wantsPinchGesture', handleRerender);
-        five.off('pinchGesture', rerender);
     };
     const onFiveModeChange = (mode) => {
+        if (!pluginState.enabled)
+            return;
         if (mode !== Five.Mode.Floorplan) {
             pluginState.fiveModeEnabled = false;
             render();
@@ -14891,4 +14881,277 @@ const ModelItemLabelPlugin = (five, params) => {
     };
 };
 
-export { CSS3DRenderPlugin, CameraMovementPlugin, FLOOR_PLAN_ATTACHED_TO, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelItemLabelPlugin, ModelRoomLabelPlugin, ModelViewPlugin, PanoCompassPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, PanoMeasurePlugin, PanoRulerPlugin, PanoSpatialTagPlugin, TopviewFloorplanPlugin };
+var DIRECTION;
+(function (DIRECTION) {
+    DIRECTION["TOP_LEFT"] = "topLeft";
+    DIRECTION["TOP_RIGHT"] = "topRight";
+    DIRECTION["BOTTOM_LEFT"] = "bottomLeft";
+    DIRECTION["BOTTOM_RIGHT"] = "bottomRight";
+})(DIRECTION || (DIRECTION = {}));
+
+function parseModelTVVideoPoints(points) {
+    if (points.length === 0)
+        return [];
+    if (Array.isArray(points[0]))
+        return points;
+    let newPoints = [];
+    points.map(point => {
+        const newPoint = [point[DIRECTION.TOP_LEFT], point[DIRECTION.BOTTOM_LEFT], point[DIRECTION.BOTTOM_RIGHT], point[DIRECTION.TOP_RIGHT]];
+        newPoints.push(newPoint);
+    });
+    return newPoints;
+}
+
+const ModelTVVideoPlugin = (five, { videoElement }) => {
+    const state = {
+        videoMeshes: [],
+        videoTextureEnabled: false,
+        videoSource: '',
+        rectPoints: [],
+        enabled: false,
+        videoElement: videoElement,
+    };
+    const setMuted = (muted) => {
+        if (state.videoTexture) {
+            state.videoTexture.image.muted = muted;
+            state.videoTexture.image.play();
+        }
+    };
+    const getMuted = () => {
+        if (state.videoTexture)
+            return state.videoTexture.image.muted;
+        else
+            return true;
+    };
+    const enable = () => {
+        if (state.enabled)
+            return;
+        if (!state.videoTexture)
+            return;
+        state.enabled = true;
+        state.videoMeshes = createPanoVideoMeshes();
+        console.log('state.videoMeshes', state.videoMeshes);
+        state.videoMeshes.forEach((mesh) => five.scene.add(mesh));
+        const play = () => {
+            console.log('play', state.videoTexture);
+            if (!state.videoTexture)
+                return;
+            const timeupdate = () => {
+                var _a;
+                if (!state.videoTexture)
+                    return;
+                (_a = state.videoTexture) === null || _a === void 0 ? void 0 : _a.image.removeEventListener('timeupdate', timeupdate);
+                state.videoTextureEnabled = true;
+                state.videoMeshes.forEach((mesh) => {
+                    if (mesh.material.map !== state.videoTexture)
+                        mesh.material.map = state.videoTexture;
+                });
+                five.needsRender = true;
+            };
+            state.videoTexture.image.addEventListener('timeupdate', timeupdate);
+            if (state.videoTexture && state.videoMeshes.length) {
+                state.videoTexture.image.play();
+            }
+        };
+        if (five.model.loaded)
+            play();
+        else {
+            return five.once('modelLoaded', () => play());
+        }
+    };
+    const disable = () => {
+        if (!state.enabled)
+            return;
+        state.enabled = false;
+        state.videoMeshes.forEach((mesh) => {
+            mesh.geometry.dispose();
+            mesh.material.dispose();
+            five.scene.remove(mesh);
+            if (state.videoTexture)
+                state.videoTexture.image.pause();
+        });
+        state.videoMeshes = [];
+        five.needsRender = true;
+    };
+    const createPanoVideoMeshes = () => {
+        return state.rectPoints.map((points, index) => {
+            const geometry = new THREE.BufferGeometry();
+            const segments = 128;
+            const verticesArray = [];
+            verticesArray.push(points[0].x, points[0].y, points[0].z);
+            for (let i = 1; i < segments; i++) {
+                verticesArray.push(points[0].x + ((points[1].x - points[0].x) * i) / segments, points[0].y + ((points[1].y - points[0].y) * i) / segments, points[0].z + ((points[1].z - points[0].z) * i) / segments);
+            }
+            verticesArray.push(points[1].x, points[1].y, points[1].z);
+            verticesArray.push(points[2].x, points[2].y, points[2].z);
+            for (let i = 1; i < segments; i++) {
+                verticesArray.push(points[2].x + ((points[3].x - points[2].x) * i) / segments, points[2].y + ((points[3].y - points[2].y) * i) / segments, points[2].z + ((points[3].z - points[2].z) * i) / segments);
+            }
+            verticesArray.push(points[3].x, points[3].y, points[3].z);
+            const uvArray = [];
+            uvArray.push(0, 1);
+            for (let i = 1; i < segments; i++) {
+                uvArray.push(0, 1 - i / segments);
+            }
+            uvArray.push(0, 0);
+            uvArray.push(1, 0);
+            for (let i = 1; i < segments; i++) {
+                uvArray.push(1, i / segments);
+            }
+            uvArray.push(1, 1);
+            const indicesArray = [];
+            for (let i = 0; i < segments; i++) {
+                indicesArray.push(i, i + 1, segments * 2 - i, i, segments * 2 - i, segments * 2 + 1 - i);
+            }
+            geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(verticesArray), 3));
+            geometry.setAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvArray), 2));
+            geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(indicesArray), 1));
+            const material = new THREE.MeshBasicMaterial({
+                map: state.videoTextureEnabled ? state.videoTexture : state.imageTexture,
+                side: THREE.DoubleSide,
+            });
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.renderOrder = 1;
+            mesh.name = `ModelTVVideoPlugin-${index}-${performance.now()}`;
+            return mesh;
+        });
+    };
+    const getImageTexture = (source) => {
+        const texture = new THREE.TextureLoader().load(source);
+        texture.minFilter = THREE.LinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+        texture.format = THREE.RGBFormat;
+        return texture;
+    };
+    const getVideoTexture = (source, video) => {
+        return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState == 4) {
+                    if (xhr.status == 200) {
+                        const url = window.URL || window.webkitURL;
+                        video = video || document.createElement('video');
+                        video.crossOrigin = 'anonymous';
+                        video.autoplay = true;
+                        video.muted = true;
+                        video.loop = true;
+                        video.playsInline = true;
+                        video.src = url.createObjectURL(xhr.response);
+                        const texture = new THREE.VideoTexture(video);
+                        texture.minFilter = THREE.LinearFilter;
+                        texture.magFilter = THREE.LinearFilter;
+                        texture.format = THREE.RGBFormat;
+                        resolve(Object.assign(texture, { videoSource: source }));
+                    }
+                    else {
+                        reject(new Error('Video download Error: ' + xhr.status));
+                    }
+                }
+            };
+            xhr.onerror = (error) => reject(error);
+            xhr.open('GET', source);
+            xhr.responseType = 'blob';
+            xhr.send();
+        });
+    };
+    const load = (data, videoElement) => __awaiter(void 0, void 0, void 0, function* () {
+        const { video_src, video_poster_src, points } = data;
+        state.videoSource = video_src;
+        // TODO 存疑，先处理多一次遍历 o(2n)
+        state.rectPoints = parseModelTVVideoPoints(points)
+            .map((items) => items.map(({ x, y, z }) => new THREE.Vector3(x, y, z)));
+        state.imageTexture = getImageTexture(video_poster_src);
+        if (videoElement) {
+            state.videoElement = videoElement;
+        }
+        state.videoTexture = yield getVideoTexture(state.videoSource, state.videoElement);
+        state.enabled = !!data.enable;
+        if (state.enabled)
+            enable();
+    });
+    const dispose = () => {
+        disable();
+        state.videoTexture = undefined;
+        five.off('modeChange', () => setMuted(true));
+        five.off('wantsTapGesture', (raycaster) => {
+            if (!state.enabled)
+                return;
+            const [intersect] = raycaster.intersectObjects(five.scene.children, true);
+            if (!!intersect && /^video/.test(intersect.object.name)) {
+                if (state.videoTexture)
+                    setMuted(!state.videoTexture.image.muted);
+                return false;
+            }
+        });
+        five.off('panoArrived', () => {
+            if (!state.enabled)
+                return;
+            if (getMuted())
+                return;
+            const cameraPosition = five.camera.position;
+            const visible = state.rectPoints.find((points) => {
+                const centerVector = points.reduce((total, curr) => new THREE.Vector3(total.x + curr.x / points.length, total.y + curr.y / points.length, total.z + curr.z / points.length), new THREE.Vector3());
+                return (points.map((point) => new THREE.Vector3((point.x + centerVector.x) / 2, (point.y + centerVector.y) / 2, (point.z + centerVector.z) / 2)).filter((vector) => {
+                    vector = vector.clone().sub(cameraPosition).normalize();
+                    const raycaster = new THREE.Raycaster(cameraPosition, vector);
+                    const [intersect] = raycaster.intersectObjects(five.scene.children, true);
+                    return !!intersect && /^video/.test(intersect.object.name);
+                }).length >= 2);
+            });
+            if (!visible)
+                setMuted(true);
+        });
+        five.off('renderFrame', () => {
+            // console.log('renderFrame', state.videoMeshes)
+            state.videoMeshes.forEach((meshes) => {
+                if (meshes)
+                    //@ts-ignore
+                    meshes.needsRender = true;
+            });
+        });
+    };
+    five.on('modeChange', () => setMuted(true));
+    five.on('wantsTapGesture', (raycaster) => {
+        if (!state.enabled)
+            return;
+        const targetMesh = five.scene.children.find(item => /^ModelTVVideoPlugin/.test(item.name));
+        if (!targetMesh)
+            return;
+        const intersectObjects = raycaster.intersectObjects([targetMesh]);
+        if (intersectObjects.length === 0)
+            return;
+        if (state.videoTexture)
+            setMuted(!state.videoTexture.image.muted); // TODO  toggle video play
+        return false;
+    });
+    five.on('panoArrived', () => {
+        if (!state.enabled)
+            return;
+        if (getMuted())
+            return;
+        const cameraPosition = five.camera.position;
+        const visible = state.rectPoints.find((points) => {
+            const centerVector = points.reduce((total, curr) => new THREE.Vector3(total.x + curr.x / points.length, total.y + curr.y / points.length, total.z + curr.z / points.length), new THREE.Vector3());
+            return (points.map((point) => new THREE.Vector3((point.x + centerVector.x) / 2, (point.y + centerVector.y) / 2, (point.z + centerVector.z) / 2)).filter((vector) => {
+                vector = vector.clone().sub(cameraPosition).normalize();
+                const raycaster = new THREE.Raycaster(cameraPosition, vector);
+                const [intersect] = raycaster.intersectObjects(five.scene.children, true);
+                return !!intersect && /^video/.test(intersect.object.name);
+            }).length >= 2);
+        });
+        if (!visible)
+            setMuted(true);
+    });
+    five.on('renderFrame', () => {
+        // console.log('renderFrame', state.videoMeshes)
+        state.videoMeshes.forEach((meshes) => {
+            if (meshes)
+                //@ts-ignore
+                meshes.needsRender = true;
+        });
+    });
+    Object.assign(window, { $state: state });
+    return { enable, disable, load, dispose };
+};
+
+export { CSS3DRenderPlugin, CameraMovementPlugin, FLOOR_PLAN_ATTACHED_TO, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelItemLabelPlugin, ModelRoomLabelPlugin, ModelTVVideoPlugin, ModelViewPlugin, PanoCompassPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, PanoMeasurePlugin, PanoRulerPlugin, PanoSpatialTagPlugin, TopviewFloorplanPlugin };