@realsee/dnalogel 0.1.7 → 2.0.0-alpha.3

package/libs/ModelRoomLabelPlugin/Assets/roomLabelBg.js

@@ -0,0 +1 @@
+export const ROOM_LABEL_BG = 'data:image/png;base64,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';

package/{plugins → libs}/ModelRoomLabelPlugin/Controller.d.ts

@@ -1,10 +1,11 @@
-import { Five } from '@realsee/five';
-import { ModelRoomLabelPluginData } from './typings';
+import type { Five } from '@realsee/five';
+import type { ModelRoomLabelPluginData } from './typings';
 export declare type ModelRoomLabelPluginParameters = undefined;
 export declare class ModelRoomLabelController {
     private five;
     private enabled;
     private fiveModeEnabled;
+    private app?;
     private wrapper?;
     private roomLabels;
     private container;

package/libs/ModelRoomLabelPlugin/Controller.js

@@ -0,0 +1,100 @@
+import RoomLabelItems from './RoomLabelItems.svelte';
+import { parseModelRoomLabelPluginData } from './utils/parseData';
+export class ModelRoomLabelController {
+    five;
+    enabled = true;
+    fiveModeEnabled;
+    app = undefined;
+    wrapper;
+    roomLabels = [];
+    container = document.createElement('div');
+    constructor(five) {
+        this.five = five;
+        this.fiveModeEnabled = this.five.currentMode === 'Floorplan';
+        // init container style
+        this.container.classList.add('model-room-label-plugin-container');
+        this.container.style.width = '100%';
+        this.container.style.height = '100%';
+        this.container.style.position = 'absolute';
+        this.container.style.pointerEvents = 'none';
+        this.container.style.left = '0';
+        this.container.style.top = '0';
+        // five listener
+        this.five.once('dispose', () => this.dispose());
+        this.five.on('modeChange', this.onFiveModeChange);
+        this.render();
+    }
+    dispose() {
+        this.five.off('modeChange', this.onFiveModeChange);
+        // ReactDOM.unmountComponentAtNode(this.container)
+        this.container.remove();
+    }
+    /** 加载数据 */
+    load(data) {
+        this.roomLabels = parseModelRoomLabelPluginData(data);
+        this.render();
+    }
+    /** 设置插件容器 */
+    appendTo(wrapper) {
+        this.wrapper = wrapper;
+        wrapper.appendChild(this.container);
+        this.render();
+        return this;
+    }
+    /** 禁用插件功能
+     * @description
+     * - 如果当前正在展示中，会清除所有展示的 DOM
+     * - 如果当前未展示，即使后续 Five 状态满足展示要求，也不会展示
+     * */
+    disable() {
+        this.enabled = false;
+        this.render();
+        return this;
+    }
+    /** 启用插件功能
+     * @description
+     * - 如果当前符合展示条件，会立刻展示
+     * - 如果不符合展示条件，会等待 Five 状态满足条件后再展示
+     */
+    enable() {
+        this.enabled = true;
+        this.render();
+        return this;
+    }
+    /** 监听 Five Mode 变化
+     * @description
+     * Mode 不符合要求时，立刻消失，满足要求时，需要等待动画结束再展示
+     */
+    onFiveModeChange = (mode) => {
+        if (mode !== 'Floorplan') {
+            this.fiveModeEnabled = false;
+            this.render();
+            return;
+        }
+        this.five.once('initAnimationEnded', () => {
+            this.fiveModeEnabled = this.five.currentMode === 'Floorplan';
+            this.render();
+        });
+    };
+    render() {
+        if (!this.wrapper)
+            return;
+        if (!this.enable || !this.fiveModeEnabled) {
+            this.app?.$destroy();
+            this.app = undefined;
+            return;
+        }
+        if (!this.app) {
+            this.app = new RoomLabelItems({
+                target: this.container,
+                props: {
+                    five: this.five,
+                    roomLabels: this.roomLabels,
+                },
+            });
+        }
+        else {
+            this.app.$set({ five: this.five, roomLabels: this.roomLabels });
+        }
+    }
+}

package/libs/ModelRoomLabelPlugin/RoomLabelItem.svelte

@@ -0,0 +1,63 @@
+<script>import { ROOM_LABEL_BG } from './Assets/roomLabelBg';
+export let five;
+export let roomLabel;
+function onClick() {
+    five.setState({ panoIndex: roomLabel.panoIndex, mode: 'Panorama', longitude: roomLabel.longitude });
+}
+</script>
+
+<div
+  class="room-label-item"
+  style:z-index="{roomLabel.zIndex}"
+  style:transform="{roomLabel.transform}"
+  style:opacity="{roomLabel.visible ? 1 : 0}"
+>
+  <span
+    class="room-label-item__text"
+    class:wide="{roomLabel.name.length > 3}"
+    style="background-image: url({ROOM_LABEL_BG})"
+    on:click="{onClick}">{roomLabel.name}</span
+  >
+  <div class="room-label-item__bar"></div>
+</div>
+
+<style>
+  .room-label-item {
+    position: absolute;
+    font-size: 8px;
+    z-index: 0;
+    transform: none;
+    cursor: pointer;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .room-label-item__text {
+    position: absolute;
+    left: 0;
+    top: -64px;
+    transform: translate(-50%, 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 20px;
+    min-width: 32px;
+    padding: 0 6px;
+    pointer-events: all;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    white-space: nowrap;
+  }
+
+  .room-label-item__bar {
+    position: absolute;
+    top: -44px;
+    height: 48px;
+    width: 1px;
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+  }
+
+  .wide {
+    font-size: 10px;
+  }
+</style>

package/libs/ModelRoomLabelPlugin/RoomLabelItem.svelte.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":[],"sources":["RoomLabelItem.svelte"]}

package/libs/ModelRoomLabelPlugin/RoomLabelItems.svelte

@@ -0,0 +1,80 @@
+<script>import { onDestroy, onMount } from 'svelte';
+import { Raycaster, Vector3 } from 'three';
+import RoomLabelItem from './RoomLabelItem.svelte';
+export let five;
+export let roomLabels;
+let containerWidth;
+let containerHeight;
+function getLabelVisible(five, roomLabelItem) {
+    // 先看是不是在当前展示的楼层上
+    const isLabelInFloor = five.model.shownFloor === null || roomLabelItem.floorIndex === five.model.shownFloor;
+    if (!isLabelInFloor)
+        return false;
+    // 再看是不是被模型遮挡
+    const raycaster = new Raycaster();
+    const cameraPosition = five.camera.position.clone();
+    const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+    const vectorDistance = position.distanceTo(cameraPosition);
+    raycaster.set(cameraPosition.clone(), position.clone().sub(cameraPosition).normalize());
+    const [intersection] = five.model.intersectRaycaster(raycaster);
+    if (intersection && intersection.distance + 1 < vectorDistance)
+        return false;
+    return true;
+}
+function getLabelTransform(five, roomLabelItem) {
+    const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+    const mouse = position.clone().project(five.camera);
+    const xOffset = Math.ceil(((mouse.x + 1) / 2) * containerWidth);
+    const yOffset = Math.ceil(((-mouse.y + 1) / 2) * containerHeight);
+    return `translate(${xOffset}px, ${yOffset}px)`;
+}
+function getFormatedRoomLabels(five, labels) {
+    const newLabels = labels.map((roomLabelItem) => {
+        // 计算是否可见，入股不可见，不会更新位置
+        const visible = getLabelVisible(five, roomLabelItem);
+        if (!visible)
+            return { ...roomLabelItem, visible };
+        // 更新位置
+        const transform = getLabelTransform(five, roomLabelItem);
+        return { ...roomLabelItem, visible, transform };
+    });
+    const sortedRoomLabelItems = newLabels
+        .filter(({ visible }) => visible)
+        .map((roomLabelItem) => ({
+        roomLabelItem: roomLabelItem,
+        distance: new Vector3(...Object.values(roomLabelItem.position)).clone().distanceTo(five.camera.position),
+    }))
+        .sort((a, b) => a.distance - b.distance);
+    return newLabels.map((roomLabelItem) => {
+        const sortIndex = sortedRoomLabelItems.findIndex((item) => item.roomLabelItem.id === roomLabelItem.id);
+        if (sortIndex !== undefined)
+            return { ...roomLabelItem, zIndex: sortIndex * 10 };
+        return roomLabelItem;
+    });
+}
+function onFiveCameraDirectionUpdate() {
+    roomLabels = getFormatedRoomLabels(five, roomLabels);
+}
+five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+onDestroy(() => {
+    five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+});
+onMount(() => {
+    onFiveCameraDirectionUpdate();
+});
+</script>
+
+<div class="room-labels-container" bind:clientWidth="{containerWidth}" bind:clientHeight="{containerHeight}">
+  {#each roomLabels as roomLableItem (roomLableItem.id)}
+    <RoomLabelItem roomLabel="{roomLableItem}" five="{five}" />
+  {/each}
+</div>
+
+<style>
+  .room-labels-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    color: #fff;
+  }
+</style>

package/libs/ModelRoomLabelPlugin/RoomLabelItems.svelte.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EjB,CAAC,CAAC,MAAM;;AAER,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;AAC5G,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC;AACvD,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC9D,EAAE,CAAC,CAAC,IAAI;AACR,CAAC,CAAC,GAAG;;AAEL,CAAC,KAAK;AACN,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;AACzB,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC;AACf,IAAI,MAAM,CAAC,CAAC,GAAG,CAAC;AAChB,IAAI,QAAQ,CAAC,CAAC,QAAQ;AACtB,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG;AACf,EAAE;AACF,CAAC,CAAC,KAAK;","names":[],"sources":["RoomLabelItems.svelte"]}

package/libs/ModelRoomLabelPlugin/index.d.ts

@@ -0,0 +1,12 @@
+import * as Controller from './Controller';
+import type { FivePlugin } from '@realsee/five';
+export declare const ModelRoomLabelPlugin: FivePlugin<Controller.ModelRoomLabelPluginParameters, ModelRoomLabelPluginReturnType>;
+export default ModelRoomLabelPlugin;
+export declare const modelRoomLabelPluginServerParams: {
+    name: string;
+    version: number;
+};
+export type { ModelRoomLabelController } from './Controller';
+export type { ModelRoomLabelPluginData, RoomLabel } from './typings';
+export declare type ModelRoomLabelPluginReturnType = Controller.ModelRoomLabelController;
+export type { ModelRoomLabelPluginParameters } from './Controller';

package/libs/ModelRoomLabelPlugin/index.js

@@ -0,0 +1,9 @@
+import * as Controller from './Controller';
+export const ModelRoomLabelPlugin = (five) => {
+    return new Controller.ModelRoomLabelController(five);
+};
+export default ModelRoomLabelPlugin;
+export const modelRoomLabelPluginServerParams = {
+    name: 'ModelRoomLabelPlugin',
+    version: 0,
+};

package/{plugins → libs}/ModelRoomLabelPlugin/typings.d.ts

@@ -1,4 +1,4 @@
-export declare type ModelRoomLabelPluginData = {
+export interface ModelRoomLabelPluginData {
     model_room_labels: Readonly<{
         id: string;
         name: string;
@@ -11,7 +11,7 @@ export declare type ModelRoomLabelPluginData = {
             z: number;
         };
     }>[];
-};
+}
 export interface RoomLabel {
     /** 房屋 ID */
     readonly id: string;

package/libs/ModelRoomLabelPlugin/typings.js

@@ -0,0 +1 @@
+export {};

package/libs/ModelRoomLabelPlugin/utils/parseData.js

@@ -0,0 +1,14 @@
+/** @description 下划线转驼峰 */
+export function parseModelRoomLabelPluginData(data) {
+    return data.model_room_labels.map(({ id, pano_index, floor_index, name, position, longitude }) => ({
+        id,
+        name,
+        position,
+        longitude,
+        panoIndex: pano_index,
+        floorIndex: floor_index,
+        zIndex: 0,
+        visible: false,
+        transform: '',
+    }));
+}

package/libs/ModelViewPlugin/index.js

@@ -0,0 +1,160 @@
+import * as THREE from 'three';
+/**
+ * Five 模型插件
+ * @template ExportType 导出方法
+ */
+export const ModelViewPlugin = (five) => {
+    let needsRender = true;
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 1000);
+    let model = new THREE.Object3D();
+    {
+        const light = new THREE.DirectionalLight(0xffffff, 0.5);
+        light.position.copy(new THREE.Vector3(1, 1, 1));
+        scene.add(light);
+    }
+    {
+        const light = new THREE.DirectionalLight(0xffffff, 0.3);
+        scene.add(light);
+    }
+    {
+        const light = new THREE.AmbientLight(0xffffff, 0.3);
+        scene.add(light);
+    }
+    scene.add(model);
+    let renderer = null;
+    const initRendererIfNeeds = () => {
+        if (!five.renderer)
+            return;
+        if (!renderer) {
+            renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });
+            renderer.setPixelRatio(five.renderer.getPixelRatio());
+            renderer.outputEncoding = THREE.sRGBEncoding;
+            renderer.setClearColor(0x181a1c, 0);
+            renderer.autoClear = true;
+        }
+        return renderer;
+    };
+    const modelWillLoad = () => {
+        model.traverse((object) => {
+            if (object instanceof THREE.Mesh) {
+                const materials = [].concat(object.material);
+                materials.forEach((material) => material.dispose());
+            }
+        });
+        scene.remove(model);
+        model = new THREE.Object3D();
+        scene.add(model);
+        update();
+    };
+    const modelLoaded = () => {
+        function cloneMaterial(material) {
+            material = material.clone();
+            material.uniforms.modelAlpha.value = 1;
+            if (material.uniforms.map.value) {
+                material.uniforms.map.value.needsUpdate = true;
+            }
+            return material;
+        }
+        function cloneModel(model) {
+            if (model instanceof THREE.Mesh) {
+                const geometry = model.geometry;
+                const material = Array.isArray(model.material)
+                    ? model.material.map(cloneMaterial)
+                    : cloneMaterial(model.material);
+                return new THREE.Mesh(geometry, material);
+            }
+            else if (model instanceof THREE.Group) {
+                const group = new THREE.Group();
+                model.children.forEach((object) => group.add(cloneModel(object)));
+                return group;
+            }
+            else {
+                const object3D = new THREE.Object3D();
+                model.children.forEach((object) => object3D.add(cloneModel(object)));
+                return object3D;
+            }
+        }
+        scene.remove(model);
+        model = cloneModel(five.model);
+        scene.add(model);
+        update();
+    };
+    const appendTo = (element, size = {}) => {
+        const renderer = initRendererIfNeeds();
+        if (!renderer)
+            return;
+        element.appendChild(renderer.domElement);
+        refresh(size);
+        const positionType = window.getComputedStyle(element).position;
+        if (positionType !== 'relative' &&
+            positionType !== 'absolute' &&
+            positionType !== 'fixed' &&
+            positionType !== 'sticky')
+            element.style.position = 'relative';
+    };
+    const refresh = (size = {}) => {
+        if (!renderer)
+            return;
+        const element = renderer.domElement;
+        const container = element.parentNode;
+        if (container && container.nodeName) {
+            const { width = container.offsetWidth, height = container.offsetHeight } = size;
+            renderer.setSize(width, height);
+            // 修改摄像机 aspect 比值
+            camera.aspect = width / height;
+            camera.updateProjectionMatrix();
+        }
+        needsRender = true;
+    };
+    const cameraDistance = () => {
+        const bounding = five.model.bounding;
+        const { fov, aspect } = camera;
+        const radius = Math.sqrt(Math.pow(bounding.max.x - bounding.min.x + 2, 2) +
+            Math.pow(bounding.max.y - bounding.min.y + 2, 2) +
+            Math.pow(bounding.max.z - bounding.min.z + 2, 2));
+        // fit screen
+        let distance = radius / 2 / Math.tan((Math.PI * fov) / 360);
+        if (aspect < 1)
+            distance = distance / aspect;
+        return isNaN(distance) ? radius : distance;
+    };
+    const update = () => {
+        const { longitude, latitude } = five.getPose();
+        const distance = cameraDistance();
+        const lookAt = five.model.bounding.getCenter(new THREE.Vector3());
+        const longitudeDistance = distance * Math.cos(latitude);
+        const cameraPosition = new THREE.Vector3();
+        cameraPosition.x = Math.sin(longitude) * longitudeDistance + lookAt.x;
+        cameraPosition.z = Math.cos(longitude) * longitudeDistance + lookAt.z;
+        cameraPosition.y = Math.sin(latitude) * distance + lookAt.y;
+        camera.position.copy(cameraPosition);
+        camera.lookAt(lookAt);
+        needsRender = true;
+    };
+    const render = () => {
+        if (needsRender !== true)
+            return;
+        if (!renderer)
+            return;
+        if (!renderer.domElement.parentNode)
+            return;
+        const parentNode = renderer.domElement.parentNode;
+        if (parentNode.offsetWidth === 0)
+            return;
+        renderer.render(scene, camera);
+        needsRender = false;
+    };
+    const dispose = () => {
+        if (renderer)
+            renderer.dispose();
+        renderer = null;
+    };
+    five.on('modelLoaded', modelLoaded);
+    five.on('modelWillLoad', modelWillLoad);
+    five.on('cameraDirectionUpdate', update);
+    five.on('dispose', dispose);
+    five.on('renderFrame', render);
+    return { appendTo, refresh };
+};
+export default ModelViewPlugin;

package/libs/PanoCompassPlugin/index.d.ts

@@ -0,0 +1,25 @@
+import type { Five, FivePlugin } from '@realsee/five';
+export interface PanoCompassPluginParameterType {
+    compassImageUrl?: string;
+}
+export interface PanoCompassPluginData {
+    north_rad: number;
+}
+export declare type PanoCompassPluginExportType = PanoCompassController;
+export declare const PanoCompassPlugin: FivePlugin<PanoCompassPluginParameterType | undefined, PanoCompassController>;
+export default PanoCompassPlugin;
+declare class PanoCompassController {
+    five: Five;
+    data?: PanoCompassPluginData;
+    config?: PanoCompassPluginParameterType;
+    private compassMeshTween?;
+    private compassMesh?;
+    constructor(five: Five, config?: PanoCompassPluginParameterType);
+    load(data: PanoCompassPluginData): void;
+    dispose: () => void;
+    private loadCompassMesh;
+    private onFivePanoWillArrive;
+    private onFivePanoArrived;
+    private fixPosition;
+    private fixRotation;
+}

package/libs/PanoCompassPlugin/index.js

@@ -0,0 +1,89 @@
+import * as THREE from 'three';
+import { loadTexture } from '../shared-utils/three/loadTexture';
+import { tweenProgress } from '../shared-utils/animationFrame/BetterTween';
+export const PanoCompassPlugin = function (five, config) {
+    return new PanoCompassController(five, config);
+};
+export default PanoCompassPlugin;
+class PanoCompassController {
+    five;
+    data;
+    config;
+    compassMeshTween;
+    compassMesh;
+    constructor(five, config) {
+        this.five = five;
+        this.config = config;
+        five.once('panoLoaded', this.loadCompassMesh);
+        five.once('dispose', this.dispose);
+        this.five.on('panoArrived', this.onFivePanoArrived);
+        this.five.on('panoWillArrive', this.onFivePanoWillArrive);
+    }
+    load(data) {
+        this.data = data;
+        if (this.compassMesh && !this.five.scene.children.includes(this.compassMesh)) {
+            // 模型已经加载好了，才加载数据
+            this.fixRotation(data.north_rad);
+            this.fixPosition(this.five.panoIndex || 0);
+            this.five.scene.add(this.compassMesh);
+        }
+    }
+    dispose = () => {
+        this.five.off('panoArrived', this.onFivePanoArrived);
+        this.five.off('panoWillArrive', this.onFivePanoWillArrive);
+        this.five.off();
+    };
+    loadCompassMesh = async () => {
+        const compassImageUrl = this.config?.compassImageUrl || '//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png';
+        const texture = await loadTexture(compassImageUrl);
+        const compassGeometry = new THREE.CircleGeometry(0.7, 32);
+        const compassMaterial = new THREE.MeshBasicMaterial({
+            map: texture,
+            transparent: true,
+            opacity: 1,
+            depthTest: false,
+        });
+        const compassMesh = new THREE.Mesh(compassGeometry, compassMaterial);
+        compassMesh.rotateX(-Math.PI / 2);
+        compassMesh.name = 'pano-compass-mesh';
+        this.compassMesh = compassMesh;
+        this.fixPosition(this.five.panoIndex || 0);
+        if (!this.data)
+            return;
+        this.fixRotation(this.data.north_rad);
+        this.five.scene.add(compassMesh);
+    };
+    onFivePanoWillArrive = (panoIndex) => {
+        if (panoIndex === this.five.panoIndex)
+            return;
+        this.compassMeshTween?.dispose();
+        this.compassMesh?.material.setValues({ opacity: 0 });
+    };
+    onFivePanoArrived = (panoIndex) => {
+        if (this.compassMesh?.material.opacity !== 0)
+            return;
+        this.fixPosition(panoIndex);
+        this.compassMeshTween?.dispose();
+        this.compassMeshTween = tweenProgress(1000)
+            .onUpdate(({ progress }) => {
+            this.compassMesh?.material.setValues({ opacity: progress });
+            this.five.needsRender = true;
+        })
+            .play();
+    };
+    fixPosition(panoIndex) {
+        if (!this.compassMesh)
+            return;
+        const standingPosition = this.five.work.observers[panoIndex].standingPosition;
+        // 指南针上移 0.01m，防止与地板重合
+        const compassPosition = standingPosition.clone().add(new THREE.Vector3(0, 0.01, 0));
+        this.compassMesh.position.copy(compassPosition);
+        this.five.needsRender = true;
+    }
+    fixRotation(northRad) {
+        if (!this.compassMesh)
+            return;
+        this.compassMesh.rotateZ(northRad - Math.PI / 2);
+        this.five.needsRender = true;
+    }
+}

package/{plugins → libs}/PanoCursorRaycasterPlugin/index.d.ts

@@ -1,6 +1,5 @@
-import * as THREE from 'three';
+import { Group, Vector3 } from 'three';
 import type { FivePlugin, Intersection } from '@realsee/five';
-import { Vector3 } from 'three';
 export interface PanoCursorRaycasterPluginParameterType {
 }
 export interface PanoCursorRaycasterPluginExportType {
@@ -18,7 +17,7 @@ export interface PanoCursorRaycasterPluginExportType {
      */
     pointAxesHelper: (point: Vector3, length?: number, fixDistance?: number) => {
         clear: () => void;
-        pointAxesHelperMesh: THREE.Group;
+        pointAxesHelperMesh: Group;
     };
     /**
      * @description: 将一个点在camera和点的向量上移动。传入点的位置和相对移动的距离，返回一个新的位置