@realsee/dnalogel 2.0.0-alpha.49 → 2.0.0-alpha.51

package/libs/CSS3DRenderPlugin/Controller.d.ts

@@ -0,0 +1,110 @@
+import * as BasePlugin from '../base/BasePlugin';
+import type { Five } from '@realsee/five';
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import type { State, EventMap } from './typing';
+import { AnyPosition } from './utils';
+export interface Create3DDomContainerParamsType {
+    points: AnyPosition[];
+    config?: {
+        ratio?: number;
+        /** @deprecated dpr renamed as devicePixelRatio */
+        dpr?: number;
+        devicePixelRatio?: number;
+        autoRender?: boolean;
+        container?: HTMLElement;
+        pointerEvents?: 'none' | 'auto';
+    } & ({
+        mode?: 'front';
+    } | {
+        mode: 'behind';
+        behindFiveContainer: HTMLElement;
+    });
+}
+export interface Vector3Position {
+    x: number;
+    y: number;
+    z: number;
+}
+export default class Controller extends BasePlugin.Controller<State, EventMap> {
+    state: {
+        enabled: boolean;
+        visible: boolean;
+    };
+    private store;
+    constructor(five: Five);
+    setState(state: Partial<State>, options?: {
+        userAction: boolean;
+    }): void;
+    /** @deprecated disposeAll() renamed as dispose() */
+    disposeAll(): void;
+    dispose(): void;
+    show({ userAction }?: {
+        userAction: boolean;
+    }): Promise<void>;
+    hide({ userAction }?: {
+        userAction: boolean;
+    }): Promise<void>;
+    enable({ userAction }?: {
+        userAction: boolean;
+    }): void;
+    disable({ userAction }?: {
+        userAction: boolean;
+    }): void;
+    setVisibleById: (id: string, visible: boolean) => void;
+    setEnabledById: (id: string, enabled: boolean) => void;
+    /**
+     * @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
+     * ```
+     */
+    create3DDomContainer: (points: Create3DDomContainerParamsType['points'], config?: Create3DDomContainerParamsType['config']) => void | {
+        id: string;
+        container: HTMLElement;
+        dispose: () => boolean;
+        css3DObject: CSS3DObject;
+        render: () => void;
+        show: () => void;
+        hide: () => void;
+        setVisible: (visible: boolean) => void;
+        disable: () => void;
+        enable: () => void;
+        setEnabled: (enabled: boolean) => void;
+    };
+    private createResizeObserver;
+    private createObject;
+    private disposedErrorLog;
+    private handleShow;
+    private handleHide;
+    private handleEnable;
+    private handleDisable;
+}

package/libs/CSS3DRenderPlugin/Controller.js

@@ -0,0 +1,470 @@
+import * as BasePlugin from '../base/BasePlugin';
+import * as THREE from 'three';
+import { Vector3 } from 'three';
+import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { evenNumber, centerPoint, random, anyPositionToVector3 } from './utils';
+const VERSION = 'v1.0.1';
+const PLUGIN_NAME = `DnalogelPlugin-CSS3DRenderPlugin-${random()}@${VERSION}`;
+const pluginFlag = (name) => `${PLUGIN_NAME}--${name}`;
+const MinRatio = 0.00216;
+const globalState = {};
+export default class Controller extends BasePlugin.Controller {
+    constructor(five) {
+        super(five);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                enabled: true,
+                visible: true,
+            }
+        });
+        Object.defineProperty(this, "store", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                disposed: false,
+                disposers: [],
+                frontModeCSS3DObjects: {},
+                behindModeCSS3DObjects: {},
+            }
+        });
+        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;
+                this.five.needsRender = true;
+            }
+        });
+        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 = globalState.frontModeStore) === null || _b === void 0 ? void 0 : _b.css3DScene : (_c = globalState.behindModeStore) === null || _c === void 0 ? void 0 : _c.css3DScene;
+                if (!css3DScene)
+                    return;
+                if (enabled) {
+                    css3DScene.add(data.css3DObject);
+                    if (data.mode === 'behind')
+                        this.five.scene.add(data.opacityMesh);
+                }
+                else {
+                    css3DScene.remove(data.css3DObject);
+                    if (data.mode === 'behind')
+                        this.five.scene.remove(data.opacityMesh);
+                }
+                data.enabled = enabled;
+                this.five.needsRender = true;
+            }
+        });
+        /**
+         * @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
+         * ```
+         */
+        Object.defineProperty(this, "create3DDomContainer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (points, config) => {
+                if (this.store.disposed)
+                    return this.disposedErrorLog();
+                // ==== init ====
+                const mergeConfig = (() => {
+                    var _a;
+                    if ((config === null || config === void 0 ? void 0 : config.dpr) !== undefined)
+                        console.warn(`${PLUGIN_NAME}: 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,
+                        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_NAME}: requires 4 point but params may have fewer`);
+                const { five, store } = this;
+                const { ratio, devicePixelRatio: dpr, mode, autoRender, container, pointerEvents } = mergeConfig;
+                const fiveElement = five.getElement();
+                if (!fiveElement)
+                    return console.error(`${PLUGIN_NAME}: five.getElement() is ${fiveElement}`);
+                const disposers = [];
+                // ==== init END ====
+                // 获取css3DObject, 如果mode为behind的话，也一起获取mesh
+                const { css3DObject, opacityMesh } = this.createObject(vector3Points, {
+                    ratio,
+                    dpr,
+                    container,
+                    mode,
+                    pointerEvents,
+                });
+                container.id = `container--${css3DObject.uuid}`;
+                let resizeObserver;
+                const frontModeAndFrontModeUnInited = mode === 'front' && !globalState.frontModeStore;
+                const behindModeAndBehindModeUnInited = mode === 'behind' && !globalState.behindModeStore;
+                if (behindModeAndBehindModeUnInited) {
+                    globalState.behindModeStore = { css3DScene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer() };
+                }
+                if (frontModeAndFrontModeUnInited) {
+                    globalState.frontModeStore = { css3DScene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer() };
+                }
+                const modeStore = mode === 'front' ? globalState.frontModeStore : globalState.behindModeStore;
+                const { css3DScene, css3DRenderer } = modeStore;
+                const render = (() => {
+                    const renderCSS3DObject = () => {
+                        var _a;
+                        const addCSS3DObject = () => {
+                            css3DScene.add(css3DObject);
+                            if (mode === 'behind' && opacityMesh) {
+                                five.scene.add(opacityMesh);
+                                disposers.push(() => opacityMesh && five.scene.remove(opacityMesh));
+                            }
+                        };
+                        if (mode === 'front') {
+                            store.frontModeCSS3DObjects[css3DObject.uuid] = { visible: true, enabled: true, css3DObject, mode: 'front' };
+                            addCSS3DObject();
+                        }
+                        else {
+                            store.behindModeCSS3DObjects[css3DObject.uuid] = {
+                                visible: true,
+                                enabled: true,
+                                css3DObject,
+                                opacityMesh: opacityMesh,
+                                mode: 'behind',
+                            };
+                            if ((_a = five.model) === null || _a === void 0 ? void 0 : _a.loaded)
+                                addCSS3DObject();
+                            else
+                                five.once('modelLoaded', () => addCSS3DObject());
+                        }
+                    };
+                    if (frontModeAndFrontModeUnInited || behindModeAndBehindModeUnInited) {
+                        resizeObserver = this.createResizeObserver(css3DRenderer.setSize);
+                        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(mode));
+                        const renderEveryFrame = () => {
+                            const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+                            modeStore.requestAnimationFrameId = requestAnimationFrameId;
+                            css3DRenderer.render(css3DScene, five.camera);
+                        };
+                        return () => {
+                            var _a;
+                            renderCSS3DObject();
+                            (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
+                            renderEveryFrame();
+                        };
+                    }
+                    return () => renderCSS3DObject();
+                })();
+                if (frontModeAndFrontModeUnInited) {
+                    const wrapper = fiveElement.parentElement || document.body;
+                    wrapper.appendChild(css3DRenderer.domElement);
+                }
+                if (behindModeAndBehindModeUnInited) {
+                    const wrapper = config.behindFiveContainer || fiveElement.parentElement || document.body;
+                    wrapper.appendChild(css3DRenderer.domElement);
+                }
+                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 = () => {
+                    var _a;
+                    delete store.frontModeCSS3DObjects[css3DObject.uuid];
+                    delete 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')
+                            globalState.frontModeStore = undefined;
+                        if (mode === 'behind')
+                            globalState.behindModeStore = undefined;
+                        if (!globalState.behindModeStore && !globalState.frontModeStore) {
+                            (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
+                        }
+                    }
+                    return true;
+                };
+                store.disposers.push(dispose);
+                if (autoRender)
+                    render();
+                return {
+                    id: css3DObject.uuid,
+                    container,
+                    dispose,
+                    css3DObject,
+                    render: autoRender ? undefined : render,
+                    show,
+                    hide,
+                    setVisible,
+                    disable,
+                    enable,
+                    setEnabled,
+                };
+            }
+        });
+        Object.defineProperty(this, "createResizeObserver", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (resizeHandler, fireImmediately = true) => {
+                const fiveElement = this.five.getElement();
+                if (!fiveElement || !ResizeObserver)
+                    return { observe: () => { }, unobserve: () => { } };
+                const resizeObserverHandler = () => {
+                    /**
+                     * 这里evenNumber策略是遇到奇数会加1，在某些浏览器中会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
+                     * 所以为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
+                     */
+                    const width = evenNumber(fiveElement.clientWidth, { smaller: true });
+                    const height = evenNumber(fiveElement.clientHeight, { smaller: true });
+                    resizeHandler(width, height);
+                };
+                const observer = new ResizeObserver(resizeObserverHandler);
+                if (fireImmediately)
+                    resizeObserverHandler();
+                return {
+                    observe: () => observer.observe(fiveElement),
+                    unobserve: () => observer.unobserve(fiveElement),
+                };
+            }
+        });
+        Object.defineProperty(this, "createObject", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (points, config) => {
+                const { ratio: wantRatio, dpr, container, mode, pointerEvents } = config;
+                const ratio = Math.max(MinRatio, wantRatio);
+                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);
+                let css3DObject;
+                if (ratio === wantRatio) {
+                    css3DObject = new CSS3DObject(container);
+                    css3DObject.scale.set(ratio, ratio, ratio);
+                    container.style.width = `${domWidthPx}px`;
+                    container.style.height = `${domHeightPx}px`;
+                }
+                else {
+                    // 兼容ratio小于0.00216的情况
+                    const element = document.createElement('div');
+                    css3DObject = new CSS3DObject(element);
+                    css3DObject.scale.set(ratio, ratio, ratio);
+                    element.style.width = `${domWidthPx}px`;
+                    element.style.height = `${domHeightPx}px`;
+                    element.style.pointerEvents = 'none';
+                    const scale = wantRatio / ratio;
+                    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);
+                }
+                container.style.pointerEvents = pointerEvents;
+                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 Vector3(0, 1, 0).angleTo(new Vector3(0, vector12.y, vector12.z));
+                const rotateYAngle = new Vector3(1, 0, 0).angleTo(new Vector3(vector01.x, 0, vector01.z));
+                const rotateZAngle = vector01.angleTo(new 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 Vector3(1, 0, 0), rotateX); // x
+                css3DObject.rotateOnWorldAxis(new Vector3(0, 1, 0), rotateY); // y
+                css3DObject.rotateOnWorldAxis(new Vector3(0, 0, 1), rotateZ); // z
+                css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+                // 生成透明Mesh
+                const opacityMesh = (() => {
+                    if (mode === 'behind') {
+                        const material = new THREE.MeshBasicMaterial({
+                            opacity: 0,
+                            transparent: false,
+                            side: THREE.DoubleSide,
+                        });
+                        const geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
+                        const mesh = new THREE.Mesh(geometry, material);
+                        mesh.name = pluginFlag('mesh');
+                        mesh.position.copy(css3DObject.position);
+                        mesh.rotation.copy(css3DObject.rotation);
+                        mesh.scale.copy(css3DObject.scale);
+                        return mesh;
+                    }
+                })();
+                return { css3DObject, opacityMesh };
+            }
+        });
+        Object.defineProperty(this, "disposedErrorLog", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                console.error(`${PLUGIN_NAME} is disposed`);
+            }
+        });
+    }
+    setState(state, options = { userAction: true }) {
+        if (this.store.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 (prevState.enabled !== this.state.enabled) {
+            state.enabled ? this.handleEnable() : this.handleDisable();
+        }
+        this.hooks.emit('stateChange', { state: this.state, prevState, userAction: options.userAction });
+    }
+    /** @deprecated disposeAll() renamed as dispose() */
+    disposeAll() {
+        return this.dispose();
+    }
+    dispose() {
+        this.store.disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
+        this.store.disposers = [];
+        this.hooks.emit('dispose');
+        this.store.disposed = true;
+    }
+    async show({ userAction } = { userAction: true }) {
+        if (this.store.disposed)
+            return this.disposedErrorLog();
+        this.setState({ visible: true }, { userAction });
+        this.hooks.emit('show', { userAction });
+    }
+    async hide({ userAction } = { userAction: true }) {
+        if (this.store.disposed)
+            return this.disposedErrorLog();
+        this.setState({ visible: false }, { userAction });
+        this.hooks.emit('hide', { userAction });
+    }
+    enable({ userAction } = { userAction: true }) {
+        if (this.store.disposed)
+            return this.disposedErrorLog();
+        this.setState({ enabled: true }, { userAction });
+        this.hooks.emit('enable', { userAction });
+    }
+    disable({ userAction } = { userAction: true }) {
+        if (this.store.disposed)
+            return this.disposedErrorLog();
+        this.setState({ enabled: false }, { userAction });
+        this.hooks.emit('disable', { userAction });
+    }
+    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;
+        });
+        this.five.needsRender = true;
+    }
+    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;
+        });
+        this.five.needsRender = true;
+    }
+    handleEnable() {
+        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
+            var _a;
+            if (!value.enabled)
+                return;
+            (_a = globalState.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
+        });
+        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
+            var _a;
+            if (!value.enabled)
+                return;
+            (_a = globalState.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
+            this.five.scene.add(value.opacityMesh);
+        });
+        this.five.needsRender = true;
+    }
+    handleDisable() {
+        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
+            var _a;
+            (_a = globalState.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
+        });
+        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
+            var _a;
+            (_a = globalState.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
+            this.five.scene.remove(value.opacityMesh);
+        });
+        this.five.needsRender = true;
+    }
+}

package/libs/CSS3DRenderPlugin/typing.d.ts

@@ -0,0 +1,23 @@
+import type CSS3DRenderPlugin from '.';
+import type * as BasePlugin from '../base/BasePlugin';
+export declare type CSS3DRenderPluginParameterType = undefined;
+export declare type CSS3DRenderPluginExportType = ReturnType<typeof CSS3DRenderPlugin>;
+export interface State extends BasePlugin.State {
+    enabled: boolean;
+    visible: boolean;
+}
+export interface EventMap extends BasePlugin.EventMap<State> {
+    show: (options?: {
+        userAction?: boolean;
+    }) => void;
+    hide: (options?: {
+        userAction?: boolean;
+    }) => void;
+    enable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    disable: (options?: {
+        userAction?: boolean;
+    }) => void;
+}
+export declare type Create3DDomContainerReturnType = ReturnType<CSS3DRenderPluginExportType['create3DDomContainer']>;

package/libs/CSS3DRenderPlugin/typing.js

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

package/libs/CSS3DRenderPlugin/utils/centerPoint.d.ts

@@ -0,0 +1,2 @@
+import { Vector3 } from 'three';
+export declare function centerPoint(point1: Vector3, point2: Vector3): Vector3;

package/libs/CSS3DRenderPlugin/utils/centerPoint.js

@@ -0,0 +1,4 @@
+import { Vector3 } from 'three';
+export function centerPoint(point1, point2) {
+    return new Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
+}

package/libs/CSS3DRenderPlugin/utils/evenNumber.d.ts

@@ -0,0 +1,3 @@
+export declare function evenNumber(num: number, config?: {
+    smaller?: boolean;
+}): number;

package/libs/CSS3DRenderPlugin/utils/evenNumber.js

@@ -0,0 +1,4 @@
+export 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);
+}

package/libs/CSS3DRenderPlugin/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './centerPoint';
+export * from './evenNumber';
+export * from './random';
+export * from './positionToVector3';

package/libs/CSS3DRenderPlugin/utils/index.js

@@ -0,0 +1,4 @@
+export * from './centerPoint';
+export * from './evenNumber';
+export * from './random';
+export * from './positionToVector3';

package/libs/CSS3DRenderPlugin/utils/positionToVector3.d.ts

@@ -0,0 +1,13 @@
+import { Vector3 } from 'three';
+export declare type AnyPosition = Vector3 | [number, number, number] | {
+    x: number;
+    y: number;
+    z: number;
+};
+export declare const positionToVector3: ({ x, y, z }: {
+    x: number;
+    y: number;
+    z: number;
+}) => Vector3;
+export declare const arrayPositionToVector3: ([x, y, z]: [number, number, number]) => Vector3;
+export declare const anyPositionToVector3: (position: AnyPosition) => Vector3;

package/libs/CSS3DRenderPlugin/utils/positionToVector3.js

@@ -0,0 +1,11 @@
+import { Vector3 } from 'three';
+export const positionToVector3 = ({ x, y, z }) => new Vector3(x, y, z);
+export const arrayPositionToVector3 = ([x, y, z]) => new Vector3(x, y, z);
+export const anyPositionToVector3 = (position) => {
+    if (position instanceof Vector3)
+        return position;
+    else if (Array.isArray(position))
+        return arrayPositionToVector3(position);
+    else
+        return positionToVector3(position);
+};