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

package/CHANGELOG.md

@@ -0,0 +1,49 @@
+# CHANGELOG
+
+## 2.0.0-alpha.14
+- 1.feat: 新增 ModelTVVideoPlugin 插件；
+- 2.fix: 修复 ModelItemLabelPlugin disable & enable 方法逻辑；
+- 3.refactor: 增加 ModelItemLabelPlugin 类型导出。
+
+## 2.0.0-alpha.13
+- 1.chore: 修改 tsconfig.json target 配置项为 es6。
+
+## 2.0.0-alpha.12
+- 1.feat: 新增 ModelItemLabelPlugin
+
+## 2.0.0-alpha.11
+- 1.fix: 修复 ModelRoomLabelPlugin 未监听多楼层切换 rerender 问题。
+- 2.feat: ModelFloorplanPlugin & TopviewFloorplanPlugin 新增 `northDesc?: string` 配置项，支持用户修改指北针名称。
+
+## 2.0.0-alpha.10
+- 1.feat: 新增空间三维标签插件 PanoSpatialTagPlugin
+- 2.feat: 新增轻量 ejs 渲染模板函数 shared-utils/tinyEJSrender.js
+
+## 2.0.0-alpha.9
+- 1.refactor: 增加插件独立 js 输出及对 svelte 的编译。
+
+## 2.0.0-alpha.8
+- 1.fix: 修复 ModelViewPlugin 实景 VR 模型不居中问题；
+- 2.fix: 修复 ModelRoomLabelPlugin fov 更新未 rerender 问题；
+- 2.fix: 修复 ModelRoomLabelPlugin enable 判断问题；
+- 4.fix: 修改 ModelFloorplanPlugin 在全景态满足户型图的俯仰角时会自动切换户型图问题。
+
+## 2.0.0-alpha.7
+- 1.fix: PanoCompassPlugin 向下兼容；
+- 2.feat: 新增 PC 全景测量插件：PanoMeasurePlugin；
+- 3.docs: 修改 README.md；
+
+## 2.0.0-alpha.6
+- 1.fix: 标尺插件 PanoRulerPlugin 所有标尺仅展示一次问题；
+- 2.fix: TopviewFloorplanPlugin && ModelFloorplanPlugin 插件小雷达位置显示不正确问题；
+- 3.feat: 为 TopviewFloorplanPlugin && ModelFloorplanPlugin 插件新增线框图吸附位置配置选项。 
+  - 可选地板、天花板、模型中心，默认吸附选项为模型中心。
+
+## 2.0.0-alpha.5
+1.修复全景指南针插件 PanoCompassPlugin 默认导出 name
+
+## 2.0.0-alpha.4
+1.新增全景标尺插件 PanoRulerPlugin
+
+## 2.0.0-alpha.3
+1.新增全景指南针插件 PanoCompassPlugin

package/README.md

@@ -1,50 +1,100 @@
-# 注意
-2.x 版本依赖 `svelte`， 使用时请同时安装 
-```bash
-npm install svelte 
-```
+<p align="center">
+	<a href="https://realsee.js.org/"><img src="https://vrlab-public.ljcdn.com/common/file/web/ea031fa5-ad82-46b3-86c8-7b20ec1e635a.jpg" width="60" /></a>
+</p>
 
-# 如视 -- "Dnalogel"
+<p align="center">
+  <a href="https://www.npmjs.com/package/@realsee/dnalogel">
+    <img src="https://img.shields.io/npm/v/@realsee/dnalogel.svg" alt="npm version" >
+  </a>
+  <a href="https://packagephobia.now.sh/result?p=@realsee/dnalogel">
+    <img src="https://packagephobia.now.sh/badge?p=@realsee/dnalogel" alt="install size" >
+  </a>
+  <a href="https://github.com/realsee-developer/dnalogel/blob/main/plugins/TERMS.txt">
+    <img src="https://img.shields.io/npm/l/@realsee/dnalogel.svg" alt="license">
+  </a>
+</p>
 
-[如视(realsee.com)](https://realsee.com) 提供了在浏览器环境中的渲染三维空间 [VR 看房 SDK Five](https://open-platform.realsee.com/developer/docs/front/3d-space/get-started/rendering-engine/) 。
-通过 [如视开放 API](https://open-platform.realsee.com/developer/open/api/#/) 并结合 Five 的渲染能力可以制作丰富多彩的三维空间应用。
+<h1 align="center">@realsee/dnalogel</h1>
 
-除了 Five 强大的三维空间渲染能力之外，我们也积累了大量的 **VR 看房** 常用功能，并以 `Five Plugins` 的形式进行抽象。
+# 👀 Overview
 
-无论是经过线上环境千锤百炼的刚需功能，还是灵感一现的炫酷尝试，凡是最终落地的功能我们均毫无保留的开源至 github [realsee-developer](https://github.com/realsee-developer) 空间。
+@realsee/dnalogel 将 [如视(realsee.com)](https://realsee.com) **VR 看房** 常用能力沉淀，并以 `Five Plugins` 形式进行抽象。
+结合[如视 VR 看房 SDK Five](https://open-platform.realsee.com/developer/docs/front/3d-space/get-started/rendering-engine/) 
+与 [如视开放 API](https://open-platform.realsee.com/developer/open/api/#/) ,可以制作出丰富多彩的三维空间应用。不论是经过线上环境千锤百炼的刚需功能，还是灵感一现的炫酷尝试，所有已经落地的功能我们均毫无保留的开源至github [realsee-developer/dnalogel](https://github.com/realsee-developer/dnalogel) 。
 
-如果插件满足您的需求，`npm install @realsee/dnalogel`一键安装使用。
+# 🔨 Usage
 
-如果不满足需求，没关系，把我们当作代码示例，我们抛砖引玉。
+**1、安装**
 
-我们也很期待您基于 [Three.js](https://threejs.org/) 、[Five.js](https://www.npmjs.com/package/@realsee/five) 等这类渲染库做出有意思的功能。
+```bash
+npm install @realsee/dnalogel
+```
 
+```bash
+yarn add @realsee/dnalogel
+```
 
-### 插件列表
-- ModelViewPlugin：模型小窗插件
-- PanoFloorplanRadarPlugin：全景户型雷达图插件
-- ModelRoomLabelPlugin：模型态房屋标签插件
-- TopviewFloorplanPlugin：俯视模型户型图插件
-- ModelChassisCompassPlugin：模型底盘指南针插件
-- ModelEntryDoorGuidePlugin：模型入户门引导插件
-- CSS3DRenderPlugin：CSS3D渲染插件
-- CameraMovementPlugin：相机运镜插件
-- ModelFloorplanPlugin：模型户型图插件
-- PanoRulerPlugin：全景标尺插件
-- PanoCompassPlugin：全景指南针插件
-- ... 待补充
+2.x 版本依赖 `svelte`， 使用时请同时安装:
+```bash
+npm install svelte 
+```
+
+```bash
+yarn add svelte 
+```
 
-### 使用方式
+**2、插件注册**
 
 ```js
 import { Five } from '@realsee/five'
-import Plugin from '@realsee/dnalogel/plugins/Plugin'
+import { Plugin } from '@realsee/dnalogel'
 const five = new Five({
   plugins: [[Plugin, 'PluginName', initOptions]],
 })
+```
+
+**3、插件方法使用**
 
+```js
 // 不同插件提供的方法可能存在差异,请参考各插件 API 文档
 five.plugins.PluginName.load(data)
 five.plugins.PluginName.enable()
 five.plugins.PluginName.disable()
+five.plugins.PluginName.dispose()
 ```
+
+**4、插件依赖数据获取**
+
+您可以通过 [open API](https://open-platform.realsee.com/developer/open/api#/) 查看数据获取方式及相关 open API 。
+
+# 📖 Documents
+
+- [说明文档](https://open-platform.realsee.com/developer/docs/front/3d-space/advanced/dnalogel/ModelViewPlugin/)
+- [API 文档](https://unpkg.com/@realsee/dnalogel/docs/index.html)
+- [demo 源码](https://github.com/realsee-developer/dnalogel/tree/main/examples/src)
+- [数据依赖来源：open API](https://open-platform.realsee.com/developer/open/api/)
+- [CHANGELOG](https://github.com/realsee-developer/dnalogel/blob/main/plugins/CHANGELOG.md)
+
+# 💡 Preview
+
+我们为每个插件书写了简单的效果示例，您可点击预览：
+[@realsee/dnalogel showcase](https://realsee.js.org/dnalogel/)
+
+
+# 🧾 Lists
+
+- 🔌 ModelViewPlugin：模型小窗插件
+- 🔌 PanoFloorplanRadarPlugin：全景户型雷达图插件
+- 🔌 ModelRoomLabelPlugin：模型态房屋标签插件
+- 🔌 TopviewFloorplanPlugin：俯视模型户型图插件
+- 🔌 ModelChassisCompassPlugin：模型底盘指南针插件
+- 🔌 ModelEntryDoorGuidePlugin：模型入户门引导插件
+- 🔌 CSS3DRenderPlugin：CSS3D渲染插件
+- 🔌 CameraMovementPlugin：相机运镜插件
+- 🔌 ModelFloorplanPlugin：模型户型图插件
+- 🔌 PanoRulerPlugin：全景标尺插件
+- 🔌 PanoCompassPlugin：全景指南针插件
+- 其他插件持续更新中...
+
+# License
+[TERMS](https://github.com/realsee-developer/dnalogel/blob/main/plugins/TERMS.txt)

package/dist/ModelItemLabelPlugin/index.js

@@ -519,7 +519,8 @@ 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 : DISPLAY_STRATEGY_TYPE.SMALL,
+        pending: false
     };
     pluginState.container.setAttribute('class', 'model-item-label-plugin-container');
     pluginState.container.style.cssText = `
@@ -528,8 +529,8 @@ const ModelItemLabelPlugin = (five$1, params) => {
         top: 0;
         width: 100%;
         height: 100%;
-        pointerEvents: none;
     `;
+    pluginState.container.style.pointerEvents = 'none'; // 写到 cssText 里不生效
     const appendTo = (wrapper) => {
         pluginState.wrapper = wrapper;
         wrapper.appendChild(pluginState.container);
@@ -537,7 +538,6 @@ const ModelItemLabelPlugin = (five$1, params) => {
         return true;
     };
     const load = (data) => {
-        console.log('🐶--当前标签总条数： ', data.model_item_labels.length);
         pluginState.itemLabels = parseModelItemLabelPluginData(data);
         render();
     };
@@ -560,23 +560,30 @@ const ModelItemLabelPlugin = (five$1, params) => {
         pluginState.container.remove();
     };
     const handleRerender = () => {
-        if (!pluginState.enabled || !pluginState.fiveModeEnabled)
+        if (!pluginState.enabled || !pluginState.fiveModeEnabled || pluginState.pending)
             return;
+        pluginState.pending = true;
         disable();
     };
     const rerender = (a, b, c) => {
+        if (!pluginState.pending)
+            return;
         if (!pluginState.fiveModeEnabled)
             return;
         if (!c)
             return;
+        pluginState.pending = false;
         enable();
         render();
     };
     const handleInteriaPanRerender = (a, b) => {
+        if (!pluginState.pending)
+            return;
         if (!pluginState.fiveModeEnabled)
             return;
         if (!b)
             return;
+        pluginState.pending = false;
         enable();
         render();
     };
@@ -586,10 +593,13 @@ const ModelItemLabelPlugin = (five$1, params) => {
         }
     };
     const handlePanGesture = (pose, final) => {
+        if (!pluginState.pending)
+            return;
         if (!pluginState.fiveModeEnabled)
             return;
         if (!final)
             return;
+        pluginState.pending = false;
         enable();
         render();
     };
@@ -654,6 +664,8 @@ const ModelItemLabelPlugin = (five$1, params) => {
         five$1.off('pinchGesture', rerender);
     };
     const onFiveModeChange = (mode) => {
+        if (!pluginState.enabled || pluginState.pending)
+            return;
         if (mode !== five.Five.Mode.Floorplan) {
             pluginState.fiveModeEnabled = false;
             render();

package/dist/ModelItemLabelPlugin/typings.d.ts

@@ -52,4 +52,5 @@ export interface ModelItemLabelPluginState {
     hooks: Subscribe<PluginEvent>;
     modelOcclusionEnable: boolean;
     displayStrategyType: Partial<DISPLAY_STRATEGY_TYPE>;
+    pending: boolean;
 }

package/dist/ModelTVVideoPlugin/index.d.ts

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

package/dist/ModelTVVideoPlugin/index.js

@@ -0,0 +1,326 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var THREE = require('three');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+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__namespace.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__namespace.BufferAttribute(new Float32Array(verticesArray), 3));
+            geometry.setAttribute('uv', new THREE__namespace.BufferAttribute(new Float32Array(uvArray), 2));
+            geometry.setIndex(new THREE__namespace.BufferAttribute(new Uint32Array(indicesArray), 1));
+            const material = new THREE__namespace.MeshBasicMaterial({
+                map: state.videoTextureEnabled ? state.videoTexture : state.imageTexture,
+                side: THREE__namespace.DoubleSide,
+            });
+            const mesh = new THREE__namespace.Mesh(geometry, material);
+            mesh.renderOrder = 1;
+            mesh.name = `ModelTVVideoPlugin-${index}-${performance.now()}`;
+            return mesh;
+        });
+    };
+    const getImageTexture = (source) => {
+        const texture = new THREE__namespace.TextureLoader().load(source);
+        texture.minFilter = THREE__namespace.LinearFilter;
+        texture.magFilter = THREE__namespace.LinearFilter;
+        texture.format = THREE__namespace.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__namespace.VideoTexture(video);
+                        texture.minFilter = THREE__namespace.LinearFilter;
+                        texture.magFilter = THREE__namespace.LinearFilter;
+                        texture.format = THREE__namespace.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__namespace.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__namespace.Vector3(total.x + curr.x / points.length, total.y + curr.y / points.length, total.z + curr.z / points.length), new THREE__namespace.Vector3());
+                return (points.map((point) => new THREE__namespace.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__namespace.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__namespace.Vector3(total.x + curr.x / points.length, total.y + curr.y / points.length, total.z + curr.z / points.length), new THREE__namespace.Vector3());
+            return (points.map((point) => new THREE__namespace.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__namespace.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 };
+};
+
+exports.ModelTVVideoPlugin = ModelTVVideoPlugin;
+exports["default"] = ModelTVVideoPlugin;

package/dist/ModelTVVideoPlugin/typings.d.ts

@@ -0,0 +1,25 @@
+export interface ModelTVVideoPluginParameterType {
+    videoElement?: HTMLVideoElement;
+}
+export declare enum DIRECTION {
+    TOP_LEFT = "topLeft",
+    TOP_RIGHT = "topRight",
+    BOTTOM_LEFT = "bottomLeft",
+    BOTTOM_RIGHT = "bottomRight"
+}
+export interface Point {
+    x: number;
+    y: number;
+    z: number;
+}
+export interface ModelTVVideoPluginData {
+    enable?: boolean;
+    video_src: string;
+    video_poster_src: string;
+    points: Point[][] | Record<DIRECTION, Point>[];
+}
+export interface ModelTVVideoPluginExportType {
+    enable: () => void;
+    disable: () => void;
+    load: (data: ModelTVVideoPluginData, videoElement?: HTMLVideoElement) => Promise<void>;
+}

package/dist/ModelTVVideoPlugin/utils/parseData.d.ts

@@ -0,0 +1,2 @@
+import { DIRECTION, Point } from "../typings";
+export declare function parseModelTVVideoPoints(points: Point[][] | Record<DIRECTION, Point>[]): Point[][];

package/dist/PanoMeasurePlugin/index.js

@@ -2875,10 +2875,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() {

package/dist/index.d.ts

@@ -24,4 +24,7 @@ export type { PluginReturns, PluginEvent, LineJson, PointJson } from './PanoMeas
 export { default as PanoMeasurePlugin } from './PanoMeasurePlugin';
 export type { PanoSpatialTagPluginParameterType, PanoSpatialTagPluginData, PanoSpatialTagPluginExportType } from './PanoSpatialTagPlugin';
 export { default as PanoSpatialTagPlugin } from './PanoSpatialTagPlugin';
+export type { ModelItemLabelPluginData, ModelItemLabelPluginExportReturnsType, ModelItemLabelPluginParametersType } from './ModelItemLabelPlugin/typings';
 export { default as ModelItemLabelPlugin } from './ModelItemLabelPlugin';
+export type { ModelTVVideoPluginData, ModelTVVideoPluginParameterType, ModelTVVideoPluginExportType } from './ModelTVVideoPlugin/typings';
+export { default as ModelTVVideoPlugin } from './ModelTVVideoPlugin';