@realsee/dnalogel 2.0.0-alpha.41 → 2.0.0-alpha.42

package/libs/floorplan/TopviewFloorplanPlugin/Controller.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import * as THREE from 'three';
 import equal from '../../shared-utils/equal';
 import Main from '../Components/Main';
@@ -297,22 +306,24 @@ export class Controller extends BasePlugin.Controller {
         five.once('dispose', this.dispose);
         this.addEventListener();
     }
-    async load(serverData, state, userAction = true) {
-        function isPluginServerData(serverData) {
-            return Object.prototype.hasOwnProperty.apply(serverData, ['version']);
-        }
-        const _data = serverData;
-        if (_data && !_data.version)
-            console.warn('传入 serverData.data 的方式后续可能不再支持，请把 serverData 整体传入 load 函数');
-        const copyData = JSON.parse(JSON.stringify(serverData));
-        const _serverData = isPluginServerData(copyData) ? copyData.data : copyData;
-        const prevData = this.data;
-        this.data = await formatData(_serverData);
-        this.hooks.emit('dataLoaded', this.data);
-        this.hooks.emit('dataChange', this.data, prevData);
-        if (state)
-            this.updateState(state, userAction);
-        this.render();
+    load(serverData, state, userAction = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            function isPluginServerData(serverData) {
+                return Object.prototype.hasOwnProperty.apply(serverData, ['version']);
+            }
+            const _data = serverData;
+            if (_data && !_data.version)
+                console.warn('传入 serverData.data 的方式后续可能不再支持，请把 serverData 整体传入 load 函数');
+            const copyData = JSON.parse(JSON.stringify(serverData));
+            const _serverData = isPluginServerData(copyData) ? copyData.data : copyData;
+            const prevData = this.data;
+            this.data = yield formatData(_serverData);
+            this.hooks.emit('dataLoaded', this.data);
+            this.hooks.emit('dataChange', this.data, prevData);
+            if (state)
+                this.updateState(state, userAction);
+            this.render();
+        });
     }
     /** 更新户型图位置 */
     updatePosition() {
@@ -337,21 +348,25 @@ export class Controller extends BasePlugin.Controller {
         this.render();
         return this;
     }
-    async show(options = {}) {
-        // 已经展示完成了，不做任何操作
-        if (this.state.visible)
-            return;
-        const userAction = options.userAction !== undefined ? options.userAction : true;
-        this.updateState({ visible: true }, userAction);
-        this._show({ userAction });
+    show(options = {}) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // 已经展示完成了，不做任何操作
+            if (this.state.visible)
+                return;
+            const userAction = options.userAction !== undefined ? options.userAction : true;
+            this.updateState({ visible: true }, userAction);
+            this._show({ userAction });
+        });
     }
-    async hide(options = {}) {
-        this.isHiddenByHideFunc = true;
-        if (!this.state.visible)
-            return;
-        const userAction = options.userAction !== undefined ? options.userAction : true;
-        this.updateState({ visible: false }, userAction);
-        this._hide({ userAction });
+    hide(options = {}) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isHiddenByHideFunc = true;
+            if (!this.state.visible)
+                return;
+            const userAction = options.userAction !== undefined ? options.userAction : true;
+            this.updateState({ visible: false }, userAction);
+            this._hide({ userAction });
+        });
     }
     enable(options = {}) {
         if (this.state.enabled)
@@ -381,36 +396,42 @@ export class Controller extends BasePlugin.Controller {
             state.visible ? this._show(options) : this._hide(options);
         }
     }
-    async formatData(serverData) {
-        return await formatData(serverData.data);
+    formatData(serverData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield formatData(serverData.data);
+        });
     }
-    async _show(options) {
-        if (!this.state.enabled)
-            return;
-        this.isHiddenByHideFunc = false;
-        const { userAction } = options;
-        this.hooks.emit('show', { userAction });
-        if (this.five.getCurrentState().mode !== 'Topview') {
-            await changeMode(this.five, ['Topview', undefined, undefined, userAction]);
-        }
-        this.five.model.show(this.floorIndex);
-        this.updatePosition();
-        this.updateSize();
-        const renderDuration = 500;
-        const modelOpacity = this.state.config.modelOpacity;
-        changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
-        this.hooks.emit('showAnimationEnded', { userAction });
-        this.render();
+    _show(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.state.enabled)
+                return;
+            this.isHiddenByHideFunc = false;
+            const { userAction } = options;
+            this.hooks.emit('show', { userAction });
+            if (this.five.getCurrentState().mode !== 'Topview') {
+                yield changeMode(this.five, ['Topview', undefined, undefined, userAction]);
+            }
+            this.five.model.show(this.floorIndex);
+            this.updatePosition();
+            this.updateSize();
+            const renderDuration = 500;
+            const modelOpacity = this.state.config.modelOpacity;
+            changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+            this.hooks.emit('showAnimationEnded', { userAction });
+            this.render();
+        });
     }
-    async _hide(options) {
-        if (!this.state.enabled)
-            return;
-        const { userAction } = options;
-        this.hooks.emit('hide', { userAction });
-        const modelOpacity = 1;
-        const renderDuration = 0;
-        changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
-        this.render();
+    _hide(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.state.enabled)
+                return;
+            const { userAction } = options;
+            this.hooks.emit('hide', { userAction });
+            const modelOpacity = 1;
+            const renderDuration = 0;
+            changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+            this.render();
+        });
     }
     _enable(options) {
         const { userAction } = options;

package/libs/floorplan/utils/correctFiveState.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import to from '../../shared-utils/to';
 import { FloorplanErrorType } from '../utils/constant';
 import nearlyEqual from '../../shared-utils/nearlyEqual';
@@ -22,25 +31,27 @@ export function checkShowState(five, showState) {
  * 2. 内置了相应的动画时间计算
  * 3. 纠正成功会返回 true，失败「可能会被用户行为中断」会返回 false
  */
-export default async function correctFiveState(five, showState, userAction = true) {
-    // 当前已满足状态，不需要变更
-    const result = checkShowState(five, showState);
-    if (result === true)
+export default function correctFiveState(five, showState, userAction = true) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // 当前已满足状态，不需要变更
+        const result = checkShowState(five, showState);
+        if (result === true)
+            return;
+        const currentFiveState = five.getCurrentState();
+        // 纠正 mode
+        if (currentFiveState.mode !== showState.mode) {
+            const [changeModeError] = yield to(changeMode(five, [showState.mode, showState, undefined, userAction]));
+            if (changeModeError)
+                throw new Error(FloorplanErrorType.ChangeModeError);
+            return;
+        }
+        // 纠正相机状态
+        // 根据 latitude、longitude、fov 计算动画时间，最多 1s
+        const { latitude, longitude, fov } = currentFiveState;
+        const time = Math.min(1000, Math.max(200, Math.abs(latitude - Math.PI / 2) * 1000, (longitude > Math.PI ? 2 * Math.PI - longitude : longitude) * 500, Math.abs(fov - showState.fov) * 10));
+        const [updateCameraError] = yield to(five.updateCamera(showState, time, userAction));
+        if (updateCameraError)
+            throw new Error(FloorplanErrorType.UpdateCameraError);
         return;
-    const currentFiveState = five.getCurrentState();
-    // 纠正 mode
-    if (currentFiveState.mode !== showState.mode) {
-        const [changeModeError] = await to(changeMode(five, [showState.mode, showState, undefined, userAction]));
-        if (changeModeError)
-            throw new Error(FloorplanErrorType.ChangeModeError);
-        return;
-    }
-    // 纠正相机状态
-    // 根据 latitude、longitude、fov 计算动画时间，最多 1s
-    const { latitude, longitude, fov } = currentFiveState;
-    const time = Math.min(1000, Math.max(200, Math.abs(latitude - Math.PI / 2) * 1000, (longitude > Math.PI ? 2 * Math.PI - longitude : longitude) * 500, Math.abs(fov - showState.fov) * 10));
-    const [updateCameraError] = await to(five.updateCamera(showState, time, userAction));
-    if (updateCameraError)
-        throw new Error(FloorplanErrorType.UpdateCameraError);
-    return;
+    });
 }

package/libs/floorplan/utils/formatData.js

@@ -1,21 +1,34 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { FLOORPLAN_EXTRA_OBJECT_IMAGE } from '../Assets/floorplanExtraObject';
 import { floorplanPosition2ImagePosition, getFloorIndexFromModelPosition, modelPosition2FloorplanPosition, } from './formatPosition';
-async function formatOutlines(outlines) {
-    const headers = new Headers({ 'Content-Type': 'text/plain' });
-    const getOutlineItem = async function (item) {
-        const outlineItem = {
-            index: item.index,
-            url: item.url,
-            svgUrl: item.svg_url,
+function formatOutlines(outlines) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const headers = new Headers({ 'Content-Type': 'text/plain' });
+        const getOutlineItem = function (item) {
+            return __awaiter(this, void 0, void 0, function* () {
+                const outlineItem = {
+                    index: item.index,
+                    url: item.url,
+                    svgUrl: item.svg_url,
+                };
+                if (item.svg_url) {
+                    const svgContent = yield fetch(item.svg_url, { headers }).then((res) => res.text());
+                    outlineItem.svgContent = svgContent;
+                }
+                return outlineItem;
+            });
         };
-        if (item.svg_url) {
-            const svgContent = await fetch(item.svg_url, { headers }).then((res) => res.text());
-            outlineItem.svgContent = svgContent;
-        }
-        return outlineItem;
-    };
-    const svgOutlineItems = await Promise.all(outlines.map(getOutlineItem));
-    return svgOutlineItems;
+        const svgOutlineItems = yield Promise.all(outlines.map(getOutlineItem));
+        return svgOutlineItems;
+    });
 }
 function formatRoom(data) {
     const floorplanRoomItem = {
@@ -61,19 +74,21 @@ function formatFloorplanEntrance(data) {
     };
     return floorplanEntrance;
 }
-export default async function formatData(data) {
-    const outlines = await formatOutlines(data.outlines);
-    const bounding = data.computed_data.bounding;
-    const floorDatas = data.computed_data.floor_datas.map(formatFloorData);
-    const entrance = data.computed_data.entrance ? formatFloorplanEntrance(data.computed_data.entrance) : null;
-    const floorplanData = {
-        outlines,
-        entrance,
-        bounding,
-        floorDatas,
-        observers: data.computed_data.observers.map(formateFloorplanObserver),
-    };
-    return floorplanData;
+export default function formatData(data) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const outlines = yield formatOutlines(data.outlines);
+        const bounding = data.computed_data.bounding;
+        const floorDatas = data.computed_data.floor_datas.map(formatFloorData);
+        const entrance = data.computed_data.entrance ? formatFloorplanEntrance(data.computed_data.entrance) : null;
+        const floorplanData = {
+            outlines,
+            entrance,
+            bounding,
+            floorDatas,
+            observers: data.computed_data.observers.map(formateFloorplanObserver),
+        };
+        return floorplanData;
+    });
 }
 export function formatExtraObjects(data, five, floorplanData) {
     const extraObjects = data.map((object) => {

package/libs/package.json

@@ -0,0 +1,68 @@
+{
+    "name": "@realsee/dnalogel",
+    "main": "dist/index.js",
+    "module": "dist/index.es.js",
+    "browser": "dist/index.umd.js",
+    "types": "dist/index.d.ts",
+    "author": "REALSEE-DEVELOPER",
+    "repository": "https://github.com/realsee-developer/dnalogel.git",
+    "description": "如视 VR 看房插件合集",
+    "private": false,
+    "version": "2.0.0-alpha.38",
+    "license": "SEE LICENSE IN TERMS.txt",
+    "scripts": {
+        "build": "yarn run tsb && yarn run build:rollup && yarn run build:components && yarn build:docs",
+        "build:dev": "yarn build:svelte && tsc --watch",
+        "build:rollup": " rollup --config rollup.config.js",
+        "build:components": "vite build",
+        "tsb": "tsc && yarn build:svelte && ./bin/svelte-compile.js",
+        "build:svelte": "svelte-strip strip src/ libs -m=false",
+        "build:docs": "typedoc --options ./typedoc.json",
+        "preview": "vite preview",
+        "check": "svelte-check --tsconfig ./tsconfig.json"
+    },
+    "files": [
+        "libs",
+        "dist",
+        "components",
+        "docs",
+        "TERMS.txt"
+    ],
+    "devDependencies": {
+        "@babel/core": "^7.17.5",
+        "@realsee/five": "5.0.0-alpha.138",
+        "@rollup/plugin-alias": "^3.1.9",
+        "@rollup/plugin-commonjs": "^21.1.0",
+        "@rollup/plugin-typescript": "^8.3.2",
+        "@sveltejs/vite-plugin-svelte": "^1.0.0-next.44",
+        "@tsconfig/svelte": "^2.0.1",
+        "@types/hammerjs": "2.0.41",
+        "@typescript-eslint/eslint-plugin": "^5.12.1",
+        "@typescript-eslint/parser": "^5.12.1",
+        "@vitejs/plugin-react-refresh": "^1.3.6",
+        "autoprefixer": "^10.4.2",
+        "classnames": "^2.3.1",
+        "eslint": "^8.9.0",
+        "eslint-config-alloy": "^4.5.1",
+        "glob": "^8.0.1",
+        "postcss": "^8.4.6",
+        "postcss-plugin-px2rem": "^0.8.1",
+        "replace": "^1.2.1",
+        "rollup-plugin-multi-input": "^1.3.1",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-svelte": "^7.1.0",
+        "svelte-check": "^2.2.7",
+        "svelte-preprocess": "^4.10.6",
+        "svelte-strip": "^1.0.1",
+        "three": "0.117.1",
+        "tslib": "^2.3.1",
+        "typedoc": "^0.22.11",
+        "typescript": "^4.5.5",
+        "vite": "^2.8.0"
+    },
+    "dependencies": {
+        "@tweenjs/tween.js": "^18.6.4",
+        "hammerjs": "^2.0.8",
+        "svelte": "^3.47.0"
+    }
+}

package/libs/shared-utils/five/changeMode.js

@@ -1,36 +1,47 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import nearlyEqual from '../nearlyEqual';
 /** 等待 five changeMode 结束
  * @description Promise 的状态只代表 mode 与预期是否一致，不保证参数的一致性
  */
-export default async function changeMode(five, changeModeParams) {
-    await new Promise((resolve, reject) => {
-        // 虽然 changeMode 是异步函数，但不代表异步流程结束代表切换 Mode 动画结束
-        five.changeMode(...changeModeParams).catch((error) => reject(error));
-        five.once('initAnimationEnded', () => {
-            const fiveCurrentState = five.getCurrentState();
-            const correctMode = changeModeParams[0];
-            if (fiveCurrentState.mode !== correctMode)
-                reject(new Error('mode 与预期不符'));
-            /** 检测当前的 current pose 和传入的 pose 是否一致 */
-            const checkPose = () => {
-                const correctPose = changeModeParams[1];
-                if (!correctPose)
-                    return true;
-                return Object.keys(correctPose).every((key) => {
-                    const fivePoseItem = fiveCurrentState[key];
-                    if (fivePoseItem === undefined)
+export default function changeMode(five, changeModeParams) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield new Promise((resolve, reject) => {
+            // 虽然 changeMode 是异步函数，但不代表异步流程结束代表切换 Mode 动画结束
+            five.changeMode(...changeModeParams).catch((error) => reject(error));
+            five.once('initAnimationEnded', () => {
+                const fiveCurrentState = five.getCurrentState();
+                const correctMode = changeModeParams[0];
+                if (fiveCurrentState.mode !== correctMode)
+                    reject(new Error('mode 与预期不符'));
+                /** 检测当前的 current pose 和传入的 pose 是否一致 */
+                const checkPose = () => {
+                    const correctPose = changeModeParams[1];
+                    if (!correctPose)
                         return true;
-                    const correctPoseItem = correctPose[key];
-                    if (typeof fivePoseItem === 'number' && typeof correctPoseItem === 'number') {
-                        return nearlyEqual(fivePoseItem, correctPoseItem, 2);
-                    }
-                    return fivePoseItem === correctPoseItem;
-                });
-            };
-            const checkPoseResult = checkPose();
-            if (!checkPoseResult)
-                reject(new Error('five pose 与预期不符'));
-            resolve();
+                    return Object.keys(correctPose).every((key) => {
+                        const fivePoseItem = fiveCurrentState[key];
+                        if (fivePoseItem === undefined)
+                            return true;
+                        const correctPoseItem = correctPose[key];
+                        if (typeof fivePoseItem === 'number' && typeof correctPoseItem === 'number') {
+                            return nearlyEqual(fivePoseItem, correctPoseItem, 2);
+                        }
+                        return fivePoseItem === correctPoseItem;
+                    });
+                };
+                const checkPoseResult = checkPose();
+                if (!checkPoseResult)
+                    reject(new Error('five pose 与预期不符'));
+                resolve();
+            });
         });
     });
 }

package/libs/shared-utils/three/loadFbxObj.js

@@ -1,13 +1,24 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
 const loader = new FBXLoader();
-export async function loadFbxObj(url) {
-    return new Promise((resolve, reject) => {
-        function onLoad(object) {
-            resolve(object);
-        }
-        function onError(error) {
-            reject(error);
-        }
-        loader.load(url, onLoad, undefined, onError);
+export function loadFbxObj(url) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => {
+            function onLoad(object) {
+                resolve(object);
+            }
+            function onError(error) {
+                reject(error);
+            }
+            loader.load(url, onLoad, undefined, onError);
+        });
     });
 }

package/libs/shared-utils/three/loadTexture.js

@@ -1,10 +1,21 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import * as THREE from 'three';
 const textureLoader = new THREE.TextureLoader();
-export async function loadTexture(url) {
-    return new Promise((resolve, reject) => {
-        textureLoader.load(url, resolve, undefined, reject);
-    }).then((texture) => {
-        texture.encoding = THREE.sRGBEncoding;
-        return texture;
+export function loadTexture(url) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => {
+            textureLoader.load(url, resolve, undefined, reject);
+        }).then((texture) => {
+            texture.encoding = THREE.sRGBEncoding;
+            return texture;
+        });
     });
 }

package/libs/shared-utils/to.js

@@ -1,18 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /**
  * 传入一个 Promise
  * 无异常，返回 [null, data]
  * 有异常，则返回 [Error, undefined]
  * 用于替代 try&catch 处理 await 异常的方案
  */
-export async function to(promise) {
-    try {
-        const data = await promise;
-        return [null, data];
-    }
-    catch (error) {
-        if (error instanceof Error)
-            return [error, null];
-        return [new Error(''), null];
-    }
+export function to(promise) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const data = yield promise;
+            return [null, data];
+        }
+        catch (error) {
+            if (error instanceof Error)
+                return [error, null];
+            return [new Error(''), null];
+        }
+    });
 }
 export default to;

package/libs/src/CSS3DRenderPlugin/Plugin.d.ts

@@ -0,0 +1,49 @@
+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;