@realsee/dnalogel 2.0.3 → 2.0.4-dev.1

package/dist/PanoCompassPlugin/index.js

@@ -1,876 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var THREE = require('three');
-var five = require('@realsee/five');
-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);
-
-/**
- * plugin 的基本控制器
- */
-class Controller$1 {
-    constructor(five$1) {
-        Object.defineProperty(this, "five", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        /**
-         * 插件事件钩子
-         */
-        Object.defineProperty(this, "hooks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new five.Subscribe()
-        });
-        this.five = five$1;
-    }
-    /**
-     * 获取当前的插件状态，如果当初插件内存在需要通过动画变更的 state 值，则通过此方法可以得到中间状态
-     */
-    getCurrentState() {
-        return this.state;
-    }
-}
-
-class Controller extends Controller$1 {
-}
-
-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 === null || config === void 0 ? void 0 : 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) => {
-        var _a, _b, _c;
-        const points = params[0].map((point) => (point instanceof THREE.Vector3 ? point : transformPositionToVector3(point)));
-        const config = params[1];
-        if ((points === null || points === void 0 ? void 0 : points.length) < 4)
-            return console.error('points must be equal or greater than than 4');
-        if (!((_a = five === null || five === void 0 ? void 0 : five.model) === null || _a === void 0 ? void 0 : _a.loaded))
-            return console.error('five.model.loaded is: ', (_b = five === null || five === void 0 ? void 0 : five.model) === null || _b === void 0 ? void 0 : _b.loaded);
-        const fiveElement = five.getElement();
-        if (!fiveElement)
-            return console.error('five.getElement() is ' + fiveElement);
-        const disposers = [];
-        const ratio = (config === null || config === void 0 ? void 0 : 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 === null || config === void 0 ? void 0 : config.dpr) || 1;
-        const mode = (config === null || config === void 0 ? void 0 : config.mode) || 'front';
-        const autoRender = (_c = config === null || config === void 0 ? void 0 : config.autoRender) !== null && _c !== void 0 ? _c : true;
-        const behindFiveContainer = (config === null || config === void 0 ? void 0 : config.behindFiveContainer) || fiveElement.parentElement || document.body;
-        const container = (config === null || config === void 0 ? void 0 : 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 () => {
-                    var _a;
-                    scene.add(css3DObject);
-                    (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
-                    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 = () => {
-            var _a;
-            disposers.forEach((d) => d === null || d === void 0 ? void 0 : 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) {
-                    (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
-                }
-            }
-            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 === null || d === void 0 ? void 0 : 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 {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "disposeMethods", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "animationFrameDisposer", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "onDispose", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (callback) => {
-                this.disposeMethods.push(callback);
-                return this;
-            }
-        });
-        Object.defineProperty(this, "play", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.start(0);
-                this.animationFrameDisposer = requestAnimationFrameInterval((time) => this.update(time));
-                return this;
-            }
-        });
-        Object.defineProperty(this, "dispose", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                var _a;
-                this.stop();
-                (_a = this.animationFrameDisposer) === null || _a === void 0 ? void 0 : _a.call(this);
-                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 defaultBaseOptions = { userAction: true };
-class PanoCompassController extends Controller {
-    constructor(five$1, config) {
-        super(five$1);
-        /**
-         * 默认状态
-         */
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                visible: true,
-                enabled: true,
-                config: {
-                    /**
-                     * @todo 图片转base64
-                     */
-                    compassImageUrl: '//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png',
-                    entryDoorImageUrl: '//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png',
-                },
-            }
-        });
-        Object.defineProperty(this, "data", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "group", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new THREE__namespace.Group()
-        });
-        Object.defineProperty(this, "roomInfoInstance", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "roomInfoWrapperInstance", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "compassMeshTween", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "compassMesh", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "entryDoorMesh", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        /**
-         * 销毁插件
-         * @todo 销毁贴图时，最好还是直接销毁贴图吧，this.compassMesh?.material.map 这种都是很深层的引用了。THREE 的建议我看也是自己去管理和销毁公共贴图。
-         */
-        Object.defineProperty(this, "dispose", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                var _a, _b, _c, _d;
-                this.five.scene.remove(this.group);
-                this.group.remove(...this.group.children);
-                (_b = (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.map) === null || _b === void 0 ? void 0 : _b.dispose();
-                (_d = (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.map) === null || _d === void 0 ? void 0 : _d.dispose();
-                this.five.off('dispose', this.dispose);
-                this.five.off('panoArrived', this.onFivePanoArrived);
-                this.five.off('panoWillArrive', this.onFivePanoWillArrive);
-                this.five.off('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
-            }
-        });
-        /**
-         * 添加事件监听
-         */
-        Object.defineProperty(this, "_addEventListener", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.five.on('panoArrived', this.onFivePanoArrived);
-                this.five.on('panoWillArrive', this.onFivePanoWillArrive);
-                this.five.on('modeChange', this.onFiveModeChange);
-                this.five.on('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
-            }
-        });
-        /**
-         * 移除事件监听
-         */
-        Object.defineProperty(this, "_removeEventListener", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.five.off('panoArrived', this.onFivePanoArrived);
-                this.five.off('panoWillArrive', this.onFivePanoWillArrive);
-                this.five.off('modeChange', this.onFiveModeChange);
-                this.five.off('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
-            }
-        });
-        /**
-         * 启用，响应事件，展示UI
-         */
-        Object.defineProperty(this, "_enable", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.five.scene.add(this.group);
-                this.init();
-                this.onFivePanoArrived(this.five.panoIndex || 0);
-                this._addEventListener();
-            }
-        });
-        /**
-         * 禁用，不响应事件，不展示UI
-         */
-        Object.defineProperty(this, "_disable", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this._clearCompassIfNeed();
-                this._clearEntryDoorIfNeed();
-                this.five.scene.remove(this.group);
-                this._removeEventListener();
-            }
-        });
-        /**
-         * 展示UI
-         */
-        Object.defineProperty(this, "_toggleVisible", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.group.visible = this.state.visible;
-                this.five.needsRender = true;
-            }
-        });
-        Object.defineProperty(this, "_clearCompassIfNeed", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                var _a;
-                if (this.compassMesh) {
-                    this.group.remove(this.compassMesh);
-                    (_a = this.compassMesh.material.map) === null || _a === void 0 ? void 0 : _a.dispose();
-                    this.compassMesh = null;
-                }
-            }
-        });
-        Object.defineProperty(this, "_clearEntryDoorIfNeed", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                var _a;
-                if (this.entryDoorMesh) {
-                    this.group.remove(this.entryDoorMesh);
-                    (_a = this.entryDoorMesh.material.map) === null || _a === void 0 ? void 0 : _a.dispose();
-                    this.entryDoorMesh = null;
-                }
-                if (this.roomInfoInstance) {
-                    this.roomInfoInstance.dispose();
-                    this.roomInfoInstance = null;
-                }
-                if (this.roomInfoWrapperInstance) {
-                    this.roomInfoWrapperInstance.dispose();
-                    this.roomInfoWrapperInstance = null;
-                }
-            }
-        });
-        Object.defineProperty(this, "onFivePanoWillArrive", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (panoIndex) => {
-                var _a, _b;
-                if (panoIndex === this.five.panoIndex)
-                    return;
-                (_a = this.compassMeshTween) === null || _a === void 0 ? void 0 : _a.dispose();
-                (_b = this.compassMesh) === null || _b === void 0 ? void 0 : _b.material.setValues({ opacity: 0 });
-            }
-        });
-        Object.defineProperty(this, "onFivePanoArrived", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (panoIndex) => {
-                var _a, _b, _c, _d, _e, _f, _g;
-                // ======== fix compass position ========
-                const standingPosition = (_c = (_b = (_a = this.five.work) === null || _a === void 0 ? void 0 : _a.observers) === null || _b === void 0 ? void 0 : _b[panoIndex]) === null || _c === void 0 ? void 0 : _c.standingPosition;
-                if (this.compassMesh) {
-                    // 指南针上移 0.01m，防止与地板重合
-                    this.compassMesh.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
-                    if (this.compassMesh.material.opacity === 0) {
-                        (_d = this.compassMeshTween) === null || _d === void 0 ? void 0 : _d.dispose();
-                        this.compassMeshTween = tweenProgress(1000)
-                            .onUpdate(({ progress }) => {
-                            var _a;
-                            (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.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);
-                    // 不是客厅时，隐藏入户门指引
-                    ((_e = this.data) === null || _e === void 0 ? void 0 : _e.room_observers[panoIndex].room.type) === 1
-                        ? (_f = this.entryDoorMesh) === null || _f === void 0 ? void 0 : _f.material.setValues({ opacity: 1 })
-                        : (_g = this.entryDoorMesh) === null || _g === void 0 ? void 0 : _g.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;
-            }
-        });
-        Object.defineProperty(this, "onFiveCameraDirectionUpdate", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ({ longitude, latitude, }) => {
-                var _a, _b;
-                if (!this.roomInfoWrapperInstance)
-                    return;
-                this.roomInfoWrapperInstance.css3DObject.rotation.z = longitude;
-                latitude > 0.66 && this.five.getCurrentState().mode === 'Panorama'
-                    ? (_a = this.roomInfoInstance) === null || _a === void 0 ? void 0 : _a.show()
-                    : (_b = this.roomInfoInstance) === null || _b === void 0 ? void 0 : _b.hide();
-            }
-        });
-        // eslint-disable-next-line max-params
-        Object.defineProperty(this, "onFiveModeChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (mode, prevMode, panoIndex, toPose, userAction) => {
-                if (mode === prevMode)
-                    return;
-                this.setState({
-                    visible: mode === five.Five.Mode.Panorama,
-                }, { userAction });
-            }
-        });
-        this.five.scene.add(this.group);
-        this.five.once('dispose', this.dispose);
-        this.setState({
-            visible: true,
-            enabled: true,
-            config: Object.assign(Object.assign({}, this.state.config), (config || {})),
-        });
-    }
-    /**
-     * 启用插件，响应用户操作并展示UI
-     * @param options
-     */
-    enable(options = defaultBaseOptions) {
-        this.setState({
-            enabled: true,
-        }, options);
-    }
-    /**
-     * 禁用插件，禁止响应用户操作并隐藏UI
-     * @param options
-     */
-    disable(options = defaultBaseOptions) {
-        this.setState({
-            enabled: false,
-        }, options);
-    }
-    /**
-     * 展示UI
-     * @param options
-     * @returns
-     * @todo 需要考虑动画
-     */
-    show(options = defaultBaseOptions) {
-        if (!this.state.enabled)
-            return;
-        this.setState({
-            visible: true,
-        }, options);
-        return Promise.resolve();
-    }
-    /**
-     * 隐藏UI
-     * @param options
-     * @returns
-     * @todo 需要考虑动画
-     */
-    hide(options = defaultBaseOptions) {
-        if (!this.state.enabled)
-            return;
-        this.setState({
-            visible: false,
-        }, options);
-        return Promise.resolve();
-    }
-    setState(state, options = { userAction: true }) {
-        var _a, _b;
-        const prevState = JSON.parse(JSON.stringify(this.state));
-        this.state = {
-            visible: (_a = state.visible) !== null && _a !== void 0 ? _a : prevState.visible,
-            enabled: (_b = state.enabled) !== null && _b !== void 0 ? _b : prevState.enabled,
-            config: Object.assign(Object.assign({}, prevState.config), (state.config || {})),
-        };
-        this.hooks.emit('stateChange', {
-            state: this.state,
-            prevState,
-            userAction: options.userAction,
-        });
-        if (state.enabled === true) {
-            this._enable();
-            this.hooks.emit('enable', options);
-        }
-        if (state.enabled === false) {
-            this._disable();
-            this.hooks.emit('disable', options);
-        }
-        if (state.visible === false) {
-            this._toggleVisible();
-            this.hooks.emit('hide', options);
-        }
-        if (state.visible === true) {
-            this._toggleVisible();
-            this.hooks.emit('show', options);
-        }
-        /**
-         * @todo config变化不应该重新初始化，需要做精准的替换
-         */
-        if (state.config) {
-            this.init();
-        }
-    }
-    async load(data, state, userAction = true) {
-        const nextData = await this.formatData(data);
-        if (JSON.stringify(this.data) !== JSON.stringify(nextData)) {
-            this.hooks.emit('dataChange', nextData, this.data);
-            this.data = Object.assign({}, nextData);
-            this.init();
-            if (state) {
-                this.setState(state, { userAction });
-            }
-            this.hooks.emit('dataLoaded', this.data);
-        }
-    }
-    formatData(serverData) {
-        if (serverData.version && serverData.data) {
-            return Promise.resolve(serverData.data);
-        }
-        else {
-            return Promise.resolve(serverData);
-        }
-    }
-    /**
-     * 初始化
-     * @todo 逻辑需要细分
-     */
-    async init() {
-        var _a, _b, _c, _d;
-        const northRad = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.north_rad) !== null && _b !== void 0 ? _b : null;
-        this._clearCompassIfNeed();
-        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);
-        }
-        const entrance = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.entrance) !== null && _d !== void 0 ? _d : null;
-        this._clearEntryDoorIfNeed();
-        if (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.state.config.compassImageUrl;
-        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.state.config.entryDoorImageUrl;
-        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;
-    }
-}
-
-const PanoCompassPlugin = (five, config) => new PanoCompassController(five, config);
-
-exports.PanoCompassPlugin = PanoCompassPlugin;
-exports["default"] = PanoCompassPlugin;