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

package/libs/ModelEntryDoorGuidePlugin/index.js

@@ -1,140 +1,3 @@
-import { AnimationMixer, MeshBasicMaterial } from 'three';
-import * as THREE from 'three';
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
-import createCanvasTextTexture from '../shared-utils/createCanvasTextTexture';
-import transformPositionToVector3 from '../shared-utils/three/transformPositionToVector3';
-import transfromToMeshBasicMaterial from '../shared-utils/three/transfromToMeshBasicMaterial';
-/**
- * 模型入户门引导插件
- */
-export const ModelEntryDoorGuidePlugin = (five, params) => {
-    var _a, _b, _c;
-    // 局部状态
-    const state = {};
-    const defaultAnimationEnable = (_a = params.animationEnabled) !== null && _a !== void 0 ? _a : true;
-    const defaultModelPosition = (_b = params.position) !== null && _b !== void 0 ? _b : undefined;
-    const defaultRad = (_c = params.rad) !== null && _c !== void 0 ? _c : undefined;
-    const defaultFbxUrl = params.fbx_url || '//vrlab-image4.ljcdn.com/release/web/entryDoorMini/Anim_Door1.fbx';
-    const mixers = [];
-    const load = async (data) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const position = (_a = data === null || data === void 0 ? void 0 : data.position) !== null && _a !== void 0 ? _a : defaultModelPosition;
-        if (!position)
-            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): position is undefined`);
-        const modelPosition = transformPositionToVector3(position);
-        const rad = (_b = data === null || data === void 0 ? void 0 : data.rad) !== null && _b !== void 0 ? _b : defaultRad;
-        const fbxUrl = (_c = data === null || data === void 0 ? void 0 : data.fbx_url) !== null && _c !== void 0 ? _c : defaultFbxUrl;
-        state.rad = rad;
-        if (rad === undefined)
-            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): rad is ${rad}`);
-        // 加载模型
-        const object = await new FBXLoader().loadAsync(fbxUrl);
-        // 设置位置
-        object.position.copy(modelPosition);
-        object.rotation.z = rad;
-        object.scale.set(0.8, 0.8, 0.8);
-        transfromToMeshBasicMaterial(object, { transparent: true, side: THREE.DoubleSide });
-        const textMesh = (_g = (_f = (_e = (_d = object.children) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f[3]) === null || _g === void 0 ? void 0 : _g.clone();
-        if (!textMesh)
-            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): textMesh is ${textMesh}`);
-        textMesh.material = new MeshBasicMaterial({ transparent: true, map: createCanvasTextTexture('入户门') });
-        textMesh.renderOrder = 3;
-        object.children[0].add(textMesh);
-        state.object = object;
-        return true;
-    };
-    const initAnimation = () => {
-        if (state.animation)
-            return;
-        if (!state.object)
-            return console.error('ModelEntryDoorGuidePlugin.initAnimation(): state.object is ', state.object);
-        // action
-        const animationSpeed = 1;
-        const mixer = new AnimationMixer(state.object);
-        mixers.push(mixer);
-        const action = mixer.clipAction(state.object.animations[0]);
-        action.timeScale = animationSpeed;
-        let stopAnimation;
-        const requestAnimationFrameLoop = () => {
-            let index = 0;
-            let oldTime = 0;
-            const minDeltaTime = 1000 / 30;
-            const animation = (time) => {
-                index = requestAnimationFrame(animation);
-                const deltaTime = time - oldTime;
-                if (deltaTime < minDeltaTime)
-                    return;
-                oldTime = time;
-                mixers.forEach((mixer) => mixer.update(deltaTime / 1000));
-                five.needsRender = true;
-            };
-            index = requestAnimationFrame(animation);
-            return () => {
-                cancelAnimationFrame(index);
-            };
-        };
-        const play = () => {
-            if (stopAnimation)
-                return;
-            action.play();
-            stopAnimation = requestAnimationFrameLoop();
-            // 开始播动画时，rotation可能会还原
-            requestAnimationFrame(() => {
-                if (state.object && state.object.rotation.z !== state.rad)
-                    state.object.rotation.z = state.rad;
-            });
-        };
-        const stop = () => {
-            action.stop();
-            stopAnimation === null || stopAnimation === void 0 ? void 0 : stopAnimation();
-            stopAnimation = undefined;
-        };
-        const animation = { play, stop };
-        state.animation = animation;
-    };
-    const show = (config) => {
-        var _a;
-        if (!state.object)
-            return console.error('ModelEntryDoorGuidePlugin.enable(): object is ', state.object);
-        const animationEnable = (_a = config === null || config === void 0 ? void 0 : config.animationEnable) !== null && _a !== void 0 ? _a : defaultAnimationEnable;
-        if (animationEnable) {
-            if (!state.animation)
-                initAnimation();
-            state.animation.play();
-        }
-        five.scene.add(state.object);
-        five.needsRender = true;
-    };
-    const hide = () => {
-        if (!state.object)
-            return;
-        if (state.animation)
-            state.animation.stop();
-        five.scene.remove(state.object);
-        five.needsRender = true;
-    };
-    const modeChangeHandler = (mode) => (mode === 'Floorplan' ? show() : hide());
-    const enable = (config) => {
-        if (state.enabled)
-            return true;
-        state.enabled = true;
-        modeChangeHandler(five.currentMode);
-        five.on('modeChange', modeChangeHandler);
-        show(config);
-        return true;
-    };
-    const disable = () => {
-        if (!state.enabled)
-            return true;
-        state.enabled = false;
-        hide();
-        five.off('modeChange', modeChangeHandler);
-        return true;
-    };
-    return { load, enable, disable };
-};
-export const modelEntryDoorGuidePluginServerParams = {
-    name: 'ModelEntryDoorGuidePlugin',
-    version: 0,
-};
+import ModelEntryDoorGuidePlugin from './Plugin';
+export { ModelEntryDoorGuidePlugin };
 export default ModelEntryDoorGuidePlugin;

package/libs/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/libs/ModelItemLabelPlugin/ModelItemLabelPlugin.js

@@ -0,0 +1,120 @@
+import { Five, Subscribe } from "@realsee/five";
+import ItemLabelComponent from './ItemLabelComponent';
+import { DISPLAY_STRATEGY_TYPE } from "./typings";
+import { parseModelItemLabelPluginData } from "./utils/parseData";
+export const ModelItemLabelPlugin = (five, params) => {
+    var _a, _b;
+    const pluginState = {
+        container: document.createElement('div'),
+        data: null,
+        enabled: true,
+        fiveModeEnabled: undefined,
+        itemLabels: [],
+        wrapper: null,
+        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,
+    };
+    pluginState.container.setAttribute('class', 'model-item-label-plugin-container');
+    pluginState.container.style.cssText = `
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 5;
+    `;
+    pluginState.container.style.pointerEvents = 'none'; // 写到 cssText 里不生效
+    const appendTo = (wrapper) => {
+        pluginState.wrapper = wrapper;
+        wrapper.appendChild(pluginState.container);
+        render();
+        return true;
+    };
+    const load = (data) => {
+        pluginState.itemLabels = parseModelItemLabelPluginData(data);
+        render();
+    };
+    const enable = () => {
+        if (pluginState.enabled)
+            return true;
+        pluginState.enabled = true;
+        render();
+        return true;
+    };
+    const disable = () => {
+        if (!pluginState.enabled)
+            return true;
+        pluginState.enabled = false;
+        render();
+        return true;
+    };
+    const dispose = () => {
+        removeListener4Five();
+        pluginState.container.remove();
+    };
+    const render = () => {
+        var _a;
+        if (!pluginState.wrapper)
+            return;
+        // 只要不可展示，销毁容器
+        if (!pluginState.enabled || !pluginState.fiveModeEnabled) {
+            (_a = pluginState.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+            pluginState.app = undefined;
+            return;
+        }
+        // 正常显示时，分为 app 存在和不存在两种情况，如果存在，传值，不存在则初始化并传值
+        if (!pluginState.app) {
+            pluginState.app = new ItemLabelComponent({
+                target: pluginState.container,
+                props: {
+                    five: five,
+                    modelOcclusionEnable: pluginState.modelOcclusionEnable,
+                    itemLabels: pluginState.itemLabels,
+                    wrapper: pluginState.wrapper,
+                    hooks: pluginState.hooks,
+                    displayStrategyType: pluginState.displayStrategyType
+                }
+            });
+        }
+        else {
+            pluginState.app.$set({
+                five: five,
+                itemLabels: pluginState.itemLabels
+            });
+        }
+    };
+    // 添加 five 监听
+    const addListener4Five = () => {
+        five.on('modeChange', onFiveModeChange);
+        five.once('dispose', dispose);
+    };
+    // 取消 five 监听
+    const removeListener4Five = () => {
+        five.off('modeChange', onFiveModeChange);
+    };
+    const onFiveModeChange = (mode) => {
+        if (!pluginState.enabled)
+            return;
+        if (mode !== Five.Mode.Floorplan) {
+            pluginState.fiveModeEnabled = false;
+            render();
+            return;
+        }
+        five.once('initAnimationEnded', () => {
+            pluginState.fiveModeEnabled = five.currentMode === Five.Mode.Floorplan;
+            render();
+        });
+    };
+    addListener4Five();
+    return {
+        appendTo,
+        load,
+        enable,
+        disable,
+        dispose,
+        hooks: pluginState.hooks
+    };
+};
+export default ModelItemLabelPlugin;

package/libs/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/libs/ModelItemLabelPlugin/index.js

@@ -1,120 +1,8 @@
-import { Five, Subscribe } from "@realsee/five";
-import ItemLabelComponent from './ItemLabelComponent';
-import { DISPLAY_STRATEGY_TYPE } from "./typings";
-import { parseModelItemLabelPluginData } from "./utils/parseData";
-export const ModelItemLabelPlugin = (five, params) => {
-    var _a, _b;
-    const pluginState = {
-        container: document.createElement('div'),
-        data: null,
-        enabled: true,
-        fiveModeEnabled: undefined,
-        itemLabels: [],
-        wrapper: null,
-        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,
-    };
-    pluginState.container.setAttribute('class', 'model-item-label-plugin-container');
-    pluginState.container.style.cssText = `
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 5;
-    `;
-    pluginState.container.style.pointerEvents = 'none'; // 写到 cssText 里不生效
-    const appendTo = (wrapper) => {
-        pluginState.wrapper = wrapper;
-        wrapper.appendChild(pluginState.container);
-        render();
-        return true;
-    };
-    const load = (data) => {
-        pluginState.itemLabels = parseModelItemLabelPluginData(data);
-        render();
-    };
-    const enable = () => {
-        if (pluginState.enabled)
-            return true;
-        pluginState.enabled = true;
-        render();
-        return true;
-    };
-    const disable = () => {
-        if (!pluginState.enabled)
-            return true;
-        pluginState.enabled = false;
-        render();
-        return true;
-    };
-    const dispose = () => {
-        removeListener4Five();
-        pluginState.container.remove();
-    };
-    const render = () => {
-        var _a;
-        if (!pluginState.wrapper)
-            return;
-        // 只要不可展示，销毁容器
-        if (!pluginState.enabled || !pluginState.fiveModeEnabled) {
-            (_a = pluginState.app) === null || _a === void 0 ? void 0 : _a.$destroy();
-            pluginState.app = undefined;
-            return;
-        }
-        // 正常显示时，分为 app 存在和不存在两种情况，如果存在，传值，不存在则初始化并传值
-        if (!pluginState.app) {
-            pluginState.app = new ItemLabelComponent({
-                target: pluginState.container,
-                props: {
-                    five: five,
-                    modelOcclusionEnable: pluginState.modelOcclusionEnable,
-                    itemLabels: pluginState.itemLabels,
-                    wrapper: pluginState.wrapper,
-                    hooks: pluginState.hooks,
-                    displayStrategyType: pluginState.displayStrategyType
-                }
-            });
-        }
-        else {
-            pluginState.app.$set({
-                five: five,
-                itemLabels: pluginState.itemLabels
-            });
-        }
-    };
-    // 添加 five 监听
-    const addListener4Five = () => {
-        five.on('modeChange', onFiveModeChange);
-        five.once('dispose', dispose);
-    };
-    // 取消 five 监听
-    const removeListener4Five = () => {
-        five.off('modeChange', onFiveModeChange);
-    };
-    const onFiveModeChange = (mode) => {
-        if (!pluginState.enabled)
-            return;
-        if (mode !== Five.Mode.Floorplan) {
-            pluginState.fiveModeEnabled = false;
-            render();
-            return;
-        }
-        five.once('initAnimationEnded', () => {
-            pluginState.fiveModeEnabled = five.currentMode === Five.Mode.Floorplan;
-            render();
-        });
-    };
-    addListener4Five();
-    return {
-        appendTo,
-        load,
-        enable,
-        disable,
-        dispose,
-        hooks: pluginState.hooks
-    };
-};
+import ModelItemLabelPlugin from './ModelItemLabelPlugin';
+export { ModelItemLabelPlugin };
 export default ModelItemLabelPlugin;
+export const modelItemLabelPluginServerParams = {
+    name: 'ModelItemLabelPlugin',
+    version: 0,
+};
+export { DISPLAY_STRATEGY_TYPE } from './typings';

package/libs/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/libs/ModelTVVideoPlugin/Plugin.js

@@ -0,0 +1,254 @@
+import * as THREE from 'three';
+import { parseModelTVVideoPoints } from "./utils/parseData";
+export 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 = async (data, videoElement) => {
+        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 = await 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 default ModelTVVideoPlugin;

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