@realsee/dnalogel 2.1.0-alpha.11 → 2.1.0-alpha.13

package/libs/PanoTagPlugin/controller/index.js

@@ -9,9 +9,10 @@ import { TagComputer } from './TagComputer';
 import { CSS3DRenderPlugin } from '../../CSS3DRenderPlugin';
 import { DimensionType, PointType } from '../typings';
 // declare const __APP_VERSION__: string
-const VERSION = '0.3.7';
+const VERSION = '1.0.0';
 const PLUGIN_NAME = `DnalogelPlugin-PanoTagPlugin@${VERSION}`;
-const TAG_INITIAL_UNFOLDED = true;
+// 初始是否展开
+const TAG_INITIAL_UNFOLDED = false;
 export const pluginFlag = (name) => `${PLUGIN_NAME}--${name}`;
 class PanoTagPluginController extends TagComputer {
     constructor(five, params) {
@@ -121,8 +122,9 @@ class PanoTagPluginController extends TagComputer {
     /**
      * @description: 加载数据
      */
-    load(data) {
+    load(data, config) {
         var _a, _b;
+        this.clearTags();
         console.log(PLUGIN_NAME, 'load:', { data });
         if (this.params.mergePluginDefaultConfigToLoadDataConfig) {
             this.config = objectAssignDeep({}, this.config, {
@@ -136,17 +138,15 @@ class PanoTagPluginController extends TagComputer {
             if (data.contentTypeConfig)
                 this.config.contentTypeConfig = data.contentTypeConfig;
         }
-        this.clearCache();
-        this.disposeAllCSS3DContainer();
-        this.tags = [];
-        this.addTag(data.tagList);
+        this.addTag(data.tagList, config);
+        // debug
         if (this.debug)
             addDebugPoints(this.five, this.tags);
     }
     /**
      * @description: 添加标签
      */
-    addTag(tag) {
+    addTag(tag, config) {
         const tags = Array.isArray(tag) ? tag : [tag];
         const _tags = tags
             .map((tag) => {
@@ -156,7 +156,7 @@ class PanoTagPluginController extends TagComputer {
             .filter((tag) => tag.position);
         this.tags.push(..._tags);
         actionAfterFiveModelLoad(this.five, () => {
-            var _a, _b;
+            var _a, _b, _c;
             // 添加事件
             if (this.store.eventListenerDisposer) {
                 (_b = (_a = this.store).eventListenerDisposer) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -172,10 +172,18 @@ class PanoTagPluginController extends TagComputer {
                 }, 200);
             }
             this.checkPanelTag();
-            this.setVisibleAndUnfoldedByPanoIndex();
-            this.updateRenderAllTag();
+            // v0.3.8 新增 withAnimation，默认 false
+            // v1.0.0 withAnimation 默认值改为 true
+            this.setVisibleAndUnfolded({ withAnimation: (_c = config === null || config === void 0 ? void 0 : config.withAnimation) !== null && _c !== void 0 ? _c : true }).then(() => this.updateRenderAllTags());
+            this.updateRenderAllTags();
         });
     }
+    clearTags() {
+        this.tags = [];
+        this.clearCache();
+        this.disposeAllCSS3DContainer();
+        this.updateRenderAllTags();
+    }
     async show(params) {
         const { userAction = true, withAnimation = false } = params !== null && params !== void 0 ? params : {};
         if (this.store.disposed)
@@ -266,7 +274,7 @@ class PanoTagPluginController extends TagComputer {
         }
         // 3D 转 2D 的时候要销毁 3D container
         this.checkPanelTag();
-        this.updateRenderAllTag();
+        this.updateRenderAllTags();
     }
     /**
      * @description: 改变tag任意属性
@@ -284,7 +292,7 @@ class PanoTagPluginController extends TagComputer {
         if ((currentTag === null || currentTag === void 0 ? void 0 : currentTag.tag3DContentSvelte) && (tag === null || tag === void 0 ? void 0 : tag.normal)) {
             currentTag.tag3DContentSvelte.currentNormal = arrayPositionToVector3(tag.normal);
         }
-        this.updateRenderAllTag();
+        this.updateRenderAllTags();
         this.checkPanelTag();
     }
     /**
@@ -298,12 +306,31 @@ class PanoTagPluginController extends TagComputer {
                 return;
             this.tags.splice(index, 1);
         });
-        this.updateRenderAllTag();
+        this.updateRenderAllTags();
     }
     /** 暂停当前标签内进行的所有多媒体 */
     pauseCurrentMedia() {
         this.mediaStore.set({ currentMediaUrl: '' });
     }
+    /**
+     * @description: 设置 visible 和 unfolded
+     */
+    async setVisibleAndUnfolded({ withAnimation } = { withAnimation: false }) {
+        this.setVisibleByPanoIndex();
+        if (withAnimation) {
+            return new Promise((resolve, reject) => {
+                // setTimeout 初始隐藏，然后展开，而不是一步到位，要不就没动画了
+                setTimeout(() => {
+                    this.setUnfoldedByPanoIndex();
+                    resolve();
+                }, 10); // 10ms 是等待 TextTag onMount
+            });
+        }
+        else {
+            this.setUnfoldedByPanoIndex();
+            return Promise.resolve();
+        }
+    }
     handleShow() {
         this.state.visible = true;
         this.updateTagContainerVisible();
@@ -314,7 +341,7 @@ class PanoTagPluginController extends TagComputer {
     }
     handleEnable() {
         this.state.enabled = true;
-        this.updateRenderAllTag();
+        this.updateRenderAllTags();
     }
     handleDisable() {
         var _a;
@@ -360,7 +387,7 @@ class PanoTagPluginController extends TagComputer {
         // resize
         const show = () => {
             this.show();
-            this.updateRenderAllTag();
+            this.updateRenderAllTags();
         };
         const { observe: hideObserve, unobserve: hideUnobserve } = resizeObserver(throttle(() => {
             /**
@@ -398,7 +425,7 @@ class PanoTagPluginController extends TagComputer {
                 tag.temporaryState = Object.assign(Object.assign({}, tag.temporaryState), { visible: false });
             }
         });
-        this.updateRenderAllTag();
+        this.updateRenderAllTags();
     }
     /**
      * @description: 走点/切换模型后显示
@@ -436,13 +463,13 @@ class PanoTagPluginController extends TagComputer {
                         tag.state.unfolded = false;
                 });
             }
-            this.updateRenderAllTag();
+            this.updateRenderAllTags();
         }
     }
     /**
      * @description: 更新所有标签
      */
-    updateRenderAllTag() {
+    updateRenderAllTags() {
         this.updateRenderPointTag();
         this.updateRenderPlaneTag();
     }
@@ -463,20 +490,20 @@ class PanoTagPluginController extends TagComputer {
             // 设置展开/收起
             this.setUnfoldedByCamera();
             // 渲染
-            this.updateRenderAllTag();
+            this.updateRenderAllTags();
         }, 100);
     }
     handleFiveCameraUpdate() {
         // 渲染
         this.updateRenderPointTag();
     }
-    handleFivePanoArrived() {
-        this.setVisibleAndUnfoldedByPanoIndex();
+    async handleFivePanoArrived() {
+        await this.setVisibleAndUnfolded();
         this.tags.forEach((tag) => {
             tag.temporaryState = Object.assign(Object.assign({}, tag.temporaryState), { visible: true });
         });
         // 渲染
-        this.updateRenderAllTag();
+        this.updateRenderAllTags();
     }
     setUnfoldedByCamera() {
         let hasTagUnfolded = false; // 是否有标签由于camera的转动而展开

package/libs/PanoTagPlugin/mocks/mock1.d.ts

@@ -30,11 +30,15 @@ declare const _default: {
         position: number[];
         data: {
             text: string;
-            mediaData: {
+            mediaData: ({
                 url: string;
                 videoCoverUrl: string;
                 type: string;
-            }[];
+            } | {
+                url: string;
+                type: string;
+                videoCoverUrl?: undefined;
+            })[];
             title?: undefined;
             brandTags?: undefined;
             tags?: undefined;
@@ -52,11 +56,15 @@ declare const _default: {
         contentType: string;
         position: number[][];
         data: {
-            mediaData: {
+            mediaData: ({
                 url: string;
                 videoCoverUrl: string;
                 type: string;
-            }[];
+            } | {
+                url: string;
+                type: string;
+                videoCoverUrl?: undefined;
+            })[];
             text?: undefined;
             title?: undefined;
             brandTags?: undefined;

package/libs/PanoTagPlugin/mocks/mock1.js

@@ -15,7 +15,6 @@ const tagList = [
             text: '🙋‍♂️123标题标题🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️标题标🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️题标题标题标题标题标',
         },
         // element: (content: HTMLElement) => {
-        //   console.log(content)
         //   const a = document.createElement('p')
         //   a.style.width = '100px'
         //   a.style.height = '100px'
@@ -46,8 +45,11 @@ const tagList = [
                     type: 'Video',
                 },
                 {
-                    url: '//vrlab-static.ljcdn.com/release/web/jsl/test.65720b34.png',
-                    videoCoverUrl: '//vrlab-static.ljcdn.com/release/web/jsl/test.65720b34.png',
+                    url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
+                    type: 'Image',
+                },
+                {
+                    url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
                     type: 'Image',
                 },
             ],
@@ -66,8 +68,11 @@ const tagList = [
                     type: 'Video',
                 },
                 {
-                    url: '//vrlab-static.ljcdn.com/release/web/jsl/test.65720b34.png',
-                    videoCoverUrl: '//vrlab-static.ljcdn.com/release/web/jsl/test.65720b34.png',
+                    url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
+                    type: 'Image',
+                },
+                {
+                    url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
                     type: 'Image',
                 },
             ],

package/libs/PanoTagPlugin/mocks/mock3.d.ts

@@ -1,14 +1,22 @@
 declare const _default: {
     tagList: {
         id: number;
-        pointType: string;
         dimensionType: string;
+        pointType: string;
+        contentType: string;
         position: number[];
         data: {
             text: string;
+            mediaData: ({
+                url: string;
+                videoCoverUrl: string;
+                type: string;
+            } | {
+                url: string;
+                type: string;
+                videoCoverUrl?: undefined;
+            })[];
         };
-        normal: number[];
-        contentType: string;
     }[];
 };
 export default _default;

package/libs/PanoTagPlugin/mocks/mock3.js

@@ -1,31 +1,30 @@
 export default {
     tagList: [
-        {
-            id: 2,
-            pointType: 'PointTag',
-            dimensionType: '3D',
-            position: [-0.8998534645219779, -0.053330655526465105, 0.9791677844715473],
-            data: {
-                text: '我是一个3d文字标签',
-            },
-            // style: {
-            //   point: {
-            //     style: 'CustomIcon',
-            //     iconUrl: '//vrlab-static.ljcdn.com/release/web/carTagDotContent.08ace25e.png',
-            //   },
-            // },
-            normal: [0.6766569516112458, 0, -0.7362984244422746],
-            contentType: 'Text',
-        },
         {
             id: 1,
-            dimensionType: '3D',
+            dimensionType: '2D',
             pointType: 'PointTag',
-            contentType: 'Text',
-            normal: [-1.3472052051879881, -0.22353184120423517, -0.4423657342911711],
-            position: [2.4858952, 0.12852754341132364, -3.848354251670743],
+            contentType: 'ImageText',
+            position: [1.1163144338520299, -1.4289252462321484, -7.767970762686076],
+            // normal: [-1.3472052051879881, -0.22353184120423517, -0.4423657342911711],
+            // position: [2.4858952, 0.12852754341132364, -3.848354251670743],
             data: {
-                text: '112123',
+                text: '哈哈哈',
+                mediaData: [
+                    {
+                        url: '//vrlab-static.ljcdn.com/release/web/jsl/test.69dacffb.mp4',
+                        videoCoverUrl: '//vrlab-static.ljcdn.com/release/web/jsl/test.65720b34.png',
+                        type: 'Video',
+                    },
+                    {
+                        url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
+                        type: 'Image',
+                    },
+                    {
+                        url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
+                        type: 'Image',
+                    },
+                ],
             },
         },
     ],

package/libs/PanoTagPlugin/typings/controller.d.ts

@@ -12,6 +12,9 @@ export declare type Hooks = InstanceType<typeof PanoTagPluginController>['hooks'
 declare type NonNullable<T> = T extends null | undefined | void ? never : T;
 export interface State extends BasePlugin.State {
 }
+export interface AddTagConfig {
+    withAnimation?: boolean;
+}
 export interface TemporaryState {
     visible?: boolean;
 }

package/libs/PanoTagPlugin/typings/tag.d.ts

@@ -211,6 +211,16 @@ interface ContentTypeMap {
         adaptationMode?: 'stretch' | 'proportional';
         /** object-fit doc {@link https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit} */
         objectFit?: ObjectFit;
+        /**
+         * @description 是否开启自动轮播
+         * @param autoplay true: 开启自动轮播, false: 关闭自动播放
+         * @param autoplayVideo 自动轮播时，如果是视频， 则自动播放视频
+         * @default 默认值 { autoplay: true, autoplayVideo: false }
+         */
+        autoplayConfig?: {
+            autoplay: boolean;
+            autoplayVideo: boolean;
+        };
         mediaData: MediaData[];
         extraData?: Object;
     };

package/libs/PanoTagPlugin/utils/noTypecheck.d.ts

@@ -1 +1 @@
-export declare const noTypecheck: (x: any) => any;
+export declare const noTypecheck: <T = any>(x: T) => any;

package/package.json

@@ -8,7 +8,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.1.0-alpha.11",
+  "version": "2.1.0-alpha.13",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "yarn run tsb && yarn run build:rollup && yarn run build:components && yarn build:docs",
@@ -71,6 +71,7 @@
     "svelte": "^3.49.0",
     "classnames": "^2.3.1",
     "object-assign-deep": "0.4.0",
+    "swiper": "^8.4.3",
     "animejs": "^3.2.1"
   }
 }

package/libs/CSS3DRenderPlugin/Plugin.d.ts

@@ -1,49 +0,0 @@
-import type { FivePlugin } from '@realsee/five';
-import type { Vector3Position } from '../typings/math.type';
-import { Vector3 } from 'three';
-import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
-export declare type CSS3DRenderPluginParameterType = undefined;
-export interface CSS3DRenderPluginExportType {
-    /**
-     * @description: 根据传入的四个点位创建一个3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
-     * @param {Five} five
-     * @param {Vector3[] | Vector3Position[]} points: 矩形四个点坐标
-     * @param {number} config.ratio: 1px对应多少米，默认为 0.002，即1px对应2mm
-     * @param {number} config.dpr: dpr, 默认为1
-     * @param {HTMLElement} config.container: HTMLElement
-     * @param {number} config.autoRender: 默认为true，如果需要手动render则传false
-     * @param {'front' | 'behind'} config.mode: 两种模式
-     * @param {HTMLElement} config.behindFiveContainer: 如果config.mode为'behind'，需要传入容器，并确保此容器位five下方，且中间没有其他dom元素遮挡
-     * @return {{ container: HTMLElement; dispose: () => void }}: container: dom容器, dispose: 清理函数
-     */
-    create3DDomContainer: (points: Vector3[] | Vector3Position[], config?: {
-        ratio?: number;
-        dpr?: number;
-        autoRender?: boolean;
-        container?: HTMLElement;
-        [key: string]: any;
-    } & ({
-        mode?: 'front';
-    } | {
-        mode: 'behind';
-        behindFiveContainer: HTMLElement;
-    })) => {
-        container: HTMLElement;
-        dispose: () => void;
-        css3DObject: CSS3DObject;
-        render?: () => void;
-    } | void;
-    /**
-     * @description: 销毁所有的渲染内容
-     * @return {void}
-     */
-    disposeAll: () => void;
-}
-/**
- * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
- * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
- *
- * @returns
- */
-export declare const CSS3DRenderPlugin: FivePlugin<CSS3DRenderPluginParameterType, CSS3DRenderPluginExportType>;
-export default CSS3DRenderPlugin;

package/libs/CSS3DRenderPlugin/Plugin.js

@@ -1,182 +0,0 @@
-import * as THREE from 'three';
-import { Scene, Vector3 } from 'three';
-import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
-import evenNumber from '../shared-utils/math/evenNumber';
-import centerPoint from '../shared-utils/three/centerPoint';
-import transformPositionToVector3 from '../shared-utils/three/transformPositionToVector3';
-import createResizeObserver from './utils/createResizeObserver';
-/**
- * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
- * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
- *
- * @returns
- */
-export const CSS3DRenderPlugin = (five) => {
-    const state = { disposeCallbacks: [] };
-    const create3DDomContainer = (...params) => {
-        var _a, _b, _c;
-        const points = params[0].map((point) => (point instanceof 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 Scene(), css3DRenderer: new CSS3DRenderer() };
-        }
-        if (frontModeUnInited) {
-            state.frontMode = { scene: new Scene(), css3DRenderer: new 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 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 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);
-        let mesh;
-        if (mode === 'behind') {
-            const material = new THREE.MeshBasicMaterial({
-                opacity: 0,
-                transparent: false,
-                side: THREE.DoubleSide,
-            });
-            const geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
-            mesh = new THREE.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 = [];
-        },
-    };
-};
-export default CSS3DRenderPlugin;

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

@@ -1,7 +0,0 @@
-/**
- * @description: 究极简陋的 ResizeObserver polyfill
- */
-export default function createResizeObserver(func: () => any, element?: HTMLElement): {
-    observe: () => void;
-    unobserve: () => void;
-};

package/libs/CSS3DRenderPlugin/utils/createResizeObserver.js

@@ -1,18 +0,0 @@
-/**
- * @description: 究极简陋的 ResizeObserver polyfill
- */
-export default 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),
-        };
-    }
-}

package/libs/GuideLinePlugin/utils/getLineGeometry.d.ts

@@ -1,2 +0,0 @@
-import * as THREE from 'three';
-export default function getLineGeometry(positionList: THREE.Vector3[]): void | THREE.BufferGeometry;