@realsee/dnalogel 2.0.2-alpha → 2.2.0-alpha.1

package/libs/CSS3DRenderPlugin/Controller.js

@@ -0,0 +1,107 @@
+import { CSS3DRender, VERSION } from './CSS3DRender';
+import { random } from './utils';
+export const PLUGIN_NAME = `CSS3DRenderPlugin-${random()}@${VERSION}`;
+export default class Controller extends CSS3DRender {
+    constructor(five) {
+        super();
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @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.state.disposed)
+                    return;
+                // ==== 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,
+                    };
+                    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}: 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;
+    }
+}

package/libs/CSS3DRenderPlugin/index.d.ts

@@ -1,4 +1,5 @@
-import CSS3DRenderPlugin from './Plugin';
-export { CSS3DRenderPlugin };
+import type { FivePlugin } from '@realsee/five';
+import Controller from './Controller';
+export * from './typing';
+export declare const CSS3DRenderPlugin: FivePlugin<void, InstanceType<typeof Controller>>;
 export default CSS3DRenderPlugin;
-export type { CSS3DRenderPluginExportType } from './Plugin';

package/libs/CSS3DRenderPlugin/index.js

@@ -1,3 +1,4 @@
-import CSS3DRenderPlugin from './Plugin';
-export { CSS3DRenderPlugin };
+import Controller from './Controller';
+export * from './typing';
+export const CSS3DRenderPlugin = (five) => new Controller(five);
 export default CSS3DRenderPlugin;

package/libs/CSS3DRenderPlugin/typing.d.ts

@@ -0,0 +1,26 @@
+import type CSS3DRenderPlugin from '.';
+import type * as BasePlugin from '../base/BasePlugin';
+import type { CSS3DRender } from './CSS3DRender';
+export declare type CSS3DRenderPluginParameterType = undefined;
+export declare type CSS3DRenderPluginExportType = ReturnType<typeof CSS3DRenderPlugin>;
+export declare type CSS3DRenderExportType = InstanceType<typeof CSS3DRender>;
+export declare type Create3DDomContainerReturnType = ReturnType<CSS3DRenderPluginExportType['create3DDomContainer']>;
+export declare type Create3DElementReturnType = ReturnType<InstanceType<typeof CSS3DRender>['create3DElement']>;
+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;
+}

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

@@ -0,0 +1,16 @@
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { Vector3 } from 'three';
+export declare const MinRatio = 0.00216;
+export declare const DefaultRatio = 0.003;
+export declare class CSS3DObjectPlus<T extends HTMLElement> extends CSS3DObject {
+    version: string;
+    width: number;
+    height: number;
+    domWidthPx: number;
+    domHeightPx: number;
+    cornerPoints: [Vector3, Vector3, Vector3, Vector3];
+    ratio: number;
+    container: T;
+    centerPosition: Vector3;
+    constructor(container: T, cornerPoints: [Vector3, Vector3, Vector3, Vector3], ratio?: number, dpr?: number);
+}

package/libs/CSS3DRenderPlugin/utils/CSS3DObjectPlus.js

@@ -0,0 +1,135 @@
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import * as THREE from 'three';
+import { Vector3 } from 'three';
+import { evenNumber } from './evenNumber';
+import { centerPoint } from './centerPoint';
+const VERSION = '1.0.0';
+const NAME = `CSS3DObjectPlus@${VERSION}`;
+export const MinRatio = 0.00216;
+export const DefaultRatio = 0.003;
+export class CSS3DObjectPlus extends 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;
+        }
+        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;
+        }
+        super(css3DObjectElement);
+        Object.defineProperty(this, "version", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: VERSION
+        });
+        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 Vector3()
+                .subVectors(centerPosition.clone(), cornerPoints[0].clone())
+                .multiplyScalar(scale)
+                .add(cornerPoints[0]);
+        }
+        // end
+        container.classList.add(`${NAME}__container`);
+        // 旋转前
+        const startVector01 = new Vector3(1, 0, 0); // dom初始01点向量
+        const startVector12 = new Vector3(0, 1, 0); // dom初始12点向量
+        // 旋转后
+        const endVector01 = new Vector3().subVectors(cornerPoints[1], cornerPoints[0]); // 点0 -> 点1 的向量
+        const endVector12 = new Vector3().subVectors(cornerPoints[2], cornerPoints[1]); // 点1 -> 点2 的向量
+        // 使Vector01重合
+        const vector01Quaternion = new THREE.Quaternion().setFromUnitVectors(startVector01.normalize(), endVector01.normalize());
+        this.applyQuaternion(vector01Quaternion);
+        startVector12.applyQuaternion(vector01Quaternion);
+        // 使Vector12重合
+        const vector12Quaternion = new THREE.Quaternion().setFromUnitVectors(startVector12.normalize(), endVector12.normalize());
+        this.applyQuaternion(vector12Quaternion);
+        // set position
+        this.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+    }
+}

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);
+};

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

@@ -0,0 +1 @@
+export declare function random(): string;

package/libs/CSS3DRenderPlugin/utils/random.js

@@ -0,0 +1,3 @@
+export function random() {
+    return Math.random().toString(36).slice(-6);
+}

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

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

package/libs/GuideLinePlugin/utils/getLineGeometry.js

@@ -0,0 +1,64 @@
+import * as THREE from 'three';
+import getNormals from 'polyline-normals';
+// 定义常量
+const TRIANGLE_NUMBER_OF_RECTANGLE = 2; // 每个矩形有两个三角形
+const VERTEX_NUMBER_OF_TRIANGLE = 3; // 每个三角形有三个顶点
+const AXIS_NUMBER_OF_VERTEX = 3; // 每个顶点有三个轴坐标
+const UV_NUMBER_OF_VERTEX = 2; // 每个顶点有两个 UV 轴坐标
+export default function getLineGeometry(positionList) {
+    if (positionList.length < 2)
+        return console.warn('positionList length must be greater than 1');
+    const lineWidth = 0.6;
+    const halfLineWidth = lineWidth / 2;
+    const aspect = 0.67; // 纵横比 width / height
+    // 点位向量数组
+    const keyPoints = positionList;
+    // 点位组成的平滑曲线
+    const curve = new THREE.CatmullRomCurve3(keyPoints, false, 'catmullrom', 0.5);
+    // 求顶点和 UV
+    const divisions = Math.ceil(curve.getLength()); // 曲线切片数
+    const curvePoints = curve.getPoints(divisions);
+    const curvePointsLength = curvePoints.length;
+    const normals = getNormals(curvePoints.map((p) => [p.x, p.z])); // curvePoints：每个点切线的向量「二维」
+    const rectangleNumber = curvePoints.length - 1; // 曲线上 N 个点，构成了 N - 1 个矩形
+    const indexNumber = rectangleNumber * TRIANGLE_NUMBER_OF_RECTANGLE * VERTEX_NUMBER_OF_TRIANGLE;
+    const verticesNumber = 2 * curvePointsLength; // 顶点数量（包含公用）：每个曲线点对应两个顶点，N 个 点有 2N 个顶点
+    const positionNumber = verticesNumber * AXIS_NUMBER_OF_VERTEX; // 坐标点数量
+    const uvNumber = verticesNumber * UV_NUMBER_OF_VERTEX; // uv 数量
+    const index = new Uint32Array(indexNumber);
+    const positions = new Float32Array(positionNumber);
+    const uv = new Float32Array(uvNumber);
+    let totalLength = 0;
+    for (let i = 0; i < curvePoints.length; i++) {
+        const [nx, nz] = normals[i][0];
+        const curvePoint = curvePoints[i];
+        const { x: curvePointX, y: curvePointY, z: curvePointZ } = curvePoint;
+        // vertices[2i]
+        positions[i * 6 + 0] = curvePointX + nx * halfLineWidth;
+        positions[i * 6 + 1] = curvePointY + 0.05;
+        positions[i * 6 + 2] = curvePointZ + nz * halfLineWidth;
+        // vertices[2i + 1]
+        positions[i * 6 + 3] = curvePointX - nx * halfLineWidth;
+        positions[i * 6 + 4] = curvePointY + 0.05;
+        positions[i * 6 + 5] = curvePointZ - nz * halfLineWidth;
+        totalLength += i > 0 ? curvePoints[i - 1].clone().sub(curvePoints[i]).length() : 0;
+        const end = totalLength / lineWidth / aspect;
+        uv[i * 4 + 0] = 0;
+        uv[i * 4 + 1] = end;
+        uv[i * 4 + 2] = 1;
+        uv[i * 4 + 3] = end;
+        if (i === curvePoints.length - 1)
+            continue;
+        index[i * 6 + 0] = i * 2 + 0;
+        index[i * 6 + 1] = i * 2 + 2;
+        index[i * 6 + 2] = i * 2 + 1;
+        index[i * 6 + 3] = i * 2 + 2;
+        index[i * 6 + 4] = i * 2 + 3;
+        index[i * 6 + 5] = i * 2 + 1;
+    }
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    geometry.setAttribute('uv', new THREE.BufferAttribute(uv, 2));
+    geometry.setIndex(new THREE.BufferAttribute(index, 1));
+    return geometry;
+}

package/libs/Object3DHelperPlugin/Controller.d.ts

@@ -0,0 +1,26 @@
+import type { Five } from '@realsee/five';
+import type * as BasePlugin from '../base/BasePlugin';
+import type * as THREE from 'three';
+import { Object3DHelper } from '../shared-utils/Object3DHelper';
+import type { State, EventMap } from '../shared-utils/Object3DHelper/typings';
+export declare const VERSION = "v1.0.0";
+export declare const PLUGIN: string;
+export declare const pluginFlag: (name: string) => string;
+export declare class Object3DHelperController extends Object3DHelper implements BasePlugin.Controller<State, EventMap> {
+    version: string;
+    name: string;
+    five: Five;
+    constructor(five: Five);
+    /**
+     * @description 添加 helper
+     * @param { THREE.Object3D } object3D       要添加helper的物体
+     * @param { boolean } config.moveHelper     位移helper
+     * @param { boolean } config.rotateHelper   旋转helper
+     * @param { boolean } config.scaleHelper    缩放helper
+     */
+    addObject3DHelper(object3D: THREE.Object3D, config?: {
+        moveHelper?: boolean;
+        rotateHelper?: boolean;
+        scaleHelper?: boolean;
+    }): void;
+}

package/libs/Object3DHelperPlugin/Controller.js

@@ -0,0 +1,77 @@
+import { MoveHelper, RotateHelper, RectangleScaleHelper } from '../shared-utils/Object3DHelper/Helper';
+import { MoveController } from '../shared-utils/Object3DHelper/Controller/MoveController';
+import { FiveControllerWrapper } from './FiveControllerWrapper';
+import { Object3DHelper } from '../shared-utils/Object3DHelper';
+import { RotateController } from '../shared-utils/Object3DHelper/Controller/RotateController';
+import { CSS3DScaleController } from '../shared-utils/Object3DHelper/Controller/CSS3DScaleController';
+export const VERSION = 'v1.0.0';
+const PLUGIN_NAME = 'Object3DHelperPlugin';
+export const PLUGIN = `${PLUGIN_NAME}@${VERSION}`;
+export const pluginFlag = (name) => `${PLUGIN}--${name}`;
+export class Object3DHelperController extends Object3DHelper {
+    constructor(five) {
+        super();
+        Object.defineProperty(this, "version", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: VERSION
+        });
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: PLUGIN_NAME
+        });
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.five = five;
+        Object.assign(window, { [`__${PLUGIN_NAME.toUpperCase()}_DEBUG__`]: this });
+    }
+    /**
+     * @description 添加 helper
+     * @param { THREE.Object3D } object3D       要添加helper的物体
+     * @param { boolean } config.moveHelper     位移helper
+     * @param { boolean } config.rotateHelper   旋转helper
+     * @param { boolean } config.scaleHelper    缩放helper
+     */
+    addObject3DHelper(object3D, config = {}) {
+        var _a;
+        const container = (_a = this.five.getElement()) === null || _a === void 0 ? void 0 : _a.parentElement;
+        const camera = this.five.camera;
+        // 创建空的helperGroup
+        // merge config
+        const { moveHelper = true, rotateHelper = true, scaleHelper = true } = config;
+        // 筛选
+        if (moveHelper) {
+            const moveHelper = new MoveHelper(object3D);
+            const controllerWrapper = new FiveControllerWrapper(this.five, MoveController, object3D, moveHelper);
+            this.addControllers({ moveController: controllerWrapper.helperController });
+        }
+        if (rotateHelper) {
+            let angleTipsParams;
+            if (container && camera)
+                angleTipsParams = { container };
+            const rotateHelper = new RotateHelper(object3D, angleTipsParams);
+            const controllerWrapper = new FiveControllerWrapper(this.five, RotateController, object3D, rotateHelper);
+            this.addControllers({ rotateController: controllerWrapper.helperController });
+        }
+        if (scaleHelper) {
+            if (container) {
+                const scaleHelper = new RectangleScaleHelper(object3D, container, camera, this.five.scene);
+                const controllerWrapper = new FiveControllerWrapper(this.five, CSS3DScaleController, object3D, scaleHelper);
+                this.addControllers({ scaleController: controllerWrapper.helperController });
+            }
+        }
+        // if (mergeConfig.outlineHelper) {
+        //   const outlineHelper = new OutlineHelper(object3D)
+        //   helperGroup.add(outlineHelper)
+        //   this.totalController.addHelpers({ outlineHelper })
+        // }
+        // this.five.scene.add(helperGroup)
+    }
+}

package/libs/Object3DHelperPlugin/FiveControllerWrapper.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @description: 将手势操作绑定到controller上
+ */
+import type { Five } from '@realsee/five';
+import type { BaseController } from '../shared-utils/Object3DHelper/Base/BaseController';
+import type * as THREE from 'three';
+import type { BaseHelper } from '../shared-utils/Object3DHelper/Helper';
+declare class ControllerWrapper<Helper extends BaseHelper = BaseHelper, Controller extends BaseController = BaseController<Helper>> {
+    helperController?: Controller;
+    private five;
+    constructor(five: Five, HelperController: new (...params: ConstructorParameters<typeof BaseController<Helper>>) => Controller, object: THREE.Object3D, helperObjects: Helper);
+    private onFiveWantsTapGesture;
+    private onFiveWantsGesture;
+}
+declare const controllerWrapper: <Helper extends BaseHelper<THREE.Object3D> = BaseHelper<THREE.Object3D>, Controller extends BaseController<BaseHelper<THREE.Object3D>, THREE.Object3D> = BaseController<Helper, THREE.Object3D>>(five: Five, HelperController: new (camera: THREE.Camera, model: THREE.Object3D, originObject3D: THREE.Object3D, helperObject3D: Helper, container: HTMLElement, scene: THREE.Scene, needsRender?: () => void) => Controller, object: THREE.Object3D, helperObjects: Helper) => ControllerWrapper<Helper, Controller>;
+export { ControllerWrapper };
+export { controllerWrapper };
+export { ControllerWrapper as FiveControllerWrapper };
+export { controllerWrapper as fiveControllerWrapper };

package/libs/Object3DHelperPlugin/FiveControllerWrapper.js

@@ -0,0 +1,57 @@
+class ControllerWrapper {
+    constructor(five, HelperController, object, helperObjects) {
+        Object.defineProperty(this, "helperController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onFiveWantsTapGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (params) => {
+                if (!this.helperController)
+                    return;
+                const result = this.helperController.onWantsTapGesture(params);
+                this.five.needsRender = true;
+                return result;
+            }
+        });
+        Object.defineProperty(this, "onFiveWantsGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (...params) => {
+                if (!this.helperController)
+                    return;
+                const result = this.helperController.onWantsGesture(...params);
+                this.five.needsRender = true;
+                return result;
+            }
+        });
+        const { camera, model, scene } = five;
+        const container = five.getElement();
+        this.five = five;
+        if (!camera || !model || !container || !scene)
+            return;
+        const needsRender = () => {
+            five.needsRender = true;
+        };
+        // TODO: 是否要改为绑定
+        this.helperController = new HelperController(camera, model, object, helperObjects, container, scene, needsRender);
+        five.on('wantsTapGesture', this.onFiveWantsTapGesture);
+        five.on('wantsGesture', this.onFiveWantsGesture);
+    }
+}
+const controllerWrapper = (...params) => new ControllerWrapper(...params);
+export { ControllerWrapper };
+export { controllerWrapper };
+export { ControllerWrapper as FiveControllerWrapper };
+export { controllerWrapper as fiveControllerWrapper };

package/libs/Object3DHelperPlugin/index.d.ts

@@ -0,0 +1,6 @@
+export * from '../shared-utils/Object3DHelper/typings';
+export * from './Controller';
+import type { FivePlugin } from '@realsee/five';
+import { Object3DHelperController } from './Controller';
+export declare const Object3DHelperPlugin: FivePlugin<void, InstanceType<typeof Object3DHelperController>>;
+export default Object3DHelperPlugin;

package/libs/Object3DHelperPlugin/index.js

@@ -0,0 +1,5 @@
+export * from '../shared-utils/Object3DHelper/typings';
+export * from './Controller';
+import { Object3DHelperController } from './Controller';
+export const Object3DHelperPlugin = (five) => new Object3DHelperController(five);
+export default Object3DHelperPlugin;

package/libs/Object3DHelperPlugin/mocks/addObject3D.d.ts

@@ -0,0 +1,2 @@
+import type { Object3D, Scene } from 'three';
+export default function addObject3D(item: any, scene: Scene): Promise<Object3D>;