@realsee/dnalogel 2.0.0-alpha.1 → 2.0.0-alpha.12

package/dist/PanoCompassPlugin/index.js

@@ -0,0 +1,521 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var THREE = require('three');
+var CSS3DRenderer = require('three/examples/jsm/renderers/CSS3DRenderer');
+var TWEEN = require('@tweenjs/tween.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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);
+var TWEEN__default = /*#__PURE__*/_interopDefaultLegacy(TWEEN);
+
+const roomInfoIcon = 'data:image/png;base64,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';
+
+function getRoomInfoInstance() {
+    const infoDom = document.createElement('div');
+    const iconDom = document.createElement('i');
+    const textDom = document.createElement('span');
+    infoDom.appendChild(iconDom);
+    infoDom.appendChild(textDom);
+    // infoDom style
+    infoDom.style.position = 'relative';
+    infoDom.style.width = '100%';
+    infoDom.style.display = 'flex';
+    infoDom.style.flexDirection = 'column';
+    infoDom.style.alignItems = 'center';
+    infoDom.style.marginTop = `${150 / 16}rem`;
+    infoDom.style.opacity = '0';
+    infoDom.style.transition = 'opacity 1000ms linear';
+    // iconDom style
+    iconDom.style.display = 'block';
+    iconDom.style.width = `${134 / 16}rem`;
+    iconDom.style.height = `${22 / 16}rem`;
+    iconDom.style.backgroundSize = '100%';
+    iconDom.style.backgroundRepeat = 'no-repeat';
+    iconDom.style.backgroundImage = `url(${roomInfoIcon})`;
+    textDom.style.marginTop = `${10 / 16}rem`;
+    // textDom style
+    textDom.style.fontSize = `${16 / 16}rem`;
+    textDom.style.color = '#fff';
+    textDom.style.opacity = '0.7';
+    textDom.style.textShadow = '0 2px 16px rgb(22 34 83 / 24%)';
+    textDom.style.fontWeight = 'bold';
+    return {
+        appendTo(element) {
+            element.appendChild(infoDom);
+        },
+        dispose() {
+            infoDom.remove();
+        },
+        setRoom(room) {
+            textDom.innerHTML = room.name + ' ' + Math.floor(room.size / 1000000) + '㎡';
+        },
+        show() {
+            infoDom.style.opacity = '1';
+        },
+        hide() {
+            infoDom.style.opacity = '0';
+        }
+    };
+}
+
+const textureLoader = new THREE__namespace.TextureLoader();
+async function loadTexture(url) {
+    return new Promise((resolve, reject) => {
+        textureLoader.load(url, resolve, undefined, reject);
+    }).then((texture) => {
+        texture.encoding = THREE__namespace.sRGBEncoding;
+        return texture;
+    });
+}
+
+function evenNumber(num, config) {
+    const roundNum = Math.round(num);
+    return roundNum % 2 === 0 ? roundNum : roundNum + Number(config?.smaller ? -1 : 1);
+}
+
+function centerPoint(point1, point2) {
+    return new THREE.Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
+}
+
+const transformPositionToVector3 = ({ x, y, z }) => new THREE.Vector3(x, y, z);
+
+/**
+ * @description: 究极简陋的 ResizeObserver polyfill
+ */
+function createResizeObserver(func, element) {
+    if (!element || typeof ResizeObserver === 'undefined') {
+        return {
+            observe: () => window.addEventListener('resize', func),
+            unobserve: () => window.removeEventListener('resize', func),
+        };
+    }
+    else {
+        const observer = new ResizeObserver(func);
+        return {
+            observe: () => observer.observe(element),
+            unobserve: () => observer.unobserve(element),
+        };
+    }
+}
+
+/**
+ * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
+ * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
+ *
+ * @returns
+ */
+const CSS3DRenderPlugin = (five) => {
+    const state = { disposeCallbacks: [] };
+    const create3DDomContainer = (...params) => {
+        const points = params[0].map((point) => (point instanceof THREE.Vector3 ? point : transformPositionToVector3(point)));
+        const config = params[1];
+        if (points?.length < 4)
+            return console.error('points must be equal or greater than than 4');
+        if (!five?.model?.loaded)
+            return console.error('five.model.loaded is: ', five?.model?.loaded);
+        const fiveElement = five.getElement();
+        if (!fiveElement)
+            return console.error('five.getElement() is ' + fiveElement);
+        const disposers = [];
+        const ratio = config?.ratio || 0.00216;
+        if (ratio <= 0.00215)
+            console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
+        const dpr = config?.dpr || 1;
+        const mode = config?.mode || 'front';
+        const autoRender = config?.autoRender ?? true;
+        const behindFiveContainer = config?.behindFiveContainer || fiveElement.parentElement || document.body;
+        const container = config?.container || document.createElement('div');
+        container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin');
+        // 获取css3DObject, 如果mode为behind的话，一起获取mesh
+        const { css3DObject, mesh } = createObject(points, { ratio, dpr, container, mode });
+        // ======= INIT START =======
+        let resizeObserver;
+        const frontModeUnInited = mode === 'front' && !state.frontMode;
+        const behindModeUnInited = mode === 'behind' && !state.behindMode;
+        const inited = !(frontModeUnInited || behindModeUnInited);
+        if (behindModeUnInited) {
+            state.behindMode = { scene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+        }
+        if (frontModeUnInited) {
+            state.frontMode = { scene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+        }
+        const stateMode = mode === 'behind' ? state.behindMode : state.frontMode;
+        const { scene, css3DRenderer } = stateMode;
+        const render = (() => {
+            if (!inited) {
+                const css3DRendererSetSize = () => {
+                    // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
+                    // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
+                    const rendererWidth = evenNumber(fiveElement.clientWidth, { smaller: true });
+                    const rendererHeight = evenNumber(fiveElement.clientHeight, { smaller: true });
+                    css3DRenderer.setSize(rendererWidth, rendererHeight);
+                };
+                css3DRendererSetSize();
+                resizeObserver = createResizeObserver(css3DRendererSetSize, fiveElement);
+                css3DRenderer.domElement.style.position = 'absolute';
+                css3DRenderer.domElement.style.top = '0';
+                css3DRenderer.domElement.style.userSelect = 'none';
+                css3DRenderer.domElement.style.pointerEvents = 'none';
+                const renderEveryFrame = () => {
+                    const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+                    stateMode.requestAnimationFrameId = requestAnimationFrameId;
+                    css3DRenderer.render(scene, five.camera);
+                };
+                return () => {
+                    scene.add(css3DObject);
+                    resizeObserver?.observe?.();
+                    renderEveryFrame();
+                    if (mode === 'behind' && mesh) {
+                        five.scene.add(mesh);
+                        disposers.push(() => mesh && five.scene.remove(mesh));
+                    }
+                };
+            }
+            else {
+                return () => {
+                    scene.add(css3DObject);
+                };
+            }
+        })();
+        if (frontModeUnInited) {
+            const wrapper = fiveElement.parentElement || document.body;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        if (behindModeUnInited) {
+            const wrapper = behindFiveContainer;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        // ======= INIT END =======
+        const dispose = () => {
+            disposers.forEach((d) => d?.());
+            scene.remove(css3DObject);
+            if (scene.children.length === 0) {
+                if (typeof stateMode.requestAnimationFrameId === 'number') {
+                    cancelAnimationFrame(stateMode.requestAnimationFrameId);
+                }
+                css3DRenderer.domElement.remove();
+                if (mode === 'front')
+                    state.frontMode = undefined;
+                if (mode === 'behind')
+                    state.behindMode = undefined;
+                if (!state.behindMode && !state.frontMode) {
+                    resizeObserver?.unobserve?.();
+                }
+            }
+            return true;
+        };
+        const idx = state.disposeCallbacks.findIndex((item) => item === dispose);
+        if (idx !== -1) {
+            state.disposeCallbacks.splice(idx, 1);
+        }
+        else {
+            state.disposeCallbacks.push(dispose);
+        }
+        if (autoRender)
+            render();
+        return { container, dispose, css3DObject, render: autoRender ? undefined : render };
+    };
+    const createObject = (points, config) => {
+        const { ratio, dpr, container: element, mode } = config;
+        const planeWidth = points[0].distanceTo(points[1]);
+        const planeHeight = points[1].distanceTo(points[2]);
+        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
+        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
+        const css3DObject = new CSS3DRenderer.CSS3DObject(element);
+        css3DObject.scale.set(ratio, ratio, ratio);
+        element.style.width = domWidthPx + 'px';
+        element.style.height = domHeightPx + 'px';
+        element.style.pointerEvents = 'none';
+        const centerPosition = centerPoint(points[0], points[2]);
+        const vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
+        const vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
+        // 旋转
+        const rotateXAngle = new THREE.Vector3(0, 1, 0).angleTo(new THREE.Vector3(0, vector12.y, vector12.z));
+        const rotateYAngle = new THREE.Vector3(1, 0, 0).angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
+        const rotateZAngle = vector01.angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
+        /**
+         * [0,1,0] => [0,0,1]  为rotate Worldx正方向
+         * [0,0,1] => [0,1,0]  为rotate Worldy正方向
+         * [0,1,1] => [-1,0,0] 为rotate Worldz正方向
+         */
+        const rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
+        const rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
+        const rotateZ = ((vector01.x > 0 && vector01.y < 0) || (vector01.x < 0 && vector01.y > 0) ? -1 : 1) * rotateZAngle;
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), rotateX); // x
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), rotateY); // y
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), rotateZ); // z
+        css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+        let mesh;
+        if (mode === 'behind') {
+            const material = new THREE__namespace.MeshBasicMaterial({
+                opacity: 0,
+                transparent: false,
+                side: THREE__namespace.DoubleSide,
+            });
+            const geometry = new THREE__namespace.PlaneGeometry(domWidthPx, domHeightPx);
+            mesh = new THREE__namespace.Mesh(geometry, material);
+            mesh.name = 'CSS3DRenderPlugin-mesh';
+            mesh.position.copy(css3DObject.position);
+            mesh.rotation.copy(css3DObject.rotation);
+            mesh.scale.copy(css3DObject.scale);
+        }
+        return { css3DObject, mesh };
+    };
+    return {
+        create3DDomContainer,
+        disposeAll: () => {
+            state.disposeCallbacks.forEach((d) => d?.());
+            state.disposeCallbacks = [];
+        },
+    };
+};
+
+const _requestAnimationFrame = window.requestAnimationFrame || ((fn) => setTimeout(fn, 16));
+const _cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+/**
+ * 在每个 AnimationFrame 中调用传入的函数
+ * @param callback 每次 AnimationFrame 中调用的函数
+ * @param frame 每秒运行多少次
+ * @returns 返回一个函数，调用可以停止 AnimationFrameLoop
+ */
+function requestAnimationFrameInterval(callback, frame = 60) {
+    let index = -1;
+    let oldTime = 0;
+    let startTime = -1;
+    const minDeltaTime = 1000 / frame;
+    function loop(time) {
+        startTime === -1 && (startTime = time);
+        index = _requestAnimationFrame(loop);
+        const deltaTime = time - oldTime;
+        if (deltaTime < minDeltaTime)
+            return;
+        oldTime = time;
+        callback && callback(time - startTime);
+    }
+    index = _requestAnimationFrame(loop);
+    return function stop() {
+        _cancelAnimationFrame(index);
+    };
+}
+// export { Easing } from './tween'
+// export { default as tween } from './tween'
+
+class BetterTween extends TWEEN__default["default"].Tween {
+    disposeMethods = [];
+    animationFrameDisposer;
+    onDispose = (callback) => {
+        this.disposeMethods.push(callback);
+        return this;
+    };
+    play = () => {
+        this.start(0);
+        this.animationFrameDisposer = requestAnimationFrameInterval((time) => this.update(time));
+        return this;
+    };
+    dispose = () => {
+        this.stop();
+        this.animationFrameDisposer?.();
+        this.disposeMethods.forEach((fn) => fn());
+        this.disposeMethods = [];
+        TWEEN__default["default"].remove(this);
+    };
+}
+function tweenProgress(duration, easing = TWEEN__default["default"].Easing.Linear.None) {
+    const tween = new BetterTween({ progress: 0 }).to({ progress: 1 });
+    if (duration !== undefined)
+        tween.duration(duration);
+    if (easing !== undefined)
+        tween.easing(easing);
+    return tween;
+}
+
+const panoCompassPluginServerParams = {
+    name: 'PanoCompassPlugin',
+    version: 0,
+};
+const PanoCompassPlugin = function (five, config) {
+    return new PanoCompassController(five, config);
+};
+class PanoCompassController {
+    five;
+    data;
+    config;
+    group = new THREE__namespace.Group();
+    modelLoaded = false;
+    roomInfoInstance;
+    roomInfoWrapperInstance;
+    compassMeshTween;
+    compassMesh;
+    entryDoorMesh;
+    constructor(five, config) {
+        this.five = five;
+        this.config = config;
+        this.five.scene.add(this.group);
+        five.once('dispose', this.dispose);
+        five.once('modelLoaded', this.onFiveFistPanoLoaded);
+        this.five.on('panoArrived', this.onFivePanoArrived);
+        this.five.on('panoWillArrive', this.onFivePanoWillArrive);
+        this.five.on('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
+    }
+    load(data) {
+        this.data = data;
+        if (this.modelLoaded)
+            this.init();
+    }
+    dispose = () => {
+        this.five.scene.remove(this.group);
+        this.group.remove(...this.group.children);
+        this.compassMesh?.material.map?.dispose();
+        this.entryDoorMesh?.material.map?.dispose();
+        this.five.off('panoArrived', this.onFivePanoArrived);
+        this.five.off('panoWillArrive', this.onFivePanoWillArrive);
+    };
+    onFiveFistPanoLoaded = () => {
+        this.modelLoaded = true;
+        if (this.data)
+            this.init();
+    };
+    async init() {
+        if (!this.data || !this.modelLoaded)
+            return;
+        const northRad = this.data.north_rad;
+        if (northRad != null) {
+            this.compassMesh = await this.loadCompassMesh();
+            this.compassMesh.rotateX(-Math.PI / 2);
+            this.compassMesh.rotateZ(northRad - Math.PI / 2);
+            this.group.add(this.compassMesh);
+        }
+        if (this.data.entrance != null) {
+            this.entryDoorMesh = await this.loadEntryDoorMesh();
+            this.roomInfoWrapperInstance = this.loadRoomInfo();
+            this.roomInfoInstance = getRoomInfoInstance();
+            this.entryDoorMesh.rotateX(-Math.PI / 2);
+            if (this.roomInfoWrapperInstance)
+                this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
+            this.group.add(this.entryDoorMesh);
+        }
+        this.onFivePanoArrived(this.five.panoIndex || 0);
+        this.five.needsRender = true;
+    }
+    async loadCompassMesh() {
+        const compassImageUrl = this.config?.compassImageUrl ||
+            '//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png';
+        const compassTexture = await loadTexture(compassImageUrl);
+        const compassGeometry = new THREE__namespace.CircleGeometry(0.7, 32);
+        const compassMaterial = new THREE__namespace.MeshBasicMaterial({
+            map: compassTexture,
+            transparent: true,
+            opacity: 0,
+            depthTest: false,
+        });
+        const compassMesh = new THREE__namespace.Mesh(compassGeometry, compassMaterial);
+        compassMesh.name = 'pano-compass-mesh';
+        return compassMesh;
+    }
+    async loadEntryDoorMesh() {
+        const entryDoorImageUrl = this.config?.entryDoorImageUrl ||
+            '//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png';
+        const entryDoorTexture = await loadTexture(entryDoorImageUrl);
+        const entryDoorGeometry = new THREE__namespace.PlaneGeometry(0.2, 0.16);
+        const entryDoorMaterial = new THREE__namespace.MeshBasicMaterial({
+            map: entryDoorTexture,
+            transparent: true,
+            opacity: 0.8,
+            depthTest: false,
+        });
+        const entryDoorMesh = new THREE__namespace.Mesh(entryDoorGeometry, entryDoorMaterial);
+        entryDoorMesh.name = 'pano-compass-entry-door';
+        return entryDoorMesh;
+    }
+    loadRoomInfo() {
+        const points = [
+            new THREE__namespace.Vector3(-0.7, 0, -0.7),
+            new THREE__namespace.Vector3(0.7, 0, -0.7),
+            new THREE__namespace.Vector3(0.7, 0, 0.7),
+            new THREE__namespace.Vector3(-0.7, 0, 0.7),
+        ];
+        const roomInfo = CSS3DRenderPlugin(this.five).create3DDomContainer(points);
+        return roomInfo;
+    }
+    onFivePanoWillArrive = (panoIndex) => {
+        if (panoIndex === this.five.panoIndex)
+            return;
+        this.compassMeshTween?.dispose();
+        this.compassMesh?.material.setValues({ opacity: 0 });
+    };
+    onFivePanoArrived = (panoIndex) => {
+        // ======== fix compass position ========
+        const standingPosition = this.five.work.observers[panoIndex].standingPosition;
+        if (this.compassMesh) {
+            // 指南针上移 0.01m，防止与地板重合
+            this.compassMesh.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
+            if (this.compassMesh.material.opacity !== 0)
+                return;
+            this.compassMeshTween?.dispose();
+            this.compassMeshTween = tweenProgress(1000)
+                .onUpdate(({ progress }) => {
+                this.compassMesh?.material.setValues({ opacity: progress });
+                this.five.needsRender = true;
+            })
+                .play();
+        }
+        // ======== fix entry door label position and rotation ========
+        if (this.entryDoorMesh) {
+            const entryDoorPosition = new THREE__namespace.Vector3(this.data.entrance.position.x, this.data.entrance.position.y, this.data.entrance.position.z);
+            const panoToEntryDoorVector = entryDoorPosition
+                .clone()
+                .setY(standingPosition.y)
+                .sub(standingPosition)
+                .normalize();
+            const compassEntryDoorPosition = standingPosition
+                .clone()
+                .add(panoToEntryDoorVector.clone().multiplyScalar(0.7))
+                .setY(standingPosition.y + 0.01);
+            this.entryDoorMesh.rotation.z = new THREE__namespace.Vector3(0, 0, -1).angleTo(panoToEntryDoorVector);
+            this.entryDoorMesh.position.copy(compassEntryDoorPosition);
+            // 不是客厅时，隐藏入户门指引
+            this.data?.room_observers[panoIndex].room.type === 1
+                ? this.entryDoorMesh?.material.setValues({ opacity: 1 })
+                : this.entryDoorMesh?.material.setValues({ opacity: 0 });
+        }
+        // ======== fix room info ========
+        if (this.roomInfoInstance && this.roomInfoWrapperInstance) {
+            this.roomInfoWrapperInstance.css3DObject.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
+            this.roomInfoInstance.setRoom(this.data.room_observers[panoIndex].room);
+        }
+        this.five.needsRender = true;
+    };
+    onFiveCameraDirectionUpdate = ({ longitude, latitude, }) => {
+        if (!this.roomInfoWrapperInstance)
+            return;
+        this.roomInfoWrapperInstance.css3DObject.rotation.z = longitude;
+        latitude > 0.66 && this.five.getCurrentState().mode === 'Panorama'
+            ? this.roomInfoInstance?.show()
+            : this.roomInfoInstance?.hide();
+    };
+}
+
+exports.PanoCompassPlugin = PanoCompassPlugin;
+exports["default"] = PanoCompassPlugin;
+exports.panoCompassPluginServerParams = panoCompassPluginServerParams;

package/dist/PanoCursorRaycasterPlugin/index.d.ts

@@ -0,0 +1,48 @@
+import { Group, Vector3 } from 'three';
+import type { FivePlugin, Intersection } from '@realsee/five';
+export interface PanoCursorRaycasterPluginParameterType {
+}
+export interface PanoCursorRaycasterPluginExportType {
+    /**
+     * @description: 获取鼠标与模型的焦点位置
+     * @return {Intersection | null} 鼠标与模型的焦点位置
+     */
+    intersection: () => Intersection | null;
+    /**
+     * @description: 辅助坐标轴
+     * @param {Vector3} point: 坐标轴原点的位置
+     * @param {number} length: 坐标轴线长度，单位：米，默认值：2
+     * @param {number} fixDistance: 为避免被模型遮挡，默认向camera方向移动0.1m，默认值：0.1
+     * @return {{clear: () => void; pointAxesHelperMesh: THREE.Group}} clear: 清理函数；pointAxesHelperMesh: 辅助坐标轴mesh
+     */
+    pointAxesHelper: (point: Vector3, length?: number, fixDistance?: number) => {
+        clear: () => void;
+        pointAxesHelperMesh: Group;
+    };
+    /**
+     * @description: 将一个点在camera和点的向量上移动。传入点的位置和相对移动的距离，返回一个新的位置
+     * @param {Vector3} point: 点
+     * @param {number} distance: 向camera相对移动的距离（正方向为：点 -> 摄像头）
+     * @return {Vector3} 计算移动后的位置
+     */
+    movePointTowardsCamera: (point: Vector3, distance: number) => Vector3;
+    /**
+     * @description: 某个点是否可见
+     * @param {Vector3} point: 要检测的点
+     * @param {number} distanceError: 允许的误差，如果点有可能打在模型后，则传入一个误差值，通常为0.01
+     * @return {boolean}: 是否可见
+     */
+    canSeePoint: (point: Vector3, distanceError?: number) => boolean;
+    /**
+     * @description: 清理函数
+     * @return {() => void} 清理函数
+     */
+    destroy: () => void;
+}
+/**
+ * 全景中对当前鼠标的位置进行碰撞监测
+ * @param five
+ * @return
+ */
+export declare const PanoCursorRaycasterPlugin: FivePlugin<PanoCursorRaycasterPluginParameterType, PanoCursorRaycasterPluginExportType>;
+export default PanoCursorRaycasterPlugin;

package/dist/PanoCursorRaycasterPlugin/index.js

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var three = require('three');
+var line = require('@realsee/five/line');
+
+function createLine(point1, point2, color = new three.Vector3(1, 1, 1), dashed = false) {
+    const line$1 = new line.Line(point1, point2);
+    line$1.setMaterial({ dashed, color, linewidth: 1 });
+    line$1.remove(line$1.points);
+    return line$1;
+}
+
+/**
+ * 全景中对当前鼠标的位置进行碰撞监测
+ * @param five
+ * @return
+ */
+const PanoCursorRaycasterPlugin = (five) => {
+    const state = {
+        intersection: null,
+        disposers: [],
+    };
+    const updateIntersection = (intersection) => {
+        state.intersection = intersection;
+    };
+    const clearIntersection = () => {
+        state.intersection = null;
+    };
+    five.on('modelLoaded', () => {
+        five.on('intersectionOnModelUpdate', updateIntersection);
+        five.on('intersectionHidden', clearIntersection);
+    });
+    five.on('dispose', () => {
+        five.off('intersectionOnModelUpdate', updateIntersection);
+        five.off('intersectionHidden', clearIntersection);
+    });
+    const pointAxesHelper = (point, length = 2, fixDistance = 0.1) => {
+        const halfLength = length / 2;
+        const helperCenterPoint = movePointTowardsCamera(point, fixDistance);
+        const p = helperCenterPoint;
+        const pointAxesHelperMesh = new three.Group();
+        pointAxesHelperMesh.add(createLine(new three.Vector3(p.x + halfLength, p.y, p.z), new three.Vector3(p.x - halfLength, p.y, p.z), new three.Vector3(1, 0, 0)), createLine(new three.Vector3(p.x, p.y + halfLength, p.z), new three.Vector3(p.x, p.y - halfLength, p.z), new three.Vector3(0, 1, 0)), createLine(new three.Vector3(p.x, p.y, p.z + halfLength), new three.Vector3(p.x, p.y, p.z - halfLength), new three.Vector3(0, 0, 1)));
+        five.scene.add(pointAxesHelperMesh);
+        five.needsRender = true;
+        // 清理函数
+        const clear = () => {
+            five.scene.remove(pointAxesHelperMesh);
+        };
+        state.disposers.push(clear);
+        return { clear, pointAxesHelperMesh };
+    };
+    const canSeePoint = (point, distanceError = 0) => {
+        const cameraPosition = five?.camera?.position;
+        if (!cameraPosition)
+            return false;
+        const distance = point.distanceTo(cameraPosition);
+        const direction = point.sub(cameraPosition).normalize();
+        const raycaster = new three.Raycaster(cameraPosition, direction);
+        const intersection = five.model.intersectRaycaster(raycaster)?.[0];
+        return !(intersection && intersection.distance + distanceError < distance);
+    };
+    const intersection = () => {
+        return state.intersection;
+    };
+    const destroy = () => {
+        state.disposers?.forEach?.((d) => d?.());
+        five.off('intersectionOnModelUpdate', updateIntersection);
+        five.off('intersectionHidden', clearIntersection);
+    };
+    // 逐步取代 destroy ,向下兼容
+    const dispose = destroy;
+    const movePointTowardsCamera = (point, distance) => {
+        // 原点 position
+        const originPoint = point.clone();
+        // camera position
+        const cameraPosition = five.camera.position.clone();
+        // 移动的向量
+        const fixVector3 = cameraPosition.sub(originPoint).setLength(distance);
+        // 向量相加
+        return fixVector3.add(originPoint);
+    };
+    return { intersection, pointAxesHelper, movePointTowardsCamera, destroy, dispose, canSeePoint };
+};
+
+exports.PanoCursorRaycasterPlugin = PanoCursorRaycasterPlugin;
+exports["default"] = PanoCursorRaycasterPlugin;