@realsee/dnalogel 2.0.1 → 2.2.0-alpha.1

package/dist/index.umd.js

@@ -189,210 +189,811 @@
         return { appendTo, refresh };
     };
 
-    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 createSymbol(description) {
+        // @ts-ignore
+        return typeof Symbol === 'undefined' ? `$Symbol<${description}>$` : Symbol(description);
+    }
+    const EVENT_SYMBOL = createSymbol('$$EVENT$$');
+    function __generateEventIfNotExisted(instance) {
+        if (!instance[EVENT_SYMBOL]) {
+            instance[EVENT_SYMBOL] = {};
+        }
+        return instance[EVENT_SYMBOL];
+    }
+    function __removeEventIfNotExisted(instance) {
+        if (!instance[EVENT_SYMBOL]) {
+            delete instance[EVENT_SYMBOL];
+        }
+    }
+    /**
+     * 监听者模式
+     * @template T - 预设的监听回调类型
+     * @example
+     * ```
+     * new Subscribe<{
+     * "foo": [arg1: number, arg2: string],
+     * "bar": [arg: boolean],
+     * }>()
+     * ```
+     */
+    class Subscribe {
+        /**
+         * 判断是否注册了事件
+         * @param name - 事件类型
+         */
+        hasListener(name) {
+            const events = __generateEventIfNotExisted(this);
+            return Boolean((events === null || events === void 0 ? void 0 : events[name]) && events[name].length > 0);
+        }
+        /**
+         * 注册事件
+         * @param name - 事件类型
+         * @param callback - 事件回调函数
+         * @param once - 是否只执行一次
+         * @returns 解除事件
+         * @template K - 预设的监听事件名称
+         * @template C - 回调函数函数上下文
+         */
+        on(name, callback, once) {
+            const events = __generateEventIfNotExisted(this);
+            if (!events[name])
+                events[name] = [];
+            events[name].push([callback, once || false]);
+            return () => this.off(name, callback);
+        }
+        /**
+         * 注册事件(是否只执行一次)
+         * @param name - 事件类型
+         * @param callback - 事件回调函数
+         * @returns 解除事件
+         * @template K - 预设的监听事件名称
+         * @template C - 回调函数函数上下文
+         */
+        once(name, callback) {
+            return this.on(name, callback, true);
+        }
+        /**
+         * 解除事件
+         *
+         * 如果 name 不传的话解除对应所有事件
+         * 如果 name, callback 不传的话解除所有name的所有事件
+         * @param name - 事件类型
+         * @param callback - 事件回调函数
+         * @template K - 预设的监听事件名称
+         */
+        off(name, callback) {
+            if (name === undefined) {
+                __removeEventIfNotExisted(this);
+                return;
+            }
+            const events = __generateEventIfNotExisted(this);
+            if (!events[name])
+                events[name] = [];
+            if (callback === undefined) {
+                events[name].length = 0;
+                return;
+            }
+            let index = 0;
+            for (; index < events[name].length; index++) {
+                if (events[name][index][0] === callback)
+                    break;
+            }
+            if (index < events[name].length) {
+                events[name].splice(index, 1);
+            }
+        }
+        /**
+         * 触发事件
+         * @param name - 事件类型
+         * @param data - 触发事件的数据
+         * @returns canceled 是否被触发取消
+         * @template K - 预设的监听事件名称
+         */
+        emit(name, ...data) {
+            let canceled = false;
+            const events = __generateEventIfNotExisted(this);
+            const event = events[name] || [];
+            for (let one of event.slice()) {
+                const [callback, once = false] = one;
+                const result = callback(...data);
+                if (once)
+                    this.off(name, callback);
+                if (result === false)
+                    canceled = true;
+            }
+            return canceled;
+        }
     }
 
     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);
+    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);
+    }
 
-    /**
-     * @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),
-            };
-        }
+    function random() {
+        return Math.random().toString(36).slice(-6);
     }
 
-    /**
-     * **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() };
+    const positionToVector3 = ({ x, y, z }) => new THREE.Vector3(x, y, z);
+    const arrayPositionToVector3 = ([x, y, z]) => new THREE.Vector3(x, y, z);
+    const anyPositionToVector3 = (position) => {
+        if (position instanceof THREE.Vector3)
+            return position;
+        else if (Array.isArray(position))
+            return arrayPositionToVector3(position);
+        else
+            return positionToVector3(position);
+    };
+
+    const VERSION$3 = '1.0.0';
+    const NAME = `CSS3DObjectPlus@${VERSION$3}`;
+    const MinRatio = 0.00216;
+    const DefaultRatio = 0.003;
+    class CSS3DObjectPlus extends CSS3DRenderer.CSS3DObject {
+        constructor(container, cornerPoints, ratio = DefaultRatio, dpr = 1) {
+            const realRatio = Math.max(MinRatio, ratio);
+            const planeWidth = cornerPoints[0].distanceTo(cornerPoints[1]);
+            const planeHeight = cornerPoints[1].distanceTo(cornerPoints[2]);
+            const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
+            const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
+            const centerPosition = centerPoint(cornerPoints[0], cornerPoints[2]);
+            let css3DObjectElement;
+            if (realRatio === ratio) {
+                container.style.width = `${domWidthPx}px`;
+                container.style.height = `${domHeightPx}px`;
+                css3DObjectElement = container;
             }
-            if (frontModeUnInited) {
-                state.frontMode = { scene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+            else {
+                // 兼容ratio小于0.00216的情况
+                const element = document.createElement('div');
+                element.style.width = `${domWidthPx}px`;
+                element.style.height = `${domHeightPx}px`;
+                element.style.pointerEvents = 'none';
+                const scale = ratio / realRatio;
+                container.style.position = 'absolute';
+                container.style.left = '0';
+                container.style.top = '0';
+                container.style.width = `${scale * domWidthPx}px`;
+                container.style.height = `${scale * domHeightPx}px`;
+                element.appendChild(container);
+                css3DObjectElement = element;
             }
-            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);
+            super(css3DObjectElement);
+            Object.defineProperty(this, "version", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: VERSION$3
+            });
+            Object.defineProperty(this, "width", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "height", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "domWidthPx", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "domHeightPx", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "cornerPoints", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "ratio", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "container", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "centerPosition", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            this.scale.set(realRatio, realRatio, realRatio);
+            // set public property
+            this.cornerPoints = cornerPoints;
+            this.ratio = ratio;
+            this.container = container;
+            if (realRatio === ratio) {
+                this.width = planeWidth;
+                this.height = planeHeight;
+                this.domWidthPx = domWidthPx;
+                this.domHeightPx = domHeightPx;
+                this.centerPosition = centerPosition;
+            }
+            else {
+                const scale = ratio / realRatio;
+                this.width = scale * planeWidth;
+                this.height = scale * planeHeight;
+                this.domWidthPx = scale * domWidthPx;
+                this.domHeightPx = scale * domHeightPx;
+                this.centerPosition = new THREE.Vector3()
+                    .subVectors(centerPosition.clone(), cornerPoints[0].clone())
+                    .multiplyScalar(scale)
+                    .add(cornerPoints[0]);
+            }
+            // end
+            container.classList.add(`${NAME}__container`);
+            // 旋转前
+            const startVector01 = new THREE.Vector3(1, 0, 0); // dom初始01点向量
+            const startVector12 = new THREE.Vector3(0, 1, 0); // dom初始12点向量
+            // 旋转后
+            const endVector01 = new THREE.Vector3().subVectors(cornerPoints[1], cornerPoints[0]); // 点0 -> 点1 的向量
+            const endVector12 = new THREE.Vector3().subVectors(cornerPoints[2], cornerPoints[1]); // 点1 -> 点2 的向量
+            // 使Vector01重合
+            const vector01Quaternion = new THREE__namespace.Quaternion().setFromUnitVectors(startVector01.normalize(), endVector01.normalize());
+            this.applyQuaternion(vector01Quaternion);
+            startVector12.applyQuaternion(vector01Quaternion);
+            // 使Vector12重合
+            const vector12Quaternion = new THREE__namespace.Quaternion().setFromUnitVectors(startVector12.normalize(), endVector12.normalize());
+            this.applyQuaternion(vector12Quaternion);
+            // set position
+            this.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+        }
+    }
+
+    const VERSION$2 = 'v1.1.0';
+    const PLUGIN_NAME$3 = 'CSS3DRenderer';
+    const PLUGIN$2 = `${PLUGIN_NAME$3}@${VERSION$2}`;
+    const pluginFlag$1 = (name) => `${PLUGIN$2}--${name}`;
+    const globalStore = {};
+    class CSS3DRender {
+        constructor() {
+            Object.defineProperty(this, "hooks", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: new Subscribe()
+            });
+            Object.defineProperty(this, "state", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: {
+                    enabled: true,
+                    visible: true,
+                    disposed: false,
+                }
+            });
+            Object.defineProperty(this, "store", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: {
+                    disposers: [],
+                    frontModeCSS3DObjects: {},
+                    behindModeCSS3DObjects: {},
+                }
+            });
+            /**
+             * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+             * @param { Vector3Position[] } points 矩形四个点坐标
+             * @param config 均为可选值
+             * @config_document `config` 均为可选值
+             *  | key                   | type                       | defaultValue        | comment |
+             *  | -                     | -                          | -                   | -       |
+             *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
+             *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
+             *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
+             *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
+             *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
+             *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
+             *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
+             *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
+             *  | `scene`               | *`THREE.Scene`*            | `undefined`         | 如果 mode 为 `behind`，需要传入 |
+             *
+             * @return
+             * ```typescript
+             *    {
+             *      id: string,                             // id
+             *      container: HTMLDIVElement               // dom容器
+             *      dispose: () => void                     // 销毁
+             *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
+             *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
+             *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
+             *      show: () => void                        // 同 setVisible(true)
+             *      hide: () => void                        // 同 setVisible(false)
+             *      setEnabled: (enabled: boolean) => void   // 添加/移除 container, 同 setEnabledById(id, enabled)
+             *      enable: () => void                      // 同 setEnabled(true)
+             *      disable: () => void                     // 同 setEnabled(false)
+             *    } | void
+             * ```
+             */
+            Object.defineProperty(this, "create3DElement", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (camera, points, config) => {
+                    if (this.state.disposed)
+                        return this.disposedErrorLog();
+                    // ==== init ====
+                    const mergeConfig = (() => {
+                        const defaultConfig = {
+                            ratio: 0.00216,
+                            devicePixelRatio: 1,
+                            mode: 'front',
+                            autoRender: true,
+                            container: document.createElement('div'),
+                            pointerEvents: 'none',
+                        };
+                        return Object.assign(defaultConfig, config);
+                    })();
+                    const vector3Points = points.map(anyPositionToVector3);
+                    if ((vector3Points === null || vector3Points === void 0 ? void 0 : vector3Points.length) < 4)
+                        return console.error(`${PLUGIN$2}: requires 4 point but params may have fewer`);
+                    const { ratio, devicePixelRatio: dpr, mode, autoRender, container, pointerEvents } = mergeConfig;
+                    const disposers = [];
+                    // ==== init END ====
+                    // 获取css3DObject, 如果mode为behind的话，也一起获取mesh
+                    const { css3DObject, opacityMesh } = this.createObject(vector3Points, {
+                        ratio,
+                        dpr,
+                        container,
+                        mode,
+                        pointerEvents,
+                    });
+                    container.id = `container--${css3DObject.uuid}`;
+                    const frontModeAndFrontModeUnInited = mode === 'front' && !globalStore.frontModeStore;
+                    const behindModeAndBehindModeUnInited = mode === 'behind' && !globalStore.behindModeStore;
+                    if (behindModeAndBehindModeUnInited) {
+                        globalStore.behindModeStore = {
+                            scene: mergeConfig.scene,
+                            css3DScene: new THREE__namespace.Scene(),
+                            css3DRenderer: new CSS3DRenderer.CSS3DRenderer(),
+                        };
+                    }
+                    if (frontModeAndFrontModeUnInited) {
+                        globalStore.frontModeStore = { css3DScene: new THREE__namespace.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+                    }
+                    const modeStore = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
+                    const { css3DScene, css3DRenderer } = modeStore;
+                    const render = (() => {
+                        const renderCSS3DObject = () => {
+                            if (mode === 'front') {
+                                this.store.frontModeCSS3DObjects[css3DObject.uuid] = {
+                                    visible: true,
+                                    enabled: true,
+                                    css3DObject,
+                                    mode: 'front',
+                                };
+                            }
+                            else {
+                                this.store.behindModeCSS3DObjects[css3DObject.uuid] = {
+                                    visible: true,
+                                    enabled: true,
+                                    css3DObject,
+                                    opacityMesh: opacityMesh,
+                                    mode: 'behind',
+                                    scene: mergeConfig.scene,
+                                };
+                            }
+                            css3DScene.add(css3DObject);
+                            if (mode === 'behind' && opacityMesh) {
+                                mergeConfig.scene.add(opacityMesh);
+                                disposers.push(() => opacityMesh && mergeConfig.scene.remove(opacityMesh));
+                            }
+                        };
+                        if (frontModeAndFrontModeUnInited || behindModeAndBehindModeUnInited) {
+                            css3DRenderer.domElement.style.position = 'absolute';
+                            css3DRenderer.domElement.style.top = '0';
+                            css3DRenderer.domElement.style.userSelect = 'none';
+                            css3DRenderer.domElement.style.pointerEvents = 'none';
+                            css3DRenderer.domElement.classList.add(pluginFlag$1(mode));
+                            const renderEveryFrame = () => {
+                                const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+                                modeStore.requestAnimationFrameId = requestAnimationFrameId;
+                                css3DRenderer.render(css3DScene, camera);
+                            };
+                            return () => {
+                                renderCSS3DObject();
+                                renderEveryFrame();
+                            };
+                        }
+                        return () => renderCSS3DObject();
+                    })();
+                    const wrapper = mode === 'front' ? globalStore.frontModeContainer : globalStore.behindModeContainer;
+                    if (wrapper) {
+                        this.appendToElement(wrapper, mode);
+                        const store = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
+                        if (store)
+                            store.appendedToPage = true;
+                    }
+                    const setVisible = (visible) => this.setVisibleById(css3DObject.uuid, visible);
+                    const setEnabled = (enabled) => this.setEnabledById(css3DObject.uuid, enabled);
+                    const show = () => setVisible(true);
+                    const hide = () => setVisible(false);
+                    const enable = () => setEnabled(true);
+                    const disable = () => setEnabled(false);
+                    const dispose = () => {
+                        delete this.store.frontModeCSS3DObjects[css3DObject.uuid];
+                        delete this.store.behindModeCSS3DObjects[css3DObject.uuid];
+                        disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
+                        css3DScene.remove(css3DObject);
+                        // 如果全没了，就清除父容器
+                        if (css3DScene.children.length === 0) {
+                            if (typeof modeStore.requestAnimationFrameId === 'number') {
+                                cancelAnimationFrame(modeStore.requestAnimationFrameId);
+                            }
+                            css3DRenderer.domElement.remove();
+                            if (mode === 'front')
+                                globalStore.frontModeStore = undefined;
+                            if (mode === 'behind')
+                                globalStore.behindModeStore = undefined;
+                        }
+                        return true;
                     };
-                    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);
+                    this.store.disposers.push(dispose);
+                    if (autoRender)
+                        render();
+                    return {
+                        id: css3DObject.uuid,
+                        container,
+                        dispose,
+                        css3DObject,
+                        render: autoRender ? undefined : render,
+                        show,
+                        hide,
+                        setVisible,
+                        disable,
+                        enable,
+                        setEnabled,
+                        appendToElement: (container) => this.appendToElement(container, mode),
                     };
-                    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));
+                }
+            });
+            Object.defineProperty(this, "setVisibleById", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (id, visible) => {
+                    var _a;
+                    const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
+                    if (!data)
+                        return;
+                    data.css3DObject.visible = visible;
+                    data.visible = visible;
+                    if (data.mode === 'behind')
+                        data.opacityMesh.visible = visible;
+                }
+            });
+            Object.defineProperty(this, "setEnabledById", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (id, enabled) => {
+                    var _a, _b, _c;
+                    const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
+                    if (!data)
+                        return;
+                    const css3DScene = data.mode === 'front' ? (_b = globalStore.frontModeStore) === null || _b === void 0 ? void 0 : _b.css3DScene : (_c = globalStore.behindModeStore) === null || _c === void 0 ? void 0 : _c.css3DScene;
+                    if (!css3DScene)
+                        return;
+                    if (enabled) {
+                        css3DScene.add(data.css3DObject);
+                        if (data.mode === 'behind')
+                            data.scene.add(data.opacityMesh);
+                    }
+                    else {
+                        css3DScene.remove(data.css3DObject);
+                        if (data.mode === 'behind')
+                            data.scene.remove(data.opacityMesh);
+                    }
+                    data.enabled = enabled;
+                }
+            });
+            Object.defineProperty(this, "createObject", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (points, config) => {
+                    const { ratio, dpr, container, mode, pointerEvents } = config;
+                    const css3DObject = new CSS3DObjectPlus(container, points, ratio, dpr);
+                    container.style.pointerEvents = pointerEvents;
+                    container.classList.add(`${PLUGIN_NAME$3}__container`);
+                    const { domWidthPx, domHeightPx } = css3DObject;
+                    // 生成透明Mesh
+                    const opacityMesh = (() => {
+                        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);
+                            const mesh = new THREE__namespace.Mesh(geometry, material);
+                            mesh.name = pluginFlag$1('mesh');
+                            mesh.position.copy(css3DObject.position);
+                            mesh.rotation.copy(css3DObject.rotation);
+                            mesh.scale.copy(css3DObject.scale);
+                            return mesh;
                         }
-                    };
+                    })();
+                    return { css3DObject, opacityMesh };
                 }
-                else {
-                    return () => {
-                        scene.add(css3DObject);
+            });
+            Object.defineProperty(this, "createResizeObserver", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (element, resizeHandler, fireImmediately = true) => {
+                    if (!element || !ResizeObserver)
+                        return { observe: () => { }, unobserve: () => { } };
+                    const resizeObserverHandler = () => {
+                        /**
+                         * 这里evenNumber策略是遇到奇数会加1，在某些浏览器中会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
+                         * 所以为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
+                         */
+                        const width = evenNumber(element.clientWidth, { smaller: true });
+                        const height = evenNumber(element.clientHeight, { smaller: true });
+                        resizeHandler(width, height);
+                    };
+                    const observer = new ResizeObserver(resizeObserverHandler);
+                    if (fireImmediately)
+                        resizeObserverHandler();
+                    return {
+                        observe: () => observer.observe(element),
+                        unobserve: () => observer.unobserve(element),
                     };
                 }
-            })();
-            if (frontModeUnInited) {
-                const wrapper = fiveElement.parentElement || document.body;
-                wrapper.appendChild(css3DRenderer.domElement);
+            });
+            Object.defineProperty(this, "disposedErrorLog", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: () => {
+                    console.error(`${PLUGIN$2} is disposed`);
+                }
+            });
+        }
+        getCurrentState() {
+            return this.state;
+        }
+        setState(state, options = { userAction: true }) {
+            if (this.state.disposed)
+                return this.disposedErrorLog();
+            const prevState = Object.assign({}, this.state);
+            this.state = Object.assign(this.state, state);
+            if (prevState.visible !== this.state.visible) {
+                state.visible ? this.handleShow() : this.handleHide();
             }
-            if (behindModeUnInited) {
-                const wrapper = behindFiveContainer;
-                wrapper.appendChild(css3DRenderer.domElement);
+            if (prevState.enabled !== this.state.enabled) {
+                state.enabled ? this.handleEnable() : this.handleDisable();
             }
-            // ======= 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);
+            this.hooks.emit('stateChange', { state: this.state, prevState, userAction: options.userAction });
+        }
+        dispose() {
+            this.store.disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
+            this.store.disposers = [];
+            this.hooks.emit('dispose');
+            this.state.disposed = true;
+        }
+        async show({ userAction } = { userAction: true }) {
+            if (this.state.disposed)
+                return this.disposedErrorLog();
+            this.setState({ visible: true }, { userAction });
+            this.hooks.emit('show', { userAction });
+        }
+        async hide({ userAction } = { userAction: true }) {
+            if (this.state.disposed)
+                return this.disposedErrorLog();
+            this.setState({ visible: false }, { userAction });
+            this.hooks.emit('hide', { userAction });
+        }
+        enable({ userAction } = { userAction: true }) {
+            if (this.state.disposed)
+                return this.disposedErrorLog();
+            this.setState({ enabled: true }, { userAction });
+            this.hooks.emit('enable', { userAction });
+        }
+        disable({ userAction } = { userAction: true }) {
+            if (this.state.disposed)
+                return this.disposedErrorLog();
+            this.setState({ enabled: false }, { userAction });
+            this.hooks.emit('disable', { userAction });
+        }
+        appendToElement(container, mode) {
+            if (!container)
+                throw new Error(`${PLUGIN$2} Cannot append to container: container is ${container}`);
+            const store = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
+            if (!store) {
+                if (mode === 'front')
+                    globalStore.frontModeContainer = container;
+                if (mode === 'behind')
+                    globalStore.behindModeContainer = container;
+                return;
             }
-            else {
-                state.disposeCallbacks.push(dispose);
+            if (store.appendedToPage)
+                return;
+            container.appendChild(store.css3DRenderer.domElement);
+            if (!globalStore.resizeObserver) {
+                const { observe, unobserve } = this.createResizeObserver(container, store.css3DRenderer.setSize, true);
+                globalStore.resizeObserver = { observe, unobserve };
+                observe();
+                this.store.disposers.push(unobserve);
             }
-            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));
+            store.appendedToPage = true;
+        }
+        async handleShow() {
+            Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
+                value.css3DObject.visible = value.visible;
+            });
+            Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
+                value.css3DObject.visible = value.visible;
+                value.opacityMesh.visible = value.visible;
+            });
+        }
+        async handleHide() {
+            Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
+                value.css3DObject.visible = false;
+            });
+            Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
+                value.css3DObject.visible = false;
+                value.opacityMesh.visible = false;
+            });
+        }
+        handleEnable() {
+            Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
+                var _a;
+                if (!value.enabled)
+                    return;
+                (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
+            });
+            Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
+                var _a, _b;
+                if (!value.enabled)
+                    return;
+                (_a = globalStore.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
+                (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.scene.add(value.opacityMesh);
+            });
+        }
+        handleDisable() {
+            Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
+                var _a;
+                (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
+            });
+            Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
+                var _a, _b;
+                (_a = globalStore.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
+                (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.scene.remove(value.opacityMesh);
+            });
+        }
+    }
+
+    const PLUGIN_NAME$2 = `CSS3DRenderPlugin-${random()}@${VERSION$2}`;
+    class Controller$8 extends CSS3DRender {
+        constructor(five) {
+            super();
+            Object.defineProperty(this, "five", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
             /**
-             * [0,1,0] => [0,0,1]  为rotate Worldx正方向
-             * [0,0,1] => [0,1,0]  为rotate Worldy正方向
-             * [0,1,1] => [-1,0,0] 为rotate Worldz正方向
+             * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+             * @param { Vector3Position[] } points 矩形四个点坐标
+             * @param config 均为可选值
+             * @config_document `config` 均为可选值
+             *  | key                   | type                       | defaultValue        | comment |
+             *  | -                     | -                          | -                   | -       |
+             *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
+             *  | ~~`dpr`~~             | ~~*`number`*~~             | ~~`undefined`~~     | ~~**已改名**，请使用~~ `devicePixelRatio` |
+             *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
+             *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
+             *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
+             *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
+             *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
+             *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
+             *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
+             *  | `behindFiveContainer` | *`HTMLElement`*            | `undefined`         | 如果 mode 为 `behind`，需要传入容器，并确保此容器位five下方，且中间无其他不透明的dom元素遮挡 |
+             *
+             * @return
+             * ```typescript
+             *    {
+             *      id: string,                             // id
+             *      container: HTMLDIVElement               // dom容器
+             *      dispose: () => void                     // 销毁
+             *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
+             *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
+             *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
+             *      show: () => void                        // 同 setVisible(true)
+             *      hide: () => void                        // 同 setVisible(false)
+             *      setEnabled: (enabled: boolean) => void  // 添加/移除 container, 同 setEnabledById(id, enabled)
+             *      enable: () => void                      // 同 setEnabled(true)
+             *      disable: () => void                     // 同 setEnabled(false)
+             *    } | void
+             * ```
              */
-            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 = [];
-            },
-        };
-    };
+            Object.defineProperty(this, "create3DDomContainer", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (points, config) => {
+                    if (this.state.disposed)
+                        return;
+                    // ==== init ====
+                    const mergeConfig = (() => {
+                        var _a;
+                        if ((config === null || config === void 0 ? void 0 : config.dpr) !== undefined)
+                            console.warn(`${PLUGIN_NAME$2}: please use "config.devicePixelRatio" replace "config.dpr"`);
+                        const defaultconfig = {
+                            ratio: 0.00216,
+                            devicePixelRatio: (_a = config === null || config === void 0 ? void 0 : config.dpr) !== null && _a !== void 0 ? _a : 1,
+                            mode: 'front',
+                            autoRender: true,
+                        };
+                        return Object.assign(defaultconfig, config, (config === null || config === void 0 ? void 0 : config.mode) === 'behind' ? { scene: this.five.scene } : undefined);
+                    })();
+                    const fiveElement = this.five.getElement();
+                    if (!fiveElement)
+                        return console.error(`${PLUGIN_NAME$2}: five.getElement() is ${fiveElement}`);
+                    const { autoRender, mode } = mergeConfig;
+                    // 自动添加dom
+                    const wrapper = mode === 'front' ? fiveElement.parentElement : mergeConfig.behindFiveContainer;
+                    this.appendToElement(wrapper || document.body, mode);
+                    const create3DElementResault = this.create3DElement(this.five.camera, points, Object.assign(Object.assign({}, mergeConfig), { autoRender: false }));
+                    if (!create3DElementResault)
+                        return;
+                    const oldRender = create3DElementResault.render;
+                    const newRender = () => {
+                        var _a;
+                        if (mode === 'front') {
+                            oldRender();
+                        }
+                        if (mode === 'behind') {
+                            if ((_a = this.five.model) === null || _a === void 0 ? void 0 : _a.loaded)
+                                oldRender();
+                            else
+                                this.five.once('modelLoaded', () => oldRender());
+                        }
+                    };
+                    if (autoRender)
+                        newRender();
+                    return Object.assign(Object.assign({}, create3DElementResault), { render: autoRender ? undefined : newRender });
+                }
+            });
+            this.five = five;
+        }
+        /** @deprecated disposeAll() renamed as dispose() */
+        disposeAll() {
+            return this.dispose();
+        }
+        setState(...params) {
+            const result = super.setState(...params);
+            this.five.needsRender = true;
+            return result;
+        }
+    }
+
+    const CSS3DRenderPlugin = (five) => new Controller$8(five);
 
     function createLine$1(point1, point2, color = new THREE.Vector3(1, 1, 1), dashed = false) {
         const line$1 = new line.Line(point1, point2);
@@ -8055,6 +8656,8 @@
         return new THREE.CanvasTexture(canvas);
     }
 
+    const transformPositionToVector3 = ({ x, y, z }) => new THREE.Vector3(x, y, z);
+
     /**
      * 模型入户门引导插件
      */