@realsee/dnalogel 2.0.1 → 2.2.0-alpha.1

package/dist/Object3DHelperPlugin/index.js

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