@realsee/dnalogel 2.1.0-alpha.2 → 2.1.0-alpha.21

package/dist/Object3DHelperPlugin/index.js

@@ -1,3161 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var THREE = require('three');
-var CSS3DRenderer = require('three/examples/jsm/renderers/CSS3DRenderer');
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-
-class BaseHelper extends THREE.Object3D {
-    constructor(originObject3D) {
-        super();
-        Object.defineProperty(this, "originObject3D", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.originObject3D = originObject3D;
-    }
-    get helperObject() {
-        return this;
-    }
-    updatePosition() {
-        this.position.copy(this.originObject3D.position);
-    }
-    setPosition(position) {
-        this.position.copy(position);
-    }
-    updateMatrix4(matrix, origin) {
-        this.applyMatrix4(matrix);
-    }
-    setHelperScaleMatrix4(matrix, params) {
-        this.scale.applyMatrix4(matrix);
-    }
-    updateQuaternion(quaternion, origin) {
-        this.applyQuaternion(quaternion);
-    }
-}
-class MoveHelperAbstract extends BaseHelper {
-}
-class RotateHelperAbstract extends BaseHelper {
-}
-class ScaleHelperAbstract extends BaseHelper {
-}
-class RectangleScaleHelperAbstract extends ScaleHelperAbstract {
-}
-
-function centerPoint(point1, point2) {
-    return new THREE.Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
-}
-
-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);
-}
-
-const positionToVector3 = ({ x, y, z }) => new THREE.Vector3(x, y, z);
-const arrayPositionToVector3 = ([x, y, z]) => new THREE.Vector3(x, y, z);
-const anyPositionToVector3 = (position) => {
-    if (position instanceof THREE.Vector3)
-        return position;
-    else if (Array.isArray(position))
-        return arrayPositionToVector3(position);
-    else
-        return positionToVector3(position);
-};
-
-class DirectionGroup extends THREE__namespace.Group {
-    constructor(direction) {
-        super();
-        Object.defineProperty(this, "direction", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.direction = direction || 'x';
-    }
-}
-class DirectionMesh extends THREE__namespace.Mesh {
-    constructor(geometry, material, direction) {
-        super(geometry, material);
-        Object.defineProperty(this, "direction", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.direction = direction || 'x';
-    }
-}
-
-/**
- * 计算 three 中的 mouse 的值
- * @param  mouseXY - 鼠标相对屏幕位置
- * @param  element - canvas元素（three的展示元素）
- * @param  scissor - 屏幕剪裁
- */
-function calculateThreeMouse(originMouse, element) {
-    const { offsetWidth: width, offsetHeight: height } = element;
-    const { top, left } = element.getBoundingClientRect();
-    return Object.assign(new THREE__namespace.Vector2(), {
-        x: ((originMouse.x - left) / width) * 2 - 1,
-        y: (-(originMouse.y - top) / height) * 2 + 1,
-    });
-}
-
-function getMouseRaycaster(camera, mouse, element) {
-    if (!mouse || !element || !camera)
-        return;
-    const threeMouse = calculateThreeMouse(mouse, element);
-    if (Math.abs(threeMouse.x) === 1 || Math.abs(threeMouse.y) === 1)
-        return;
-    const raycaster = new THREE__namespace.Raycaster();
-    raycaster.setFromCamera(threeMouse, camera);
-    return raycaster;
-}
-
-function vectorIsEqual(vector1, vector2) {
-    const accuracy = 0.00001;
-    if (Math.abs(vector1.x - vector2.x) > accuracy)
-        return false;
-    if (Math.abs(vector1.y - vector2.y) > accuracy)
-        return false;
-    if (Math.abs(vector1.z - vector2.z) > accuracy)
-        return false;
-    return true;
-}
-
-class ArrowGroup extends DirectionGroup {
-    constructor(param) {
-        var _a;
-        super(param.direction);
-        Object.defineProperty(this, "line", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "arrow", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "lineHeight", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0.4
-        });
-        Object.defineProperty(this, "arrowHeight", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0.1
-        });
-        this.name = 'ArrowGroup';
-        const color = new THREE__namespace.Color((_a = param.color) !== null && _a !== void 0 ? _a : 0xf7692b);
-        const material = new THREE__namespace.MeshBasicMaterial({ color, depthTest: false });
-        // arrow
-        const coneGeometry = new THREE__namespace.ConeGeometry(0.04, 0.1, 32);
-        const arrow = new DirectionMesh(coneGeometry, material.clone(), param.direction);
-        arrow.name = `arrow-${param.direction}`;
-        this.arrow = arrow;
-        // line
-        const radius = 0.004;
-        const cylinderGeometry = new THREE__namespace.CylinderGeometry(radius, radius, 0.4, 32);
-        const cylinder = new DirectionMesh(cylinderGeometry, material.clone(), param.direction);
-        cylinder.name = `line-${param.direction}`;
-        this.line = cylinder;
-        this.formatArrow();
-        this.formatLine();
-        this.add(this.arrow, this.line);
-    }
-    formatArrow() {
-        this.arrow.geometry.translate(0, this.lineHeight + this.arrowHeight / 2, 0);
-        if (this.direction === 'x') {
-            this.arrow.geometry.rotateX(Math.PI / 2);
-            this.arrow.geometry.rotateY(Math.PI / 2);
-        }
-        else if (this.direction === 'z') {
-            this.arrow.geometry.rotateX(Math.PI / 2);
-        }
-    }
-    formatLine() {
-        this.line.geometry.translate(0, this.lineHeight / 2, 0);
-        if (this.direction === 'x') {
-            this.line.geometry.rotateX(Math.PI / 2);
-            this.line.geometry.rotateY(Math.PI / 2);
-        }
-        else if (this.direction === 'z') {
-            this.line.geometry.rotateX(Math.PI / 2);
-        }
-    }
-}
-
-const AXES_COLOR = {
-    X: 0xee5252,
-    Y: 0x48b74f,
-    Z: 0x4082ff,
-};
-// const AXES_THREE_COLOR = {
-//   X: new THREE.Color(AXES_COLOR.X).convertSRGBToLinear(),
-//   Y: new THREE.Color(AXES_COLOR.Y).convertSRGBToLinear(),
-//   Z: new THREE.Color(AXES_COLOR.Z).convertSRGBToLinear(),
-// }
-class AXES_THREE_COLOR {
-    static get X() {
-        return new THREE__namespace.Color(AXES_COLOR.X).convertSRGBToLinear().clone();
-    }
-    static get Y() {
-        return new THREE__namespace.Color(AXES_COLOR.Y).convertSRGBToLinear().clone();
-    }
-    static get Z() {
-        return new THREE__namespace.Color(AXES_COLOR.Z).convertSRGBToLinear().clone();
-    }
-}
-
-class MoveHelper extends MoveHelperAbstract {
-    constructor(originObject3D) {
-        super(originObject3D);
-        Object.defineProperty(this, "xArrow", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new ArrowGroup({ direction: 'x', color: AXES_THREE_COLOR.X })
-        });
-        Object.defineProperty(this, "yArrow", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new ArrowGroup({ direction: 'y', color: AXES_THREE_COLOR.Y })
-        });
-        Object.defineProperty(this, "zArrow", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new ArrowGroup({ direction: 'z', color: AXES_THREE_COLOR.Z })
-        });
-        this.add(this.xArrow);
-        this.add(this.yArrow);
-        this.add(this.zArrow);
-    }
-    hide(...directions) {
-        if (directions.length === 0) {
-            this.xArrow.visible = false;
-            this.yArrow.visible = false;
-            this.zArrow.visible = false;
-        }
-        else {
-            directions.forEach((direction) => {
-                const arrow = [this.xArrow, this.yArrow, this.zArrow].find((arrow) => arrow.direction === direction);
-                arrow && (arrow.visible = false);
-            });
-        }
-    }
-    show(direction) {
-        if (!direction) {
-            this.xArrow.visible = true;
-            this.yArrow.visible = true;
-            this.zArrow.visible = true;
-        }
-        else {
-            const arrow = [this.xArrow, this.yArrow, this.zArrow].find((arrow) => arrow.direction === direction);
-            arrow && (arrow.visible = true);
-        }
-    }
-    dispose() {
-        this.remove(this.xArrow, this.yArrow, this.zArrow);
-    }
-}
-
-function createElement(style, tagName) {
-    return setStyle(document.createElement(tagName !== null && tagName !== void 0 ? tagName : 'div'), style);
-}
-function setStyle(element, style) {
-    if (!style)
-        return element;
-    for (const key in style) {
-        if (key && style[key])
-            element.style[key] = style[key];
-    }
-    return element;
-}
-
-function tipsDom(style) {
-    const element = createElement(Object.assign({ position: 'absolute', display: 'block', borderRadius: '4px', paddingTop: '1px', paddingBottom: '1px', paddingLeft: '4px', paddingRight: '4px', pointerEvents: 'none', userSelect: 'none', zIndex: '9999', backgroundColor: 'rgba(0,0,0,0.7)', fontSize: '12px', color: '#fff', letterSpacing: '0', lineHeight: '18px' }, style));
-    const show = () => {
-        if (element.style.display === 'block')
-            return;
-        if (!element.style.top)
-            return;
-        if (!element.style.left)
-            return;
-        element.style.display = 'block';
-    };
-    const hide = () => {
-        element.style.display = 'none';
-        element.style.top = '';
-        element.style.left = '';
-    };
-    const setLeftTop = (left, top) => {
-        element.style.left = left;
-        element.style.top = top;
-        show();
-    };
-    return { element, show, hide, setLeftTop };
-}
-
-class RotateHelper extends RotateHelperAbstract {
-    constructor(originObject3D, angleTipsParams) {
-        var _a;
-        super(originObject3D);
-        Object.defineProperty(this, "yzCircle", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Circle({ direction: 'x', color: AXES_THREE_COLOR.X })
-        });
-        Object.defineProperty(this, "xzCircle", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Circle({ direction: 'y', color: AXES_THREE_COLOR.Y })
-        });
-        Object.defineProperty(this, "xyCircle", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Circle({ direction: 'z', color: AXES_THREE_COLOR.Z })
-        });
-        Object.defineProperty(this, "xRingHelper", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new AxesDashedRing({ direction: 'x' })
-        });
-        Object.defineProperty(this, "yRingHelper", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new AxesDashedRing({ direction: 'y' })
-        });
-        Object.defineProperty(this, "zRingHelper", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new AxesDashedRing({ direction: 'z' })
-        });
-        Object.defineProperty(this, "xAngleHelper", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Sector({ direction: 'x', color: AXES_THREE_COLOR.X })
-        });
-        Object.defineProperty(this, "yAngleHelper", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Sector({ direction: 'y', color: AXES_THREE_COLOR.Y })
-        });
-        Object.defineProperty(this, "zAngleHelper", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Sector({ direction: 'z', color: AXES_THREE_COLOR.Z })
-        });
-        Object.defineProperty(this, "angleTips", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "container", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        if (angleTipsParams) {
-            this.container = angleTipsParams === null || angleTipsParams === void 0 ? void 0 : angleTipsParams.container;
-            this.angleTips = tipsDom({ display: 'none' });
-            (_a = this.container) === null || _a === void 0 ? void 0 : _a.appendChild(this.angleTips.element);
-        }
-        this.show();
-    }
-    updateAngleHelperQuaternion() {
-        this.xAngleHelper.quaternion.copy(this.yzCircle.quaternion);
-        this.yAngleHelper.quaternion.copy(this.xzCircle.quaternion);
-        this.zAngleHelper.quaternion.copy(this.xyCircle.quaternion);
-        this.xRingHelper.quaternion.copy(this.yzCircle.quaternion);
-        this.yRingHelper.quaternion.copy(this.xzCircle.quaternion);
-        this.zRingHelper.quaternion.copy(this.xyCircle.quaternion);
-    }
-    updateQuaternion(quaternion, origin) {
-        this.yzCircle.applyQuaternion(quaternion);
-        this.xzCircle.applyQuaternion(quaternion);
-        this.xyCircle.applyQuaternion(quaternion);
-        this.xAngleHelper.baseAxes.applyQuaternion(quaternion);
-        this.yAngleHelper.baseAxes.applyQuaternion(quaternion);
-        this.zAngleHelper.baseAxes.applyQuaternion(quaternion);
-    }
-    hide() {
-        this.remove(this.yzCircle, this.xzCircle, this.xyCircle, this.xRingHelper, this.yRingHelper, this.zRingHelper, this.xAngleHelper, this.yAngleHelper, this.zAngleHelper);
-    }
-    show(direction) {
-        var _a, _b;
-        if (direction) {
-            this.hide();
-            this.add(...this.filterRingHelper(direction));
-            this.add(...this.filterAngleHelper(direction));
-            (_a = this.angleTips) === null || _a === void 0 ? void 0 : _a.show();
-        }
-        else {
-            this.add(this.xyCircle, this.xzCircle, this.yzCircle);
-            this.remove(this.xRingHelper, this.yRingHelper, this.zRingHelper, this.xAngleHelper, this.yAngleHelper, this.zAngleHelper);
-            (_b = this.angleTips) === null || _b === void 0 ? void 0 : _b.hide();
-        }
-    }
-    dispose() {
-        var _a, _b;
-        this.remove(this.yzCircle, this.xzCircle, this.xyCircle, this.xRingHelper, this.yRingHelper, this.zRingHelper, this.xAngleHelper, this.yAngleHelper, this.zAngleHelper);
-        if ((_a = this.angleTips) === null || _a === void 0 ? void 0 : _a.element)
-            (_b = this.container) === null || _b === void 0 ? void 0 : _b.removeChild(this.angleTips.element);
-    }
-    filterRingHelper(direction) {
-        return [this.xRingHelper, this.yRingHelper, this.zRingHelper].filter((helper) => helper.direction === direction);
-    }
-    filterAngleHelper(direction) {
-        return [this.xAngleHelper, this.yAngleHelper, this.zAngleHelper].filter((helper) => helper.direction === direction);
-    }
-}
-class Circle extends THREE__namespace.Mesh {
-    constructor(options) {
-        var _a;
-        super();
-        Object.defineProperty(this, "direction", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "gapAngle", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0.02
-        });
-        Object.defineProperty(this, "geometry", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new THREE__namespace.RingGeometry(0.25, 0.3, 20, 8, this.gapAngle, Math.PI / 2 - this.gapAngle * 2)
-        });
-        this.material = new THREE__namespace.MeshBasicMaterial({
-            opacity: 0.6,
-            color: (_a = options.color) !== null && _a !== void 0 ? _a : 0xffffff,
-            depthTest: false,
-            transparent: true,
-            side: THREE__namespace.DoubleSide,
-        });
-        this.direction = options.direction;
-        this.geometry.name = `RotateHelperCircleGeometry-${this.direction}`;
-        // this.renderOrder = 20
-        if (this.direction === 'y') {
-            this.rotateX(Math.PI / 2);
-        }
-        else if (this.direction === 'x') {
-            this.rotateY(-Math.PI / 2);
-        }
-    }
-}
-class AxesDashedRing extends THREE__namespace.Group {
-    constructor(options) {
-        super();
-        Object.defineProperty(this, "direction", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.direction = options.direction;
-        const gapAngle = 0.015;
-        const meshes = new Array(8).fill(null).map((_, i) => {
-            const geometry = new THREE__namespace.RingGeometry(0.25, 0.3, 20, 8, (Math.PI / 4) * i + gapAngle, Math.PI / 4 - gapAngle * 2);
-            const material = new THREE__namespace.MeshBasicMaterial({
-                opacity: 1,
-                color: 0xffffff,
-                depthTest: false,
-                transparent: true,
-                side: THREE__namespace.DoubleSide,
-            });
-            const mesh = new THREE__namespace.Mesh(geometry, material);
-            mesh.name = `AxesDashedRing-${this.direction}-${i}`;
-            return mesh;
-        });
-        this.add(...meshes);
-        if (this.direction === 'y') {
-            this.rotateX(Math.PI / 2);
-        }
-        else if (this.direction === 'x') {
-            this.rotateY(-Math.PI / 2);
-        }
-    }
-}
-class Sector extends THREE__namespace.Mesh {
-    constructor(options) {
-        var _a;
-        super();
-        Object.defineProperty(this, "direction", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "baseAxes", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        switch (options.direction) {
-            case 'x':
-                this.baseAxes = new THREE__namespace.Vector3(0, 0, 1);
-                break;
-            case 'y':
-                this.baseAxes = new THREE__namespace.Vector3(1, 0, 0);
-                break;
-            case 'z':
-                this.baseAxes = new THREE__namespace.Vector3(1, 0, 0);
-                break;
-        }
-        const ratio = 0.3 + 0.0005; // 挡住白色圆环的锯齿
-        this.geometry = new THREE__namespace.CircleGeometry(ratio, 48, 0, 0.0001);
-        this.material = new THREE__namespace.MeshBasicMaterial({
-            opacity: 0.4,
-            color: (_a = options.color) !== null && _a !== void 0 ? _a : 0xffffff,
-            depthTest: false,
-            transparent: true,
-            side: THREE__namespace.DoubleSide,
-        });
-        this.direction = options.direction;
-        // this.renderOrder = 20
-        if (this.direction === 'y') {
-            this.rotateX(Math.PI / 2);
-        }
-        else if (this.direction === 'x') {
-            this.rotateY(-Math.PI / 2);
-        }
-    }
-}
-
-function createSymbol(description) {
-    // @ts-ignore
-    return typeof Symbol === 'undefined' ? `$Symbol<${description}>$` : Symbol(description);
-}
-const EVENT_SYMBOL = createSymbol('$$EVENT$$');
-function __generateEventIfNotExisted(instance) {
-    if (!instance[EVENT_SYMBOL]) {
-        instance[EVENT_SYMBOL] = {};
-    }
-    return instance[EVENT_SYMBOL];
-}
-function __removeEventIfNotExisted(instance) {
-    if (!instance[EVENT_SYMBOL]) {
-        delete instance[EVENT_SYMBOL];
-    }
-}
-/**
- * 监听者模式
- * @template T - 预设的监听回调类型
- * @example
- * ```
- * new Subscribe<{
- * "foo": [arg1: number, arg2: string],
- * "bar": [arg: boolean],
- * }>()
- * ```
- */
-class Subscribe {
-    /**
-     * 判断是否注册了事件
-     * @param name - 事件类型
-     */
-    hasListener(name) {
-        const events = __generateEventIfNotExisted(this);
-        return Boolean((events === null || events === void 0 ? void 0 : events[name]) && events[name].length > 0);
-    }
-    /**
-     * 注册事件
-     * @param name - 事件类型
-     * @param callback - 事件回调函数
-     * @param once - 是否只执行一次
-     * @returns 解除事件
-     * @template K - 预设的监听事件名称
-     * @template C - 回调函数函数上下文
-     */
-    on(name, callback, once) {
-        const events = __generateEventIfNotExisted(this);
-        if (!events[name])
-            events[name] = [];
-        events[name].push([callback, once || false]);
-        return () => this.off(name, callback);
-    }
-    /**
-     * 注册事件(是否只执行一次)
-     * @param name - 事件类型
-     * @param callback - 事件回调函数
-     * @returns 解除事件
-     * @template K - 预设的监听事件名称
-     * @template C - 回调函数函数上下文
-     */
-    once(name, callback) {
-        return this.on(name, callback, true);
-    }
-    /**
-     * 解除事件
-     *
-     * 如果 name 不传的话解除对应所有事件
-     * 如果 name, callback 不传的话解除所有name的所有事件
-     * @param name - 事件类型
-     * @param callback - 事件回调函数
-     * @template K - 预设的监听事件名称
-     */
-    off(name, callback) {
-        if (name === undefined) {
-            __removeEventIfNotExisted(this);
-            return;
-        }
-        const events = __generateEventIfNotExisted(this);
-        if (!events[name])
-            events[name] = [];
-        if (callback === undefined) {
-            events[name].length = 0;
-            return;
-        }
-        let index = 0;
-        for (; index < events[name].length; index++) {
-            if (events[name][index][0] === callback)
-                break;
-        }
-        if (index < events[name].length) {
-            events[name].splice(index, 1);
-        }
-    }
-    /**
-     * 触发事件
-     * @param name - 事件类型
-     * @param data - 触发事件的数据
-     * @returns canceled 是否被触发取消
-     * @template K - 预设的监听事件名称
-     */
-    emit(name, ...data) {
-        let canceled = false;
-        const events = __generateEventIfNotExisted(this);
-        const event = events[name] || [];
-        for (let one of event.slice()) {
-            const [callback, once = false] = one;
-            const result = callback(...data);
-            if (once)
-                this.off(name, callback);
-            if (result === false)
-                canceled = true;
-        }
-        return canceled;
-    }
-}
-
-const VERSION$3 = '1.0.0';
-const NAME$1 = `CSS3DObjectPlus@${VERSION$3}`;
-const MinRatio = 0.00216;
-const DefaultRatio = 0.003;
-class CSS3DObjectPlus extends CSS3DRenderer.CSS3DObject {
-    constructor(container, cornerPoints, ratio = DefaultRatio, dpr = 1) {
-        const realRatio = Math.max(MinRatio, ratio);
-        const planeWidth = cornerPoints[0].distanceTo(cornerPoints[1]);
-        const planeHeight = cornerPoints[1].distanceTo(cornerPoints[2]);
-        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
-        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
-        const centerPosition = centerPoint(cornerPoints[0], cornerPoints[2]);
-        let css3DObjectElement;
-        if (realRatio === ratio) {
-            container.style.width = `${domWidthPx}px`;
-            container.style.height = `${domHeightPx}px`;
-            css3DObjectElement = container;
-        }
-        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$3
-        });
-        Object.defineProperty(this, "width", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "height", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "domWidthPx", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "domHeightPx", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "cornerPoints", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "ratio", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "container", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "centerPosition", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.scale.set(realRatio, realRatio, realRatio);
-        // set public property
-        this.cornerPoints = cornerPoints;
-        this.ratio = ratio;
-        this.container = container;
-        if (realRatio === ratio) {
-            this.width = planeWidth;
-            this.height = planeHeight;
-            this.domWidthPx = domWidthPx;
-            this.domHeightPx = domHeightPx;
-            this.centerPosition = centerPosition;
-        }
-        else {
-            const scale = ratio / realRatio;
-            this.width = scale * planeWidth;
-            this.height = scale * planeHeight;
-            this.domWidthPx = scale * domWidthPx;
-            this.domHeightPx = scale * domHeightPx;
-            this.centerPosition = new THREE.Vector3()
-                .subVectors(centerPosition.clone(), cornerPoints[0].clone())
-                .multiplyScalar(scale)
-                .add(cornerPoints[0]);
-        }
-        // end
-        container.classList.add(`${NAME$1}__container`);
-        // 旋转前
-        const startVector01 = new THREE.Vector3(1, 0, 0); // dom初始01点向量
-        const startVector12 = new THREE.Vector3(0, 1, 0); // dom初始12点向量
-        // 旋转后
-        const endVector01 = new THREE.Vector3().subVectors(cornerPoints[1], cornerPoints[0]); // 点0 -> 点1 的向量
-        const endVector12 = new THREE.Vector3().subVectors(cornerPoints[2], cornerPoints[1]); // 点1 -> 点2 的向量
-        // 使Vector01重合
-        const vector01Quaternion = new THREE__namespace.Quaternion().setFromUnitVectors(startVector01.normalize(), endVector01.normalize());
-        this.applyQuaternion(vector01Quaternion);
-        startVector12.applyQuaternion(vector01Quaternion);
-        // 使Vector12重合
-        const vector12Quaternion = new THREE__namespace.Quaternion().setFromUnitVectors(startVector12.normalize(), endVector12.normalize());
-        this.applyQuaternion(vector12Quaternion);
-        // set position
-        this.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
-    }
-}
-
-const VERSION$2 = 'v1.1.0';
-const PLUGIN_NAME$1 = 'CSS3DRenderer';
-const PLUGIN$1 = `${PLUGIN_NAME$1}@${VERSION$2}`;
-const pluginFlag$1 = (name) => `${PLUGIN$1}--${name}`;
-const globalStore = {};
-class CSS3DRender {
-    constructor() {
-        Object.defineProperty(this, "hooks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Subscribe()
-        });
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                enabled: true,
-                visible: true,
-                disposed: false,
-            }
-        });
-        Object.defineProperty(this, "store", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                disposers: [],
-                frontModeCSS3DObjects: {},
-                behindModeCSS3DObjects: {},
-            }
-        });
-        /**
-         * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
-         * @param { Vector3Position[] } points 矩形四个点坐标
-         * @param config 均为可选值
-         * @config_document `config` 均为可选值
-         *  | key                   | type                       | defaultValue        | comment |
-         *  | -                     | -                          | -                   | -       |
-         *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
-         *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
-         *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
-         *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
-         *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
-         *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
-         *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
-         *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
-         *  | `scene`               | *`THREE.Scene`*            | `undefined`         | 如果 mode 为 `behind`，需要传入 |
-         *
-         * @return
-         * ```typescript
-         *    {
-         *      id: string,                             // id
-         *      container: HTMLDIVElement               // dom容器
-         *      dispose: () => void                     // 销毁
-         *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
-         *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
-         *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
-         *      show: () => void                        // 同 setVisible(true)
-         *      hide: () => void                        // 同 setVisible(false)
-         *      setEnabled: (enabled: boolean) => void   // 添加/移除 container, 同 setEnabledById(id, enabled)
-         *      enable: () => void                      // 同 setEnabled(true)
-         *      disable: () => void                     // 同 setEnabled(false)
-         *    } | void
-         * ```
-         */
-        Object.defineProperty(this, "create3DElement", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (camera, points, config) => {
-                if (this.state.disposed)
-                    return this.disposedErrorLog();
-                // ==== init ====
-                const mergeConfig = (() => {
-                    const defaultConfig = {
-                        ratio: 0.00216,
-                        devicePixelRatio: 1,
-                        mode: 'front',
-                        autoRender: true,
-                        container: document.createElement('div'),
-                        pointerEvents: 'none',
-                    };
-                    return Object.assign(defaultConfig, config);
-                })();
-                const vector3Points = points.map(anyPositionToVector3);
-                if ((vector3Points === null || vector3Points === void 0 ? void 0 : vector3Points.length) < 4)
-                    return console.error(`${PLUGIN$1}: requires 4 point but params may have fewer`);
-                const { ratio, devicePixelRatio: dpr, mode, autoRender, container, pointerEvents } = mergeConfig;
-                const disposers = [];
-                // ==== init END ====
-                // 获取css3DObject, 如果mode为behind的话，也一起获取mesh
-                const { css3DObject, opacityMesh } = this.createObject(vector3Points, {
-                    ratio,
-                    dpr,
-                    container,
-                    mode,
-                    pointerEvents,
-                });
-                container.id = `container--${css3DObject.uuid}`;
-                const frontModeAndFrontModeUnInited = mode === 'front' && !globalStore.frontModeStore;
-                const behindModeAndBehindModeUnInited = mode === 'behind' && !globalStore.behindModeStore;
-                if (behindModeAndBehindModeUnInited) {
-                    globalStore.behindModeStore = {
-                        scene: mergeConfig.scene,
-                        css3DScene: new THREE__namespace.Scene(),
-                        css3DRenderer: new CSS3DRenderer.CSS3DRenderer(),
-                    };
-                }
-                if (frontModeAndFrontModeUnInited) {
-                    globalStore.frontModeStore = { css3DScene: new THREE__namespace.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
-                }
-                const modeStore = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
-                const { css3DScene, css3DRenderer } = modeStore;
-                const render = (() => {
-                    const renderCSS3DObject = () => {
-                        if (mode === 'front') {
-                            this.store.frontModeCSS3DObjects[css3DObject.uuid] = {
-                                visible: true,
-                                enabled: true,
-                                css3DObject,
-                                mode: 'front',
-                            };
-                        }
-                        else {
-                            this.store.behindModeCSS3DObjects[css3DObject.uuid] = {
-                                visible: true,
-                                enabled: true,
-                                css3DObject,
-                                opacityMesh: opacityMesh,
-                                mode: 'behind',
-                                scene: mergeConfig.scene,
-                            };
-                        }
-                        css3DScene.add(css3DObject);
-                        if (mode === 'behind' && opacityMesh) {
-                            mergeConfig.scene.add(opacityMesh);
-                            disposers.push(() => opacityMesh && mergeConfig.scene.remove(opacityMesh));
-                        }
-                    };
-                    if (frontModeAndFrontModeUnInited || behindModeAndBehindModeUnInited) {
-                        css3DRenderer.domElement.style.position = 'absolute';
-                        css3DRenderer.domElement.style.top = '0';
-                        css3DRenderer.domElement.style.userSelect = 'none';
-                        css3DRenderer.domElement.style.pointerEvents = 'none';
-                        css3DRenderer.domElement.classList.add(pluginFlag$1(mode));
-                        const renderEveryFrame = () => {
-                            const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
-                            modeStore.requestAnimationFrameId = requestAnimationFrameId;
-                            css3DRenderer.render(css3DScene, camera);
-                        };
-                        return () => {
-                            renderCSS3DObject();
-                            renderEveryFrame();
-                        };
-                    }
-                    return () => renderCSS3DObject();
-                })();
-                const wrapper = mode === 'front' ? globalStore.frontModeContainer : globalStore.behindModeContainer;
-                if (wrapper) {
-                    this.appendToElement(wrapper, mode);
-                    const store = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
-                    if (store)
-                        store.appendedToPage = true;
-                }
-                const setVisible = (visible) => this.setVisibleById(css3DObject.uuid, visible);
-                const setEnabled = (enabled) => this.setEnabledById(css3DObject.uuid, enabled);
-                const show = () => setVisible(true);
-                const hide = () => setVisible(false);
-                const enable = () => setEnabled(true);
-                const disable = () => setEnabled(false);
-                const dispose = () => {
-                    delete this.store.frontModeCSS3DObjects[css3DObject.uuid];
-                    delete this.store.behindModeCSS3DObjects[css3DObject.uuid];
-                    disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
-                    css3DScene.remove(css3DObject);
-                    // 如果全没了，就清除父容器
-                    if (css3DScene.children.length === 0) {
-                        if (typeof modeStore.requestAnimationFrameId === 'number') {
-                            cancelAnimationFrame(modeStore.requestAnimationFrameId);
-                        }
-                        css3DRenderer.domElement.remove();
-                        if (mode === 'front')
-                            globalStore.frontModeStore = undefined;
-                        if (mode === 'behind')
-                            globalStore.behindModeStore = undefined;
-                    }
-                    return true;
-                };
-                this.store.disposers.push(dispose);
-                if (autoRender)
-                    render();
-                return {
-                    id: css3DObject.uuid,
-                    container,
-                    dispose,
-                    css3DObject,
-                    render: autoRender ? undefined : render,
-                    show,
-                    hide,
-                    setVisible,
-                    disable,
-                    enable,
-                    setEnabled,
-                    appendToElement: (container) => this.appendToElement(container, mode),
-                };
-            }
-        });
-        Object.defineProperty(this, "setVisibleById", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (id, visible) => {
-                var _a;
-                const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
-                if (!data)
-                    return;
-                data.css3DObject.visible = visible;
-                data.visible = visible;
-                if (data.mode === 'behind')
-                    data.opacityMesh.visible = visible;
-            }
-        });
-        Object.defineProperty(this, "setEnabledById", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (id, enabled) => {
-                var _a, _b, _c;
-                const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
-                if (!data)
-                    return;
-                const css3DScene = data.mode === 'front' ? (_b = globalStore.frontModeStore) === null || _b === void 0 ? void 0 : _b.css3DScene : (_c = globalStore.behindModeStore) === null || _c === void 0 ? void 0 : _c.css3DScene;
-                if (!css3DScene)
-                    return;
-                if (enabled) {
-                    css3DScene.add(data.css3DObject);
-                    if (data.mode === 'behind')
-                        data.scene.add(data.opacityMesh);
-                }
-                else {
-                    css3DScene.remove(data.css3DObject);
-                    if (data.mode === 'behind')
-                        data.scene.remove(data.opacityMesh);
-                }
-                data.enabled = enabled;
-            }
-        });
-        Object.defineProperty(this, "createObject", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (points, config) => {
-                const { ratio, dpr, container, mode, pointerEvents } = config;
-                const css3DObject = new CSS3DObjectPlus(container, points, ratio, dpr);
-                container.style.pointerEvents = pointerEvents;
-                container.classList.add(`${PLUGIN_NAME$1}__container`);
-                const { domWidthPx, domHeightPx } = css3DObject;
-                // 生成透明Mesh
-                const opacityMesh = (() => {
-                    if (mode === 'behind') {
-                        const material = new THREE__namespace.MeshBasicMaterial({
-                            opacity: 0,
-                            transparent: false,
-                            side: THREE__namespace.DoubleSide,
-                        });
-                        const geometry = new THREE__namespace.PlaneGeometry(domWidthPx, domHeightPx);
-                        const mesh = new THREE__namespace.Mesh(geometry, material);
-                        mesh.name = pluginFlag$1('mesh');
-                        mesh.position.copy(css3DObject.position);
-                        mesh.rotation.copy(css3DObject.rotation);
-                        mesh.scale.copy(css3DObject.scale);
-                        return mesh;
-                    }
-                })();
-                return { css3DObject, opacityMesh };
-            }
-        });
-        Object.defineProperty(this, "createResizeObserver", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (element, resizeHandler, fireImmediately = true) => {
-                if (!element || !ResizeObserver)
-                    return { observe: () => { }, unobserve: () => { } };
-                const resizeObserverHandler = () => {
-                    /**
-                     * 这里evenNumber策略是遇到奇数会加1，在某些浏览器中会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
-                     * 所以为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
-                     */
-                    const width = evenNumber(element.clientWidth, { smaller: true });
-                    const height = evenNumber(element.clientHeight, { smaller: true });
-                    resizeHandler(width, height);
-                };
-                const observer = new ResizeObserver(resizeObserverHandler);
-                if (fireImmediately)
-                    resizeObserverHandler();
-                return {
-                    observe: () => observer.observe(element),
-                    unobserve: () => observer.unobserve(element),
-                };
-            }
-        });
-        Object.defineProperty(this, "disposedErrorLog", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                console.error(`${PLUGIN$1} is disposed`);
-            }
-        });
-    }
-    getCurrentState() {
-        return this.state;
-    }
-    setState(state, options = { userAction: true }) {
-        if (this.state.disposed)
-            return this.disposedErrorLog();
-        const prevState = Object.assign({}, this.state);
-        this.state = Object.assign(this.state, state);
-        if (prevState.visible !== this.state.visible) {
-            state.visible ? this.handleShow() : this.handleHide();
-        }
-        if (prevState.enabled !== this.state.enabled) {
-            state.enabled ? this.handleEnable() : this.handleDisable();
-        }
-        this.hooks.emit('stateChange', { state: this.state, prevState, userAction: options.userAction });
-    }
-    dispose() {
-        this.store.disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
-        this.store.disposers = [];
-        this.hooks.emit('dispose');
-        this.state.disposed = true;
-    }
-    async show({ userAction } = { userAction: true }) {
-        if (this.state.disposed)
-            return this.disposedErrorLog();
-        this.setState({ visible: true }, { userAction });
-        this.hooks.emit('show', { userAction });
-    }
-    async hide({ userAction } = { userAction: true }) {
-        if (this.state.disposed)
-            return this.disposedErrorLog();
-        this.setState({ visible: false }, { userAction });
-        this.hooks.emit('hide', { userAction });
-    }
-    enable({ userAction } = { userAction: true }) {
-        if (this.state.disposed)
-            return this.disposedErrorLog();
-        this.setState({ enabled: true }, { userAction });
-        this.hooks.emit('enable', { userAction });
-    }
-    disable({ userAction } = { userAction: true }) {
-        if (this.state.disposed)
-            return this.disposedErrorLog();
-        this.setState({ enabled: false }, { userAction });
-        this.hooks.emit('disable', { userAction });
-    }
-    appendToElement(container, mode) {
-        if (!container)
-            throw new Error(`${PLUGIN$1} Cannot append to container: container is ${container}`);
-        const store = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
-        if (!store) {
-            if (mode === 'front')
-                globalStore.frontModeContainer = container;
-            if (mode === 'behind')
-                globalStore.behindModeContainer = container;
-            return;
-        }
-        if (store.appendedToPage)
-            return;
-        container.appendChild(store.css3DRenderer.domElement);
-        if (!globalStore.resizeObserver) {
-            const { observe, unobserve } = this.createResizeObserver(container, store.css3DRenderer.setSize, true);
-            globalStore.resizeObserver = { observe, unobserve };
-            observe();
-            this.store.disposers.push(unobserve);
-        }
-        store.appendedToPage = true;
-    }
-    async handleShow() {
-        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
-            value.css3DObject.visible = value.visible;
-        });
-        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
-            value.css3DObject.visible = value.visible;
-            value.opacityMesh.visible = value.visible;
-        });
-    }
-    async handleHide() {
-        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
-            value.css3DObject.visible = false;
-        });
-        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
-            value.css3DObject.visible = false;
-            value.opacityMesh.visible = false;
-        });
-    }
-    handleEnable() {
-        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
-            var _a;
-            if (!value.enabled)
-                return;
-            (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
-        });
-        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
-            var _a, _b;
-            if (!value.enabled)
-                return;
-            (_a = globalStore.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
-            (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.scene.add(value.opacityMesh);
-        });
-    }
-    handleDisable() {
-        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
-            var _a;
-            (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
-        });
-        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
-            var _a, _b;
-            (_a = globalStore.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
-            (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.scene.remove(value.opacityMesh);
-        });
-    }
-}
-
-function rectangleScaleDom() {
-    const container = createElement({
-        width: '100%',
-        height: '100%',
-        left: '0',
-        top: '0',
-        position: 'absolute',
-        pointerEvents: 'none',
-    });
-    const wrapper = createElement({
-        boxSizing: 'border-box',
-        width: '100%',
-        height: '100%',
-        left: '0',
-        top: '0',
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    });
-    const border = createElement({
-        boxSizing: 'border-box',
-        width: '100%',
-        height: '100%',
-        left: '0',
-        top: '0',
-        position: 'absolute',
-        border: '1px solid rgba(255,255,255,0.4)',
-    });
-    // DELETE
-    // const text = createElement({ fontSize: '50px' })
-    // text.innerText = '这是正面'
-    // wrapper.appendChild(text)
-    container.appendChild(wrapper);
-    wrapper.appendChild(border);
-    /**
-     *  6----5----4
-     *  |         |
-     *  7         3
-     *  |         |
-     *  0----1----2
-     */
-    const offset = '-4px';
-    const square0 = { direction: 'nesw', element: squareDom({ cursor: 'nesw-resize', left: offset, bottom: offset }) };
-    const square1 = { direction: 'ns', element: squareDom({ cursor: 'ns-resize', bottom: offset }) };
-    const square2 = { direction: 'nwse', element: squareDom({ cursor: 'nwse-resize', right: offset, bottom: offset }) };
-    const square3 = { direction: 'ew', element: squareDom({ cursor: 'ew-resize', right: offset }) };
-    const square4 = { direction: 'nesw', element: squareDom({ cursor: 'nesw-resize', right: offset, top: offset }) };
-    const square5 = { direction: 'ns', element: squareDom({ cursor: 'ns-resize', top: offset }) };
-    const square6 = { direction: 'nwse', element: squareDom({ cursor: 'nwse-resize', left: offset, top: offset }) };
-    const square7 = { direction: 'ew', element: squareDom({ cursor: 'ew-resize', left: offset }) };
-    // 0,2,4,6 四个角放后面，当点击区域可能出现互相遮挡的情况时，优先保障四个角的点
-    new Array(square1, square3, square5, square7, square0, square2, square4, square6).forEach((square) => wrapper.appendChild(square.element));
-    const squares = [
-        square0,
-        square1,
-        square2,
-        square3,
-        square4,
-        square5,
-        square6,
-        square7,
-    ];
-    return { container, squares };
-}
-function squareDom(style) {
-    const square = createElement(Object.assign({ background: '#FFFFFF', width: '9px', height: '9px', position: 'absolute', pointerEvents: 'none' }, style));
-    const squareDraggingWrapper = createElement({
-        width: '15px',
-        height: '15px',
-        position: 'absolute',
-        left: '50%',
-        top: '50%',
-        transform: 'translate(-50%, -50%)',
-        pointerEvents: 'none',
-    });
-    const squareDragging = createElement({
-        width: '15px',
-        height: '15px',
-        cursor: style === null || style === void 0 ? void 0 : style.cursor,
-        pointerEvents: 'auto',
-        // backgroundColor: 'red',
-        background: 'transparent',
-    });
-    squareDragging.draggable = true;
-    squareDraggingWrapper.appendChild(squareDragging);
-    square.appendChild(squareDraggingWrapper);
-    return square;
-}
-
-class RectangleScaleHelper extends RectangleScaleHelperAbstract {
-    constructor(originObject3D, container, camera, scene) {
-        super(originObject3D);
-        Object.defineProperty(this, "points", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "cornerPositions", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "css3DInstance", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "css3DRenderer", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new CSS3DRender()
-        });
-        Object.defineProperty(this, "plane", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "camera", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "scene", {
-            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, "enabled", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        this.camera = camera;
-        this.scene = scene;
-        this.container = container;
-        this.initRectangleScaleHelper();
-    }
-    get helperObject() {
-        var _a;
-        if (!((_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject))
-            throw new Error('css3DInstance is not initialized');
-        return this.css3DInstance.css3DObject;
-    }
-    updatePosition() {
-        var _a, _b;
-        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.position.copy(this.originObject3D.position);
-        (_b = this.plane) === null || _b === void 0 ? void 0 : _b.position.copy(this.originObject3D.position);
-    }
-    setPosition(position) {
-        var _a, _b;
-        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.position.copy(position);
-        (_b = this.plane) === null || _b === void 0 ? void 0 : _b.position.copy(position);
-    }
-    updateMatrix4(matrix) {
-        var _a, _b;
-        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.applyMatrix4(matrix);
-        (_b = this.plane) === null || _b === void 0 ? void 0 : _b.applyMatrix4(matrix);
-        this.cornerPositions.forEach((cornerPosition) => cornerPosition.applyMatrix4(matrix));
-    }
-    setHelperScaleMatrix4(matrix, params) {
-        var _a, _b;
-        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.scale.applyMatrix4(matrix);
-        (_b = this.plane) === null || _b === void 0 ? void 0 : _b.scale.applyMatrix4(matrix);
-        const { origin, helperOrigin } = params !== null && params !== void 0 ? params : {};
-        if (!helperOrigin)
-            return;
-        this.cornerPositions.forEach((position) => {
-            position.subVectors(position, helperOrigin).applyMatrix4(matrix).add(helperOrigin);
-        });
-        this.updatePoints();
-    }
-    updatePoints() {
-        const position8 = this.calculatePointPosition(this.cornerPositions);
-        this.points.forEach((point, index) => {
-            point.position.copy(position8[index]);
-        });
-    }
-    updateQuaternion(quaternion, origin) {
-        var _a;
-        const css3DObject = (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject;
-        if (css3DObject) {
-            const v = new THREE__namespace.Vector3().subVectors(css3DObject.position, origin).applyQuaternion(quaternion).add(origin);
-            css3DObject.position.copy(v);
-            css3DObject.applyQuaternion(quaternion);
-        }
-        if (this.plane) {
-            const v = new THREE__namespace.Vector3().subVectors(this.plane.position, origin).applyQuaternion(quaternion).add(origin);
-            this.plane.position.copy(v);
-            this.plane.applyQuaternion(quaternion);
-        }
-        this.cornerPositions.forEach((cornerPosition) => {
-            const v = new THREE__namespace.Vector3().subVectors(cornerPosition, origin).applyQuaternion(quaternion).add(origin);
-            cornerPosition.copy(v);
-        });
-    }
-    enable() {
-        var _a;
-        if (this.enabled)
-            return;
-        this.enabled = true;
-        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.enable();
-        if (this.plane)
-            this.scene.add(this.plane);
-    }
-    disable() {
-        var _a;
-        if (!this.enabled)
-            return;
-        this.enabled = false;
-        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.disable();
-        if (this.plane)
-            this.scene.remove(this.plane);
-    }
-    show() {
-        var _a;
-        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.show();
-        if (this.plane)
-            this.plane.visible = true;
-    }
-    hide() {
-        var _a;
-        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.hide();
-        if (this.plane)
-            this.plane.visible = false;
-    }
-    dispose() {
-        this.disable();
-        this.css3DRenderer.dispose();
-    }
-    initRectangleScaleHelper() {
-        var _a;
-        const cornerPositions = this.getCornerPositions();
-        if (!cornerPositions)
-            return;
-        this.cornerPositions = cornerPositions;
-        const css3DInstance = this.css3DRenderer.create3DElement(this.camera, cornerPositions, { ratio: 0.003 }); // ratio 暂时不用和 originObject3D 保持同步，因为本来就是不同的东西
-        if (!css3DInstance)
-            return;
-        this.css3DInstance = css3DInstance;
-        css3DInstance.appendToElement(this.container);
-        // create UI
-        const css3DObjectElement = css3DInstance.css3DObject.container;
-        const { container: dom, squares } = rectangleScaleDom();
-        this.points = squares.map((square, index) => ({
-            direction: square.direction,
-            point: square.element,
-            position: this.calculatePointPosition(cornerPositions)[index],
-        }));
-        // append html
-        // css3DObjectElement.appendChild(backgroundDom())
-        css3DObjectElement.insertBefore(dom, (_a = css3DObjectElement.children[0]) !== null && _a !== void 0 ? _a : null);
-        // ============================ 分割线 ============================
-        const geometry = new THREE__namespace.PlaneGeometry(css3DInstance.css3DObject.width, css3DInstance.css3DObject.height);
-        const material = new THREE__namespace.MeshBasicMaterial({
-            color: 0x000000,
-            opacity: 0.15,
-            transparent: true,
-            side: THREE__namespace.DoubleSide,
-        });
-        const plane = new THREE__namespace.Mesh(geometry, material);
-        this.scene.add(plane);
-        this.plane = plane;
-        this.updatePosition();
-    }
-    getCornerPositions() {
-        const { originObject3D } = this;
-        if (originObject3D instanceof CSS3DRenderer.CSS3DObject) {
-            if (originObject3D instanceof CSS3DObjectPlus) {
-                return originObject3D.cornerPoints;
-            }
-            else {
-                console.error('暂时只支持 CSS3DRenderPlugin 生成的物体');
-            }
-        }
-        else {
-            console.error('当前物体暂时不支持 ScaleHelper');
-        }
-    }
-    calculatePointPosition(cornerPositions) {
-        /**
-         *  6----5----4
-         *  |         |
-         *  7         3
-         *  |         |
-         *  0----1----2
-         */
-        return [
-            cornerPositions[0].clone(),
-            cornerPositions[0].clone().add(cornerPositions[1]).divideScalar(2),
-            cornerPositions[1].clone(),
-            cornerPositions[1].clone().add(cornerPositions[2]).divideScalar(2),
-            cornerPositions[2].clone(),
-            cornerPositions[2].clone().add(cornerPositions[3]).divideScalar(2),
-            cornerPositions[3].clone(),
-            cornerPositions[3].clone().add(cornerPositions[0]).divideScalar(2),
-        ];
-    }
-}
-
-new THREE__namespace.Vector3();
-
-// @ts-nocheck
-
-// /** @namespace */
-// var THREEx		= THREEx 		|| {};
-
-// # Constructor
-function DomEvents(camera, domElement)
-{
-	this._camera	= camera || null;
-	this._domElement= domElement || document;
-	this._raycaster = new THREE__namespace.Raycaster();
-	this._selected	= null;
-	this._boundObjs	= {};
-	// Bind dom event for mouse and touch
-	var _this	= this;
-
-	this._$onClick		= function(){ _this._onClick.apply(_this, arguments);		};
-	this._$onDblClick	= function(){ _this._onDblClick.apply(_this, arguments);	};
-	this._$onMouseMove	= function(){ _this._onMouseMove.apply(_this, arguments);	};
-	this._$onMouseDown	= function(){ _this._onMouseDown.apply(_this, arguments);	};
-	this._$onMouseUp	= function(){ _this._onMouseUp.apply(_this, arguments);		};
-	this._$onTouchMove	= function(){ _this._onTouchMove.apply(_this, arguments);	};
-	this._$onTouchStart	= function(){ _this._onTouchStart.apply(_this, arguments);	};
-	this._$onTouchEnd	= function(){ _this._onTouchEnd.apply(_this, arguments);	};
-	this._$onContextmenu	= function(){ _this._onContextmenu.apply(_this, arguments);	};
-	this._domElement.addEventListener( 'click'	, this._$onClick	, false );
-	this._domElement.addEventListener( 'dblclick'	, this._$onDblClick	, false );
-	this._domElement.addEventListener( 'mousemove'	, this._$onMouseMove	, false );
-	this._domElement.addEventListener( 'mousedown'	, this._$onMouseDown	, false );
-	this._domElement.addEventListener( 'mouseup'	, this._$onMouseUp	, false );
-	this._domElement.addEventListener( 'touchmove'	, this._$onTouchMove	, false );
-	this._domElement.addEventListener( 'touchstart'	, this._$onTouchStart	, false );
-	this._domElement.addEventListener( 'touchend'	, this._$onTouchEnd	, false );
-	this._domElement.addEventListener( 'contextmenu', this._$onContextmenu	, false );
-	
-}
-
-// # Destructor
-DomEvents.prototype.destroy	= function()
-{
-	// unBind dom event for mouse and touch
-	this._domElement.removeEventListener( 'click'		, this._$onClick	, false );
-	this._domElement.removeEventListener( 'dblclick'	, this._$onDblClick	, false );
-	this._domElement.removeEventListener( 'mousemove'	, this._$onMouseMove	, false );
-	this._domElement.removeEventListener( 'mousedown'	, this._$onMouseDown	, false );
-	this._domElement.removeEventListener( 'mouseup'		, this._$onMouseUp	, false );
-	this._domElement.removeEventListener( 'touchmove'	, this._$onTouchMove	, false );
-	this._domElement.removeEventListener( 'touchstart'	, this._$onTouchStart	, false );
-	this._domElement.removeEventListener( 'touchend'	, this._$onTouchEnd	, false );
-	this._domElement.removeEventListener( 'contextmenu'	, this._$onContextmenu	, false );
-};
-
-DomEvents.eventNames	= [
-	"click",
-	"dblclick",
-	"mouseover",
-	"mouseout",
-	"mousemove",
-	"mousedown",
-	"mouseup",
-	"contextmenu",
-	"touchstart",
-	"touchend"
-];
-
-DomEvents.prototype._getRelativeMouseXY	= function(domEvent){
-	var element = domEvent.target || domEvent.srcElement;
-	if (element.nodeType === 3) {
-		element = element.parentNode; // Safari fix -- see http://www.quirksmode.org/js/events_properties.html
-	}
-	
-	// get the real position of an element relative to the page starting point (0, 0)
-	// credits go to brainjam on answering http://stackoverflow.com/questions/5755312/getting-mouse-position-relative-to-content-area-of-an-element
-	var elPosition	= { x : 0 , y : 0};
-	var tmpElement	= element;
-	// store padding
-	var style	= getComputedStyle(tmpElement, null);
-	elPosition.y += parseInt(style.getPropertyValue("padding-top"), 10);
-	elPosition.x += parseInt(style.getPropertyValue("padding-left"), 10);
-	// add positions
-	do {
-		elPosition.x	+= tmpElement.offsetLeft;
-		elPosition.y	+= tmpElement.offsetTop;
-		style		= getComputedStyle(tmpElement, null);
-
-		elPosition.x	+= parseInt(style.getPropertyValue("border-left-width"), 10);
-		elPosition.y	+= parseInt(style.getPropertyValue("border-top-width"), 10);
-	} while(tmpElement = tmpElement.offsetParent);
-	
-	var elDimension	= {
-		width	: (element === window) ? window.innerWidth	: element.offsetWidth,
-		height	: (element === window) ? window.innerHeight	: element.offsetHeight
-	};
-	
-	return {
-		x : Number((domEvent.pageX - elPosition.x) / elDimension.width) * 2 - 1,
-		y : -((domEvent.pageY - elPosition.y) / elDimension.height) * 2 + 1
-	};
-};
-
-
-/********************************************************************************/
-/*		domevent context						*/
-/********************************************************************************/
-
-// handle domevent context in object3d instance
-
-DomEvents.prototype._objectCtxInit	= function(object3d){
-	object3d._3xDomEvent = {};
-};
-DomEvents.prototype._objectCtxDeinit	= function(object3d){
-	delete object3d._3xDomEvent;
-};
-DomEvents.prototype._objectCtxIsInit	= function(object3d){
-	return object3d._3xDomEvent ? true : false;
-};
-DomEvents.prototype._objectCtxGet		= function(object3d){
-	return object3d._3xDomEvent;
-};
-
-/********************************************************************************/
-/*										*/
-/********************************************************************************/
-
-/**
- * Getter/Setter for camera
-*/
-DomEvents.prototype.camera	= function(value)
-{
-	if( value )	this._camera	= value;
-	return this._camera;
-};
-
-DomEvents.prototype.bind	= function(object3d, eventName, callback, useCapture)
-{
-	console.assert( DomEvents.eventNames.indexOf(eventName) !== -1, "not available events:"+eventName );
-
-	if( !this._objectCtxIsInit(object3d) )	this._objectCtxInit(object3d);
-	var objectCtx	= this._objectCtxGet(object3d);	
-	if( !objectCtx[eventName+'Handlers'] )	objectCtx[eventName+'Handlers']	= [];
-
-	objectCtx[eventName+'Handlers'].push({
-		callback	: callback,
-		useCapture	: useCapture
-	});
-	
-	// add this object in this._boundObjs
-	if( this._boundObjs[eventName] === undefined ){
-		this._boundObjs[eventName]	= [];	
-	}
-	this._boundObjs[eventName].push(object3d);
-};
-DomEvents.prototype.addEventListener	= DomEvents.prototype.bind;
-
-DomEvents.prototype.unbind	= function(object3d, eventName, callback, useCapture)
-{
-	console.assert( DomEvents.eventNames.indexOf(eventName) !== -1, "not available events:"+eventName );
-
-	if( !this._objectCtxIsInit(object3d) )	this._objectCtxInit(object3d);
-
-	var objectCtx	= this._objectCtxGet(object3d);
-	if( !objectCtx[eventName+'Handlers'] )	objectCtx[eventName+'Handlers']	= [];
-
-	var handlers	= objectCtx[eventName+'Handlers'];
-	for(var i = 0; i < handlers.length; i++){
-		var handler	= handlers[i];
-		if( callback != handler.callback )	continue;
-		if( useCapture != handler.useCapture )	continue;
-		handlers.splice(i, 1);
-		break;
-	}
-	// from this object from this._boundObjs
-	var index	= this._boundObjs[eventName].indexOf(object3d);
-	console.assert( index !== -1 );
-	this._boundObjs[eventName].splice(index, 1);
-};
-DomEvents.prototype.removeEventListener	= DomEvents.prototype.unbind;
-
-DomEvents.prototype._bound	= function(eventName, object3d)
-{
-	var objectCtx	= this._objectCtxGet(object3d);
-	if( !objectCtx )	return false;
-	return objectCtx[eventName+'Handlers'] ? true : false;
-};
-
-/********************************************************************************/
-/*		onMove								*/
-/********************************************************************************/
-
-// # handle mousemove kind of events
-
-DomEvents.prototype._onMove	= function(eventName, mouseX, mouseY, origDomEvent)
-{
-// console.log('eventName', eventName, 'boundObjs', this._boundObjs[eventName])
-	// get objects bound to this event
-	var boundObjs	= this._boundObjs[eventName];
-	if( boundObjs === undefined || boundObjs.length === 0 )	return;
-	// compute the intersection
-	var vector = new THREE__namespace.Vector2();
-
-	// update the picking ray with the camera and mouse position
-	vector.set( mouseX, mouseY );
-	this._raycaster.setFromCamera( vector, this._camera );	
-
-	var intersects = this._raycaster.intersectObjects( boundObjs );
-
-	var oldSelected	= this._selected;
-	
-	if( intersects.length > 0 ){
-		var notifyOver; var notifyOut; var notifyMove;
-		var intersect	= intersects[ 0 ];
-		var newSelected	= intersect.object;
-		this._selected	= newSelected;
-		// if newSelected bound mousemove, notify it
-		notifyMove	= this._bound('mousemove', newSelected);
-
-		if( oldSelected != newSelected ){
-			// if newSelected bound mouseenter, notify it
-			notifyOver	= this._bound('mouseover', newSelected);
-			// if there is a oldSelect and oldSelected bound mouseleave, notify it
-			notifyOut	= oldSelected && this._bound('mouseout', oldSelected);
-		}
-	}else {
-		// if there is a oldSelect and oldSelected bound mouseleave, notify it
-		notifyOut	= oldSelected && this._bound('mouseout', oldSelected);
-		this._selected	= null;
-	}
-
-
-	// notify mouseMove - done at the end with a copy of the list to allow callback to remove handlers
-	notifyMove && this._notify('mousemove', newSelected, origDomEvent, intersect);
-	// notify mouseEnter - done at the end with a copy of the list to allow callback to remove handlers
-	notifyOver && this._notify('mouseover', newSelected, origDomEvent, intersect);
-	// notify mouseLeave - done at the end with a copy of the list to allow callback to remove handlers
-	notifyOut  && this._notify('mouseout' , oldSelected, origDomEvent, intersect);
-};
-
-/********************************************************************************/
-/*		onEvent								*/
-/********************************************************************************/
-
-// # handle click kind of events
-
-DomEvents.prototype._onEvent	= function(eventName, mouseX, mouseY, origDomEvent)
-{
-	// console.log('eventName', eventName, 'boundObjs', this._boundObjs[eventName])
-	// get objects bound to this event
-	var boundObjs	= this._boundObjs[eventName];
-	if( boundObjs === undefined || boundObjs.length === 0 )	return;
-	// compute the intersection
-	var vector = new THREE__namespace.Vector2();
-
-	// update the picking ray with the camera and mouse position
-	vector.set( mouseX, mouseY );
-	this._raycaster.setFromCamera( vector, this._camera );	
-
-	var intersects = this._raycaster.intersectObjects( boundObjs, true );
-	// if there are no intersections, return now
-	if( intersects.length === 0 )	return;
-	// init some variables
-	var intersect	= intersects[0];
-	var object3d	= intersect.object;
-	var objectCtx	= this._objectCtxGet(object3d);
-	var objectParent = object3d.parent;
-
-	while ( typeof(objectCtx) === 'undefined' && objectParent )
-	{
-	    objectCtx = this._objectCtxGet(objectParent);
-	    objectParent = objectParent.parent;
-	}
-	if( !objectCtx )	return;
-
-	// notify handlers
-	this._notify(eventName, object3d, origDomEvent, intersect);
-};
-
-DomEvents.prototype._notify	= function(eventName, object3d, origDomEvent, intersect)
-{
-	var objectCtx	= this._objectCtxGet(object3d);
-	var handlers	= objectCtx ? objectCtx[eventName+'Handlers'] : null;
-	
-	// parameter check
-	console.assert(arguments.length === 4);
-
-	// do bubbling
-	if( !objectCtx || !handlers || handlers.length === 0 ){
-		object3d.parent && this._notify(eventName, object3d.parent, origDomEvent, intersect);
-		return;
-	}
-	
-	// notify all handlers
-	var handlers	= objectCtx[eventName+'Handlers'];
-	for(var i = 0; i < handlers.length; i++){
-		var handler	= handlers[i];
-		var toPropagate	= true;
-		handler.callback({
-			type		: eventName,
-			target		: object3d,
-			origDomEvent	: origDomEvent,
-			intersect	: intersect,
-			stopPropagation	: function(){
-				toPropagate	= false;
-			}
-		});
-		if( !toPropagate )	continue;
-		// do bubbling
-		if( handler.useCapture === false ){
-			object3d.parent && this._notify(eventName, object3d.parent, origDomEvent, intersect);
-		}
-	}
-};
-
-/********************************************************************************/
-/*		handle mouse events						*/
-/********************************************************************************/
-// # handle mouse events
-
-DomEvents.prototype._onMouseDown	= function(event){ return this._onMouseEvent('mousedown', event);	};
-DomEvents.prototype._onMouseUp	= function(event){ return this._onMouseEvent('mouseup'	, event);	};
-
-
-DomEvents.prototype._onMouseEvent	= function(eventName, domEvent)
-{
-	var mouseCoords = this._getRelativeMouseXY(domEvent);
-	this._onEvent(eventName, mouseCoords.x, mouseCoords.y, domEvent);
-};
-
-DomEvents.prototype._onMouseMove	= function(domEvent)
-{
-	var mouseCoords = this._getRelativeMouseXY(domEvent);
-	this._onMove('mousemove', mouseCoords.x, mouseCoords.y, domEvent);
-	this._onMove('mouseover', mouseCoords.x, mouseCoords.y, domEvent);
-	this._onMove('mouseout' , mouseCoords.x, mouseCoords.y, domEvent);
-};
-
-DomEvents.prototype._onClick		= function(event)
-{
-	// TODO handle touch ?
-	this._onMouseEvent('click'	, event);
-};
-DomEvents.prototype._onDblClick		= function(event)
-{
-	// TODO handle touch ?
-	this._onMouseEvent('dblclick'	, event);
-};
-
-DomEvents.prototype._onContextmenu	= function(event)
-{
-	// TODO don't have a clue about how this should work with touch..
-	this._onMouseEvent('contextmenu'	, event);
-};
-
-/********************************************************************************/
-/*		handle touch events						*/
-/********************************************************************************/
-// # handle touch events
-
-
-DomEvents.prototype._onTouchStart	= function(event){ return this._onTouchEvent('touchstart', event);	};
-DomEvents.prototype._onTouchEnd	= function(event){ return this._onTouchEvent('touchend'	, event);	};
-
-DomEvents.prototype._onTouchMove	= function(domEvent)
-{
-	if( domEvent.touches.length != 1 )	return undefined;
-
-	domEvent.preventDefault();
-
-	var mouseX	= Number(domEvent.touches[ 0 ].pageX / window.innerWidth) * 2 - 1;
-	var mouseY	= -(domEvent.touches[ 0 ].pageY / window.innerHeight) * 2 + 1;
-	this._onMove('mousemove', mouseX, mouseY, domEvent);
-	this._onMove('mouseover', mouseX, mouseY, domEvent);
-	this._onMove('mouseout' , mouseX, mouseY, domEvent);
-};
-
-DomEvents.prototype._onTouchEvent	= function(eventName, domEvent)
-{
-	if( domEvent.touches.length != 1 )	return undefined;
-
-	domEvent.preventDefault();
-
-	var mouseX	= Number(domEvent.touches[ 0 ].pageX / window.innerWidth) * 2 - 1;
-	var mouseY	= -(domEvent.touches[ 0 ].pageY / window.innerHeight) * 2 + 1;
-	this._onEvent(eventName, mouseX, mouseY, domEvent);	
-};
-
-/**
- * 判断对象是否为`null`或`undefined`。
- * @param
- * @return
- */
-/**
- * 判断对象不为`null`或`undefined`。
- */
-function notNil(value) {
-    return value !== null && value !== undefined;
-}
-
-class BaseController {
-    constructor(camera, model, originObject3D, helperObject3D, container, scene, needsRender) {
-        Object.defineProperty(this, "hooks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Subscribe()
-        });
-        Object.defineProperty(this, "helperObject3D", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "originObject3D", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "camera", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "model", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "scene", {
-            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, "domEvents", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "isDragging", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "needsRender", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "enabled", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "onWantsTapGesture", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (raycaster) => {
-                const selectedObject = this.getIntersectObject(raycaster);
-                if (selectedObject)
-                    return false;
-                return;
-            }
-        });
-        this.camera = camera;
-        this.model = model;
-        this.originObject3D = originObject3D;
-        this.helperObject3D = helperObject3D;
-        this.container = container;
-        this.scene = scene;
-        this.domEvents = new DomEvents(camera, container);
-        this.needsRender = needsRender !== null && needsRender !== void 0 ? needsRender : (() => { });
-        this.updateHelperPosition();
-        this.enable();
-    }
-    enable() {
-        if (this.enabled)
-            return;
-        this.enabled = true;
-        this.scene.add(this.helperObject3D);
-        this.needsRender();
-    }
-    disable() {
-        if (!this.enabled)
-            return;
-        this.enabled = false;
-        this.scene.remove(this.helperObject3D);
-        this.needsRender();
-    }
-    show() {
-        this.helperObject3D.visible = true;
-        this.needsRender();
-    }
-    hide() {
-        this.helperObject3D.visible = false;
-        this.needsRender();
-    }
-    dispose() {
-        this.scene.remove(this.helperObject3D);
-        this.helperObject3D.dispose();
-    }
-    updateHelperPosition() {
-        this.helperObject3D.updatePosition();
-    }
-    setHelperPosition(position) {
-        this.helperObject3D.setPosition(position);
-    }
-    setHelperMatrix4(matrix4, origin) {
-        this.helperObject3D.updateMatrix4(matrix4, origin);
-    }
-    setHelperQuaternion(quaternion, origin) {
-        this.helperObject3D.updateQuaternion(quaternion, origin);
-    }
-    setHelperScaleMatrix4(matrix4, params) {
-        this.helperObject3D.setHelperScaleMatrix4(matrix4, params);
-    }
-    onWantsGesture(type, pointers, final) {
-        if (this.isDragging)
-            return false;
-    }
-    hoverListener(object3D, hoverColor = 0xffffff, hoverOpacity = 1) {
-        const objects = (Array.isArray(object3D) ? object3D : [object3D]).filter(notNil);
-        const disposers = [];
-        for (const object of objects) {
-            if (object instanceof THREE__namespace.Mesh || object instanceof THREE__namespace.Group) {
-                const meshes = object instanceof THREE__namespace.Group ? object.children.filter((child) => child instanceof THREE__namespace.Mesh) : [object];
-                meshes.forEach((mesh) => {
-                    mesh['__originalColor__'] = mesh.material.color.clone();
-                    mesh['__originalOpacity__'] = mesh.material.opacity;
-                });
-                const setHoverColor = () => {
-                    meshes.forEach((mesh) => {
-                        mesh.material.color.set(hoverColor);
-                        mesh.material.opacity = hoverOpacity;
-                    });
-                    this.needsRender();
-                };
-                const resetColor = () => {
-                    meshes.forEach((mesh) => {
-                        mesh.material.color.copy(mesh['__originalColor__']);
-                        mesh.material.opacity = mesh['__originalOpacity__'];
-                    });
-                    this.needsRender();
-                };
-                const handleMouseover = () => {
-                    if (this.isDragging)
-                        return;
-                    setHoverColor();
-                };
-                const handleMouseout = () => {
-                    if (this.isDragging)
-                        return;
-                    resetColor();
-                };
-                for (const mesh of meshes) {
-                    this.domEvents.addEventListener(mesh, 'mouseover', handleMouseover);
-                    this.domEvents.addEventListener(mesh, 'mouseout', handleMouseout);
-                    this.hooks.on('moveStart', setHoverColor);
-                    this.hooks.on('moveEnd', resetColor);
-                    this.hooks.on('rotateEnd', resetColor);
-                    disposers.push(() => {
-                        this.domEvents.removeEventListener(mesh, 'mouseover', handleMouseover);
-                        this.domEvents.removeEventListener(mesh, 'mouseout', handleMouseout);
-                        this.hooks.off('moveStart', setHoverColor);
-                        this.hooks.off('moveEnd', resetColor);
-                        this.hooks.off('rotateEnd', resetColor);
-                    });
-                }
-            }
-        }
-        return () => disposers.forEach((disposer) => disposer === null || disposer === void 0 ? void 0 : disposer());
-    }
-    getIntersectObject(raycaster) {
-        const cameraPosition = this.camera.position;
-        const object = this.helperObject3D;
-        // 如果当前没有模型，则不存在模型被点击
-        if (!object)
-            return undefined;
-        // 如果存在模型，需要判断模型与射线的交点和 model 与射线的交点的远近
-        let objectIntersection;
-        const intersection = raycaster.intersectObject(object, true)[0];
-        if (!intersection)
-            return undefined;
-        objectIntersection = intersection;
-        objectIntersection.object = object;
-        if (!objectIntersection)
-            return undefined;
-        // 如果 five model intersection 更近，返回 undefined
-        if (this.model['intersectRaycaster']) {
-            const modelIntersection = this.model.intersectRaycaster(raycaster)[0];
-            if (modelIntersection && modelIntersection.point.distanceTo(cameraPosition) < objectIntersection.point.distanceTo(cameraPosition))
-                return undefined;
-        }
-        return objectIntersection.object;
-    }
-}
-
-class MoveController extends BaseController {
-    constructor(...params) {
-        super(...params);
-        Object.defineProperty(this, "startInfo", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        // add hover listener
-        const helper = this.helperObject3D;
-        this.hoverListener([helper.xArrow, helper.yArrow, helper.zArrow]);
-        const dragStart = this.dragStart.bind(this);
-        const dragging = this.dragging.bind(this);
-        const dragEnd = this.dragEnd.bind(this);
-        this.domEvents.addEventListener(this.helperObject3D, 'mousedown', dragStart);
-        document.addEventListener('mousemove', dragging);
-        document.addEventListener('mouseup', dragEnd);
-    }
-    /**
-     * @description: 拖动开始，找出拖的Direction
-     */
-    dragStart(params) {
-        if (this.isDragging)
-            return;
-        const intersect = params === null || params === void 0 ? void 0 : params.intersect;
-        if (!intersect)
-            return this.dragEnd();
-        const draggingDirection = (intersect === null || intersect === void 0 ? void 0 : intersect.object).direction;
-        if (!draggingDirection)
-            return this.dragEnd();
-        const directionX = new THREE__namespace.Vector3(1, 0, 0).applyQuaternion(this.helperObject3D.quaternion);
-        const directionY = new THREE__namespace.Vector3(0, 1, 0).applyQuaternion(this.helperObject3D.quaternion);
-        const directionZ = new THREE__namespace.Vector3(0, 0, 1).applyQuaternion(this.helperObject3D.quaternion);
-        const directionVector = (() => {
-            switch (draggingDirection) {
-                case 'x':
-                    return directionX;
-                case 'y':
-                    return directionY;
-                case 'z':
-                    return directionZ;
-            }
-        })();
-        const planeNormal = (() => {
-            switch (draggingDirection) {
-                case 'x':
-                    return directionZ;
-                case 'y':
-                    return directionZ;
-                case 'z':
-                    return directionX;
-            }
-        })();
-        const startIntersect = intersect.point.clone();
-        const plane = new THREE__namespace.Plane();
-        plane.setFromNormalAndCoplanarPoint(planeNormal, startIntersect);
-        this.startInfo = { startVectorProject: startIntersect.clone().projectOnVector(directionVector), directionVector, plane };
-        // 隐藏其他箭头
-        this.helperObject3D.hide(...['x', 'y', 'z'].filter((direction) => direction !== draggingDirection));
-        this.hooks.emit('moveStart');
-        this.isDragging = true;
-        console.log('%c MoveController dragStart', 'color: #e5af2e');
-    }
-    dragging(point) {
-        if (!this.isDragging)
-            return;
-        if (!this.startInfo)
-            return;
-        const ray = getMouseRaycaster(this.camera, point, this.container);
-        if (!ray)
-            return this.dragEnd();
-        console.log(`%c RotateController dragging`, 'color: #49de1b');
-        this.move(ray);
-        return false;
-    }
-    move(raycaster) {
-        if (!this.startInfo)
-            return this.dragEnd();
-        const { plane, directionVector, startVectorProject } = this.startInfo;
-        const object = this.originObject3D;
-        const planeIntersection = raycaster.ray.intersectPlane(plane, new THREE__namespace.Vector3());
-        if (!planeIntersection)
-            return;
-        const currentVectorProject = planeIntersection.clone().projectOnVector(directionVector);
-        const offsetVector = currentVectorProject.clone().sub(startVectorProject);
-        // 移动transform
-        const transform = new THREE__namespace.Matrix4();
-        transform.setPosition(offsetVector);
-        object.applyMatrix4(transform);
-        this.helperObject3D.applyMatrix4(transform);
-        startVectorProject.copy(currentVectorProject);
-        this.hooks.emit('positionUpdate', { matrix4: transform });
-    }
-    dragEnd() {
-        if (!this.isDragging)
-            return;
-        console.log('%c MoveController dragEnd', 'color: #e94e4e');
-        // 拖动结束，重置currentDraggingDirection
-        this.startInfo = undefined;
-        this.isDragging = false;
-        // 显示所有箭头
-        this.helperObject3D.show();
-        this.hooks.emit('moveEnd');
-        return;
-    }
-}
-
-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 VERSION$1 = 'v1.0.0';
-const NAME = 'Object3DHelper';
-const NAMEVERSION = `${NAME}@${VERSION$1}`;
-const disposedErrorLog = () => {
-    console.error(`${NAMEVERSION} is disposed`);
-};
-const disableWarnLog = () => {
-    console.warn(`${NAMEVERSION} is disabled`);
-};
-const disableErrorLog = () => {
-    console.error(`${NAMEVERSION} is disabled`);
-};
-class Object3DHelper {
-    constructor(controllers, helpers) {
-        Object.defineProperty(this, "controllers", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                visible: true,
-                enabled: true,
-                disposed: false,
-            }
-        });
-        Object.defineProperty(this, "hooks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Subscribe()
-        });
-        Object.defineProperty(this, "helpers", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "eventListener", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {}
-        });
-        Object.defineProperty(this, "handlePositionUpdate", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (controller, ...positionParams) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
-                const [position] = positionParams;
-                const matrix4 = position === null || position === void 0 ? void 0 : position.matrix4;
-                if (matrix4) {
-                    if (controller !== this.controllers.moveController)
-                        (_a = this.controllers.moveController) === null || _a === void 0 ? void 0 : _a.setHelperMatrix4(matrix4);
-                    if (controller !== this.controllers.rotateController)
-                        (_b = this.controllers.rotateController) === null || _b === void 0 ? void 0 : _b.setHelperMatrix4(matrix4);
-                    (_c = this.controllers.scaleController) === null || _c === void 0 ? void 0 : _c.setHelperMatrix4(matrix4);
-                    (_d = this.helpers.outlineHelper) === null || _d === void 0 ? void 0 : _d.applyMatrix4(matrix4);
-                }
-                if (position === null || position === void 0 ? void 0 : position.position) {
-                    if (controller !== this.controllers.moveController)
-                        (_e = this.controllers.moveController) === null || _e === void 0 ? void 0 : _e.setHelperPosition(position.position);
-                    if (controller !== this.controllers.rotateController)
-                        (_f = this.controllers.rotateController) === null || _f === void 0 ? void 0 : _f.setHelperPosition(position.position);
-                    (_g = this.controllers.scaleController) === null || _g === void 0 ? void 0 : _g.setHelperPosition(position.position);
-                    (_h = this.helpers.outlineHelper) === null || _h === void 0 ? void 0 : _h.position.copy(position.position);
-                }
-            }
-        });
-        Object.defineProperty(this, "handleScaleUpdate", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (controller, ...positionParams) => {
-                var _a, _b;
-                const [params] = positionParams;
-                const matrix4 = params === null || params === void 0 ? void 0 : params.matrix4;
-                if (matrix4) {
-                    (_a = this.controllers.scaleController) === null || _a === void 0 ? void 0 : _a.setHelperScaleMatrix4(matrix4, params);
-                    (_b = this.helpers.outlineHelper) === null || _b === void 0 ? void 0 : _b.scale.applyMatrix4(matrix4);
-                }
-            }
-        });
-        Object.defineProperty(this, "handleRotateUpdate", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (controller, ...rotateParams) => {
-                var _a, _b, _c, _d;
-                const [rotate] = rotateParams;
-                if (rotate) {
-                    const { quaternion, origin } = rotate;
-                    if (quaternion) {
-                        if (controller !== this.controllers.moveController)
-                            (_a = this.controllers.moveController) === null || _a === void 0 ? void 0 : _a.setHelperQuaternion(quaternion, origin);
-                        if (controller !== this.controllers.rotateController)
-                            (_b = this.controllers.rotateController) === null || _b === void 0 ? void 0 : _b.setHelperQuaternion(quaternion, origin);
-                        if (controller !== this.controllers.scaleController)
-                            (_c = this.controllers.scaleController) === null || _c === void 0 ? void 0 : _c.setHelperQuaternion(quaternion, origin);
-                        (_d = this.helpers.outlineHelper) === null || _d === void 0 ? void 0 : _d.applyQuaternion(quaternion);
-                    }
-                }
-            }
-        });
-        this.controllers = controllers !== null && controllers !== void 0 ? controllers : {};
-        this.helpers = helpers !== null && helpers !== void 0 ? helpers : {};
-    }
-    /**
-     * @description Show guide line
-     */
-    async show(options) {
-        this.setState({ visible: true }, options);
-    }
-    /**
-     * @description Hide guide line
-     */
-    async hide(options) {
-        this.setState({ visible: false }, options);
-    }
-    /**
-     * @description Enable
-     */
-    enable(options) {
-        this.setState({ enabled: true }, options);
-    }
-    /**
-     * @description Disable
-     */
-    disable(options) {
-        this.setState({ enabled: false }, options);
-    }
-    /**
-     * @description Dispose
-     */
-    dispose() {
-        this.setState({ disposed: true });
-    }
-    setState(state, options) {
-        if (this.state.disposed)
-            return disposedErrorLog();
-        if (!this.state.enabled) {
-            // when plugin is disabled, only can change enabled or disposed to true
-            if (state.enabled !== true && state.disposed !== true)
-                return disableErrorLog();
-        }
-        const prevState = Object.assign({}, this.state);
-        this.state = Object.assign(Object.assign({}, this.state), state);
-        if (state.disposed !== undefined && state.disposed !== prevState.disposed) {
-            if (state.disposed)
-                this.handleDispose();
-        }
-        if (state.visible !== undefined && state.visible !== prevState.visible) {
-            this.handleVisible(state.visible);
-        }
-        if (state.enabled !== undefined && state.enabled !== prevState.enabled) {
-            this.handleEnable(state.enabled);
-        }
-        this.hooks.emit('stateChange', { state: this.state, prevState });
-    }
-    addControllers(controllers) {
-        this.controllers = Object.assign(Object.assign({}, this.controllers), controllers);
-        this.addEventListener();
-    }
-    addHelpers(helpers) {
-        this.helpers = Object.assign(Object.assign({}, this.helpers), helpers);
-    }
-    getCurrentState() {
-        return this.state;
-    }
-    addEventListener() {
-        for (const k in this.controllers) {
-            if (!k)
-                continue;
-            const key = k;
-            if (this.eventListener[key])
-                continue;
-            this.eventListener[key] = (() => {
-                const controller = this.controllers[key];
-                if (!controller)
-                    return;
-                const handleStart = () => this.handleStart(controller);
-                const handleEnd = () => this.handleEnd(controller);
-                const handlePositionUpdate = (...params) => this.handlePositionUpdate(controller, ...params);
-                const handleRotateUpdate = (...params) => this.handleRotateUpdate(controller, ...params);
-                const handleScaleUpdate = (...params) => this.handleScaleUpdate(controller, ...params);
-                controller.hooks.on('moveStart', handleStart);
-                controller.hooks.on('rotateStart', handleStart);
-                controller.hooks.on('scaleStart', handleStart);
-                controller.hooks.on('positionUpdate', handlePositionUpdate);
-                controller.hooks.on('rotateUpdate', handleRotateUpdate);
-                controller.hooks.on('scaleUpdate', handleScaleUpdate);
-                controller.hooks.on('moveEnd', handleEnd);
-                controller.hooks.on('rotateEnd', handleEnd);
-                controller.hooks.on('scaleEnd', handleEnd);
-                return () => {
-                    controller.hooks.off('moveStart', handleStart);
-                    controller.hooks.off('rotateStart', handleStart);
-                    controller.hooks.off('scaleStart', handleStart);
-                    controller.hooks.off('positionUpdate', handlePositionUpdate);
-                    controller.hooks.off('rotateUpdate', handleRotateUpdate);
-                    controller.hooks.off('scaleUpdate', handleScaleUpdate);
-                    controller.hooks.off('moveEnd', handleEnd);
-                    controller.hooks.off('rotateEnd', handleEnd);
-                    controller.hooks.off('scaleEnd', handleEnd);
-                };
-            })();
-        }
-    }
-    handleEnd(controller) {
-        if (controller)
-            this.setOtherHelpersVisible(true, controller);
-    }
-    handleStart(controller) {
-        if (controller)
-            this.setOtherHelpersVisible(false, controller);
-    }
-    setOtherHelpersVisible(visible, currentController) {
-        var _a, _b, _c, _d;
-        if (!visible) {
-            if (currentController !== this.controllers.moveController)
-                (_a = this.controllers.moveController) === null || _a === void 0 ? void 0 : _a.helperObject3D.hide();
-            if (currentController !== this.controllers.rotateController)
-                (_b = this.controllers.rotateController) === null || _b === void 0 ? void 0 : _b.helperObject3D.hide();
-            // if (currentController !== this.controllers.scaleController) this.controllers.scaleController?.helperObject3D.hide()
-        }
-        else {
-            (_c = this.controllers.moveController) === null || _c === void 0 ? void 0 : _c.helperObject3D.show();
-            (_d = this.controllers.rotateController) === null || _d === void 0 ? void 0 : _d.helperObject3D.show();
-        }
-    }
-    handleEnable(enabled, userAction = true) {
-        console.log({ enabled });
-        if (enabled) {
-            this.everyControllerDo((controller) => controller.enable());
-            this.hooks.emit('enable', { userAction });
-        }
-        else {
-            this.everyControllerDo((controller) => controller.disable());
-            this.hooks.emit('disable', { userAction });
-        }
-        this.state.enabled = enabled;
-    }
-    handleVisible(visible, userAction = true) {
-        console.log({ visible });
-        if (visible) {
-            this.everyControllerDo((controller) => controller.show());
-            this.actionIfStateIsEnabled(() => this.hooks.emit('show', { userAction }));
-        }
-        else {
-            this.everyControllerDo((controller) => controller.hide());
-            this.actionIfStateIsEnabled(() => this.hooks.emit('hide', { userAction }));
-        }
-        this.state.visible = visible;
-    }
-    everyControllerDo(func) {
-        Object.values(this.controllers).forEach((controller) => {
-            if (controller)
-                func(controller);
-        });
-    }
-    handleDispose() {
-        Object.values(this.controllers).forEach((controller) => {
-            controller === null || controller === void 0 ? void 0 : controller.dispose();
-        });
-    }
-    actionIfStateIsEnabled(func, options) {
-        if (this.state.enabled)
-            return func();
-        else {
-            if (options === null || options === void 0 ? void 0 : options.warnLog)
-                disableWarnLog();
-        }
-    }
-}
-
-class RotateController extends BaseController {
-    constructor(...params) {
-        super(...params);
-        Object.defineProperty(this, "startInfo", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "lastRotation", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "rotations", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "a", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "helperObject3DQuaternion", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: this.helperObject3D.quaternion.clone()
-        });
-        // add hover listener
-        const helper = this.helperObject3D;
-        this.hoverListener([helper.xyCircle, helper.xzCircle, helper.yzCircle]);
-        const dragStart = this.dragStart.bind(this);
-        const dragging = this.dragging.bind(this);
-        const dragEnd = this.dragEnd.bind(this);
-        this.domEvents.addEventListener(this.helperObject3D, 'mousedown', dragStart);
-        document.addEventListener('mousemove', dragging);
-        document.addEventListener('mouseup', dragEnd);
-    }
-    /**
-     * @description: 拖动开始，找出拖的Direction
-     */
-    dragStart(params) {
-        if (this.isDragging)
-            return;
-        const intersect = params === null || params === void 0 ? void 0 : params.intersect;
-        if (!intersect)
-            return this.dragEnd();
-        const direction = (intersect === null || intersect === void 0 ? void 0 : intersect.object).direction;
-        if (!direction)
-            return this.dragEnd();
-        // 检查end
-        this.helperObject3D.updateAngleHelperQuaternion();
-        const startIntersect = intersect.point;
-        const rotateCenter = this.originObject3D.position.clone();
-        const angleHelper = this.getAngleHelper(direction);
-        // init tips
-        this.setTipsAngle(0);
-        const tipsPosition = startIntersect.clone();
-        tipsPosition.y += 0.2;
-        this.setTipsPosition(tipsPosition);
-        // end
-        // init plane
-        const directionX = new THREE__namespace.Vector3(1, 0, 0).applyQuaternion(this.helperObject3DQuaternion.clone());
-        const directionY = new THREE__namespace.Vector3(0, 1, 0).applyQuaternion(this.helperObject3DQuaternion.clone());
-        const directionZ = new THREE__namespace.Vector3(0, 0, 1).applyQuaternion(this.helperObject3DQuaternion.clone());
-        const directionVector = (() => {
-            switch (direction) {
-                case 'x':
-                    return directionX;
-                case 'y':
-                    return directionY;
-                case 'z':
-                    return directionZ;
-            }
-        })();
-        const plane = new THREE__namespace.Plane().setFromNormalAndCoplanarPoint(directionVector, startIntersect);
-        // end
-        // init startVectorProject
-        const projectPoint = new THREE__namespace.Vector3();
-        plane.projectPoint(startIntersect.clone(), projectPoint);
-        const startVector = projectPoint.clone().sub(rotateCenter);
-        // end
-        // 计算开始角度
-        const staticStartVector = startVector.clone();
-        const startAngle = startVector.angleTo(angleHelper.baseAxes);
-        this.setAngleHelperStart(direction, startAngle);
-        this.setAngleHelperLength(direction, 0);
-        this.rotations.push({ vector: startVector.clone(), direction: true });
-        // end
-        // this.scene.remove(this.a)
-        // this.a = new THREE.PlaneHelper(plane, 10, 0xffff00)
-        // this.scene.add(this.a)
-        this.startInfo = { direction, startVector, staticStartVector, plane, angleHelper };
-        this.helperObject3D.show(direction);
-        this.hooks.emit('rotateStart');
-        this.isDragging = true;
-        console.log(`%c RotateController dragStart ${direction}`, 'color: #e5af2e');
-    }
-    dragging(point) {
-        var _a;
-        if (!this.isDragging)
-            return;
-        const ray = getMouseRaycaster(this.camera, point, this.container);
-        if (!ray)
-            return this.dragEnd();
-        console.log(`%c RotateController dragging ${(_a = this.startInfo) === null || _a === void 0 ? void 0 : _a.direction}`, 'color: #49de1b');
-        this.rotate(ray);
-        return false;
-    }
-    rotate(raycaster) {
-        if (!this.startInfo)
-            return this.dragEnd();
-        const { startVector, plane, angleHelper, staticStartVector, direction } = this.startInfo;
-        const object = this.originObject3D;
-        const currentIntersectPoint = raycaster.ray.intersectPlane(plane, new THREE__namespace.Vector3());
-        if (!currentIntersectPoint)
-            return;
-        const rotateCenter = object.position.clone();
-        const projectPoint = new THREE__namespace.Vector3();
-        plane.projectPoint(currentIntersectPoint.clone(), projectPoint);
-        const currentVector = projectPoint.clone().sub(rotateCenter);
-        // 计算当前角度
-        if (startVector.angleTo(currentVector) === 0)
-            return;
-        if (this.lastRotation === undefined)
-            this.lastRotation = { angle: 0 };
-        if (this.rotations.length === 0)
-            return;
-        const rotationDirection = (() => {
-            if (this.rotations.length === 1) {
-                return currentVector.angleTo(angleHelper.baseAxes) > staticStartVector.angleTo(angleHelper.baseAxes);
-            }
-            else {
-                /**
-                 * 通过记录上两次旋转时的vectorEnd和方向，来计算当前旋转的方向
-                 */
-                const lr = this.rotations[this.rotations.length - 1]; // last rotation
-                const llr = this.rotations[this.rotations.length - 2]; // last last rotation
-                const currentToLLR = currentVector.angleTo(llr.vector);
-                const currentToLR = currentVector.angleTo(lr.vector);
-                const lrToLLR = lr.vector.angleTo(llr.vector);
-                if (lrToLLR === 0 || currentToLR === 0 || currentToLLR === 0)
-                    return;
-                /** example:
-                 *    'current lr llr' mains:
-                 *
-                 *    currentVector  lr  llr
-                 *             \     |    /
-                 *              \    |   /
-                 *               \   |  /
-                 *                \  | /
-                 *                 \ |/
-                 *          rotation center
-                 *
-                 * 1. 如果 currentVector 到 llr 角度大于 currentVector 到 lr 角度，说明当前旋转方向与lr相同
-                 * 2. 如果 currentVector 在 llr 和 lr 中间，说明当前旋转方向与lr相反
-                 * 3. 如果 currentVector 到 lr 角度大于 currentVector 到 llr 角度，说明当前旋转方向与lr相反
-                 */
-                // 1. current lr llr 或 llr lr current
-                if (currentToLLR > currentToLR && currentToLLR > lrToLLR) {
-                    return lr.direction;
-                }
-                // 2. lr current llr 或 llr current lr
-                if (currentToLLR < lrToLLR && currentToLR < lrToLLR) {
-                    return !lr.direction;
-                }
-                // 3. lr llr current 或 current llr lr
-                if (currentToLLR < currentToLR && currentToLR > lrToLLR) {
-                    return !lr.direction;
-                }
-            }
-            return;
-        })();
-        if (rotationDirection === undefined)
-            return console.warn('rotationDirection is undefined');
-        this.rotations.push({ vector: currentVector, direction: rotationDirection });
-        this.rotations = this.rotations.slice(-2); // 只保留后两个
-        this.lastRotation.angle = this.lastRotation.angle + currentVector.angleTo(startVector) * (rotationDirection ? 1 : -1);
-        this.setAngleHelperLength(direction, this.lastRotation.angle);
-        this.setTipsAngle((this.lastRotation.angle / Math.PI) * 180);
-        // end
-        const quaternion = new THREE__namespace.Quaternion().setFromUnitVectors(startVector.clone().normalize(), currentVector.clone().normalize());
-        object.applyQuaternion(quaternion);
-        this.helperObject3D.updateQuaternion(quaternion);
-        this.helperObject3DQuaternion.premultiply(quaternion);
-        this.hooks.emit('rotateUpdate', { quaternion, origin: rotateCenter });
-        this.startInfo.startVector = currentVector;
-    }
-    dragEnd() {
-        if (!this.isDragging)
-            return;
-        console.log('%c RotateController dragEnd', 'color: #e94e4e');
-        // 拖动结束，重置
-        this.startInfo = undefined;
-        this.isDragging = false;
-        this.lastRotation = undefined;
-        this.rotations = [];
-        // 显示所有
-        this.helperObject3D.show();
-        this.hooks.emit('rotateEnd');
-        return;
-    }
-    getAngleHelper(direction) {
-        switch (direction) {
-            case 'x':
-                return this.helperObject3D.xAngleHelper;
-            case 'y':
-                return this.helperObject3D.yAngleHelper;
-            case 'z':
-                return this.helperObject3D.zAngleHelper;
-        }
-    }
-    setAngleHelperStart(direction, start) {
-        const angleHelper = this.getAngleHelper(direction);
-        if (angleHelper instanceof THREE__namespace.Mesh && angleHelper.geometry instanceof THREE__namespace.CircleGeometry) {
-            const { radius, segments, thetaLength } = angleHelper.geometry.parameters;
-            angleHelper.geometry = new THREE__namespace.CircleGeometry(radius, segments, start, thetaLength);
-        }
-        else {
-            console.warn('only support THREE.CircleGeometry');
-        }
-    }
-    setAngleHelperLength(direction, length) {
-        const minLength = 0.001;
-        const thetaLength = length >= 0 ? Math.max(length, minLength) : Math.min(length, -minLength);
-        const angleHelper = this.getAngleHelper(direction);
-        if (angleHelper instanceof THREE__namespace.Mesh && angleHelper.geometry instanceof THREE__namespace.CircleGeometry) {
-            const { radius, thetaStart } = angleHelper.geometry.parameters;
-            const segments = Math.ceil(Math.abs(thetaLength) * (40 / (2 * Math.PI)));
-            angleHelper.geometry = new THREE__namespace.CircleGeometry(radius, segments, thetaStart, thetaLength);
-        }
-        else {
-            console.warn('only support THREE.CircleGeometry');
-        }
-    }
-    setTipsAngle(angle) {
-        var _a;
-        const element = (_a = this.helperObject3D.angleTips) === null || _a === void 0 ? void 0 : _a.element;
-        if (!element)
-            return;
-        element.innerText = `${angle.toFixed(0)}°`;
-    }
-    setTipsPosition(position) {
-        const angleTips = this.helperObject3D.angleTips;
-        if (!angleTips)
-            return;
-        const project = position.project(this.camera);
-        const { x, y, z } = project;
-        if (z > 1)
-            return;
-        const left = ((x + 1) / 2) * 100 + '%';
-        const top = ((-y + 1) / 2) * 100 + '%';
-        angleTips.setLeftTop(left, top);
-    }
-}
-
-function negateScale(scale) {
-    return scale.clone().sub(new THREE__namespace.Vector3(1, 1, 1)).negate().add(new THREE__namespace.Vector3(1, 1, 1));
-}
-
-class RectangleScaleController extends BaseController {
-    constructor(...params) {
-        super(...params);
-        Object.defineProperty(this, "startInfo", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-    }
-    enable() {
-        this.helperObject3D.enable();
-        super.enable();
-    }
-    disable() {
-        this.helperObject3D.disable();
-        super.disable();
-    }
-    show() {
-        this.helperObject3D.show();
-        super.show();
-    }
-    hide() {
-        this.helperObject3D.hide();
-        super.hide();
-    }
-    getDragPlane() {
-        const plane = new THREE__namespace.Plane();
-        // get normal from points
-        const positions = this.helperObject3D.cornerPositions;
-        if (positions.length === 0)
-            return;
-        if (positions.length < 3)
-            plane.setFromNormalAndCoplanarPoint(this.originObject3D.getWorldDirection(new THREE.Vector3()), positions[0]);
-        else
-            plane.setFromCoplanarPoints(positions[0], positions[1], positions[2]);
-        // const p0 = getPoint(positions[0]!, 0)
-        // const p1 = getPoint(positions[1]!, 1)
-        // const p2 = getPoint(positions[2]!, 2)
-        // this.scene.add(p0, p1, p2)
-        return plane;
-    }
-    dragStart(mousePoint, point) {
-        var _a, _b;
-        (_b = (_a = this.helperObject3D).updatePoints) === null || _b === void 0 ? void 0 : _b.call(_a);
-        const plane = this.getDragPlane();
-        if (!plane)
-            return this.dragEnd();
-        this.startInfo = { startPoint: { position: point.position.clone(), direction: point.direction }, plane };
-        this.hooks.emit('scaleStart');
-        this.needsRender();
-        this.isDragging = true;
-        console.log('%c RectangleScaleController dragStart', 'color: #e5af2e');
-    }
-    dragging(point) {
-        if (!this.isDragging)
-            return;
-        const raycaster = getMouseRaycaster(this.camera, point, this.container);
-        if (!raycaster)
-            return this.dragEnd();
-        this.scale(raycaster);
-        console.log('%c RectangleScaleController dragging', 'color: #49de1b');
-    }
-    scale(raycaster) {
-        var _a, _b;
-        if (!this.startInfo)
-            return;
-        const object = this.originObject3D;
-        const { startPoint, plane } = this.startInfo;
-        const cornerPositions = this.helperObject3D.cornerPositions;
-        if (cornerPositions.length < 4)
-            return this.dragEnd();
-        const planeIntersection = raycaster.ray.intersectPlane(plane, new THREE.Vector3());
-        if (!planeIntersection)
-            return;
-        if (vectorIsEqual(planeIntersection, this.camera.position))
-            return;
-        const referencePosition = cornerPositions[0].clone();
-        const planeCenter = new THREE.Vector3().addVectors(cornerPositions[0], cornerPositions[2]).divideScalar(2);
-        const { position: startPosition, direction } = startPoint;
-        const ewVector = new THREE.Vector3().subVectors(cornerPositions[1], referencePosition); // west -> east vector
-        const nsVector = new THREE.Vector3().subVectors(cornerPositions[3], referencePosition); // south -> north vector
-        // eslint-disable-next-line complexity
-        const getScale = (direction) => {
-            const baseVector = (direction === 'ew' ? ewVector : nsVector).clone();
-            const startPositionProject = startPosition.clone().projectOnVector(baseVector);
-            const nowPositionProject = planeIntersection.clone().projectOnVector(baseVector);
-            const planeCenterProject = planeCenter.clone().projectOnVector(baseVector);
-            if (this.startInfo) {
-                if (direction === 'ns' && typeof this.startInfo.nsMoveIsNegative !== 'boolean') {
-                    const offset = new THREE.Vector3().subVectors(nowPositionProject, planeCenterProject);
-                    const xIsNegative = offset.x < 0 && baseVector.x >= 0;
-                    const yIsNegative = offset.y < 0 && baseVector.y >= 0;
-                    const zIsNegative = offset.z < 0 && baseVector.z >= 0;
-                    this.startInfo.nsMoveIsNegative = xIsNegative || yIsNegative || zIsNegative;
-                }
-                if (direction === 'ew' && typeof this.startInfo.ewMoveIsNegative !== 'boolean') {
-                    const offset = new THREE.Vector3().subVectors(nowPositionProject, planeCenterProject);
-                    const xIsNegative = offset.x < 0 && baseVector.x >= 0;
-                    const yIsNegative = offset.y < 0 && baseVector.y >= 0;
-                    const zIsNegative = offset.z < 0 && baseVector.z >= 0;
-                    this.startInfo.ewMoveIsNegative = xIsNegative || yIsNegative || zIsNegative;
-                }
-            }
-            if (nowPositionProject.equals(startPositionProject))
-                return;
-            const startPositionProjectOffset = new THREE.Vector3().subVectors(startPositionProject, planeCenterProject);
-            const nowPositionProjectOffset = new THREE.Vector3().subVectors(nowPositionProject, planeCenterProject);
-            const scale = nowPositionProjectOffset.clone().divide(startPositionProjectOffset);
-            scale.x = isNaN(scale.x) ? 1 : scale.x;
-            scale.y = isNaN(scale.y) ? 1 : scale.y;
-            scale.z = isNaN(scale.z) ? 1 : scale.z;
-            return scale;
-        };
-        const nsScale = (_a = getScale('ns')) !== null && _a !== void 0 ? _a : new THREE.Vector3(1, 1, 1);
-        const ewScale = (_b = getScale('ew')) !== null && _b !== void 0 ? _b : new THREE.Vector3(1, 1, 1);
-        const scale = (() => {
-            switch (direction) {
-                case 'ew':
-                    return ewScale;
-                case 'ns':
-                    return nsScale;
-                case 'nesw':
-                case 'nwse':
-                    return new THREE.Vector3().multiplyVectors(nsScale, ewScale);
-            }
-        })();
-        const halfScale = scale.clone().sub(new THREE.Vector3(1, 1, 1)).multiplyScalar(0.5).add(new THREE.Vector3(1, 1, 1));
-        const scaleMatrix = new THREE__namespace.Matrix4().scale(halfScale);
-        const newScale = object.scale.clone().applyMatrix4(scaleMatrix);
-        // const minScale = 0.000001
-        // newScale.x = Math.max(newScale.x, minScale)
-        // newScale.y = Math.max(newScale.y, minScale)
-        // newScale.z = Math.max(newScale.z, minScale)
-        // if (direction === 'ew' || direction === 'ns') {
-        //   if (newScale.x === minScale || newScale.y === minScale || newScale.z === minScale) return
-        // }
-        // if (direction === 'nesw' || direction === 'nwse') {
-        //   if (newScale.x === minScale && newScale.y === minScale) return
-        //   if (newScale.x === minScale && newScale.z === minScale) return
-        //   if (newScale.y === minScale && newScale.z === minScale) return
-        // }
-        object.scale.copy(newScale); // 或者 object.scale.applyMatrix4(scaleMatrix)
-        startPoint.position.copy(planeIntersection);
-        this.hooks.emit('scaleUpdate', { matrix4: scaleMatrix, helperOrigin: planeCenter });
-        // 移动位置
-        if (referencePosition) {
-            const ewMoveScale = this.startInfo.ewMoveIsNegative ? negateScale(ewScale) : ewScale;
-            const nsMoveScale = this.startInfo.nsMoveIsNegative ? negateScale(nsScale) : nsScale;
-            const moveScale = (() => {
-                switch (direction) {
-                    case 'ew':
-                        return ewMoveScale;
-                    case 'ns':
-                        return nsMoveScale;
-                    case 'nesw':
-                    case 'nwse':
-                        return new THREE.Vector3().multiplyVectors(ewMoveScale, nsMoveScale);
-                }
-            })();
-            const halfMoveScale = moveScale.clone().sub(new THREE.Vector3(1, 1, 1)).multiplyScalar(0.5).add(new THREE.Vector3(1, 1, 1));
-            const objectPosition = object.position.clone();
-            const newPosition = new THREE.Vector3()
-                .subVectors(objectPosition, referencePosition)
-                .multiply(halfMoveScale)
-                .add(referencePosition)
-                .sub(objectPosition);
-            const transform = new THREE__namespace.Matrix4().setPosition(newPosition);
-            object.applyMatrix4(transform);
-            this.hooks.emit('positionUpdate', { matrix4: transform });
-        }
-        this.needsRender();
-    }
-    dragEnd() {
-        if (!this.isDragging)
-            return;
-        this.startInfo = undefined;
-        this.isDragging = false;
-        this.hooks.emit('scaleEnd');
-        this.needsRender();
-        console.log('%c RectangleScaleController dragEnd', 'color: #e94e4e');
-    }
-}
-
-class CSS3DScaleController extends RectangleScaleController {
-    constructor(...params) {
-        super(...params);
-        this.addHTMLEventListener();
-    }
-    addHTMLEventListener() {
-        this.helperObject3D.points.forEach((startPoint) => {
-            if (!startPoint)
-                return;
-            const element = startPoint.point;
-            const dragStart = (event) => this.dragStart(event, startPoint);
-            const dragging = this.dragging.bind(this);
-            const dragEnd = this.dragEnd.bind(this);
-            element.addEventListener('dragstart', dragStart);
-            element.addEventListener('drag', dragging);
-            element.addEventListener('dragend', dragEnd);
-        });
-    }
-}
-
-const VERSION = 'v1.0.0';
-const PLUGIN_NAME = 'Object3DHelperPlugin';
-const PLUGIN = `${PLUGIN_NAME}@${VERSION}`;
-const pluginFlag = (name) => `${PLUGIN}--${name}`;
-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 ControllerWrapper(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 ControllerWrapper(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 ControllerWrapper(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)
-    }
-}
-
-const Object3DHelperPlugin = (five) => new Object3DHelperController(five);
-
-exports.Object3DHelperController = Object3DHelperController;
-exports.Object3DHelperPlugin = Object3DHelperPlugin;
-exports.PLUGIN = PLUGIN;
-exports.VERSION = VERSION;
-exports["default"] = Object3DHelperPlugin;
-exports.pluginFlag = pluginFlag;