@realsee/dnalogel 2.1.0-alpha.1 → 2.1.0-alpha.10

package/dist/Object3DHelperPlugin/index.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var five = require('@realsee/five');
 var THREE = require('three');
 var CSS3DRenderer = require('three/examples/jsm/renderers/CSS3DRenderer');
 
@@ -25,8 +26,39 @@ function _interopNamespace(e) {
 
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 
+/**
+ * plugin 的基本控制器
+ */
+class Controller {
+    constructor(five$1) {
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * 插件事件钩子
+         */
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new five.Subscribe()
+        });
+        this.five = five$1;
+    }
+    /**
+     * 获取当前的插件状态，如果当初插件内存在需要通过动画变更的 state 值，则通过此方法可以得到中间状态
+     */
+    getCurrentState() {
+        return this.state;
+    }
+}
+
 class BaseHelper extends THREE.Object3D {
-    constructor(originObject3D) {
+    constructor(originObject3D, config) {
+        var _a;
         super();
         Object.defineProperty(this, "originObject3D", {
             enumerable: true,
@@ -34,24 +66,39 @@ class BaseHelper extends THREE.Object3D {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "onRender", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.originObject3D = originObject3D;
+        this.onRender = (_a = config === null || config === void 0 ? void 0 : config.onRender) !== null && _a !== void 0 ? _a : (() => { });
     }
     get helperObject() {
         return this;
     }
+    render() {
+        this.onRender();
+    }
+    show() {
+        this.visible = true;
+        this.render();
+    }
+    hide() {
+        this.visible = false;
+        this.render();
+    }
     updatePosition() {
         this.position.copy(this.originObject3D.position);
     }
-    setPosition(position) {
-        this.position.copy(position);
-    }
-    updateMatrix4(matrix, origin) {
-        this.applyMatrix4(matrix);
+    updateQuaternion() {
+        this.quaternion.copy(this.originObject3D.quaternion);
     }
-    setHelperScaleMatrix4(matrix, params) {
+    applyHelperScaleMatrix4(matrix, params) {
         this.scale.applyMatrix4(matrix);
     }
-    updateQuaternion(quaternion, origin) {
+    applyHelperQuaternion(quaternion, origin) {
         this.applyQuaternion(quaternion);
     }
 }
@@ -261,29 +308,16 @@ class MoveHelper extends MoveHelperAbstract {
         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() {
+        super.show();
+        this.xArrow.visible = true;
+        this.yArrow.visible = true;
+        this.zArrow.visible = true;
     }
-    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);
-        }
+    showDraggingHelper(directions) {
+        this.xArrow.visible = directions.includes('x');
+        this.yArrow.visible = directions.includes('y');
+        this.zArrow.visible = directions.includes('z');
     }
     dispose() {
         this.remove(this.xArrow, this.yArrow, this.zArrow);
@@ -412,7 +446,7 @@ class RotateHelper extends RotateHelperAbstract {
         this.yRingHelper.quaternion.copy(this.xzCircle.quaternion);
         this.zRingHelper.quaternion.copy(this.xyCircle.quaternion);
     }
-    updateQuaternion(quaternion, origin) {
+    applyHelperQuaternion(quaternion, origin) {
         this.yzCircle.applyQuaternion(quaternion);
         this.xzCircle.applyQuaternion(quaternion);
         this.xyCircle.applyQuaternion(quaternion);
@@ -421,21 +455,21 @@ class RotateHelper extends RotateHelperAbstract {
         this.zAngleHelper.baseAxes.applyQuaternion(quaternion);
     }
     hide() {
+        // 改为remove而不是设置visible，是因为会影响其他helper的碰撞检测
         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();
-        }
+    show() {
+        var _a;
+        this.add(this.xyCircle, this.xzCircle, this.yzCircle);
+        this.remove(this.xRingHelper, this.yRingHelper, this.zRingHelper, this.xAngleHelper, this.yAngleHelper, this.zAngleHelper);
+        (_a = this.angleTips) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+    showDraggingHelper(directions) {
+        var _a;
+        this.hide();
+        this.add(...this.filterRingHelper(directions));
+        this.add(...this.filterAngleHelper(directions));
+        (_a = this.angleTips) === null || _a === void 0 ? void 0 : _a.show();
     }
     dispose() {
         var _a, _b;
@@ -443,11 +477,11 @@ class RotateHelper extends RotateHelperAbstract {
         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);
+    filterRingHelper(directions) {
+        return [this.xRingHelper, this.yRingHelper, this.zRingHelper].filter((helper) => directions.includes(helper.direction));
     }
-    filterAngleHelper(direction) {
-        return [this.xAngleHelper, this.yAngleHelper, this.zAngleHelper].filter((helper) => helper.direction === direction);
+    filterAngleHelper(directions) {
+        return [this.xAngleHelper, this.yAngleHelper, this.zAngleHelper].filter((helper) => directions.includes(helper.direction));
     }
 }
 class Circle extends THREE__namespace.Mesh {
@@ -691,6 +725,7 @@ const NAME$1 = `CSS3DObjectPlus@${VERSION$3}`;
 const MinRatio = 0.00216;
 const DefaultRatio = 0.003;
 class CSS3DObjectPlus extends CSS3DRenderer.CSS3DObject {
+    // eslint-disable-next-line max-params
     constructor(container, cornerPoints, ratio = DefaultRatio, dpr = 1) {
         const realRatio = Math.max(MinRatio, ratio);
         const planeWidth = cornerPoints[0].distanceTo(cornerPoints[1]);
@@ -817,10 +852,10 @@ class CSS3DObjectPlus extends CSS3DRenderer.CSS3DObject {
     }
 }
 
-const VERSION$2 = 'v1.1.0';
+const VERSION$2 = 'v2.0.0';
 const PLUGIN_NAME$1 = 'CSS3DRenderer';
 const PLUGIN$1 = `${PLUGIN_NAME$1}@${VERSION$2}`;
-const pluginFlag$1 = (name) => `${PLUGIN$1}--${name}`;
+const pluginFlag = (name) => `${PLUGIN$1}--${name}`;
 const globalStore = {};
 class CSS3DRender {
     constructor() {
@@ -963,7 +998,7 @@ class CSS3DRender {
                         css3DRenderer.domElement.style.top = '0';
                         css3DRenderer.domElement.style.userSelect = 'none';
                         css3DRenderer.domElement.style.pointerEvents = 'none';
-                        css3DRenderer.domElement.classList.add(pluginFlag$1(mode));
+                        css3DRenderer.domElement.classList.add(pluginFlag(mode));
                         const renderEveryFrame = () => {
                             const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
                             modeStore.requestAnimationFrameId = requestAnimationFrameId;
@@ -1004,6 +1039,7 @@ class CSS3DRender {
                             globalStore.frontModeStore = undefined;
                         if (mode === 'behind')
                             globalStore.behindModeStore = undefined;
+                        globalStore.resizeObserver = undefined;
                     }
                     return true;
                 };
@@ -1086,7 +1122,7 @@ class CSS3DRender {
                         });
                         const geometry = new THREE__namespace.PlaneGeometry(domWidthPx, domHeightPx);
                         const mesh = new THREE__namespace.Mesh(geometry, material);
-                        mesh.name = pluginFlag$1('mesh');
+                        mesh.name = pluginFlag('mesh');
                         mesh.position.copy(css3DObject.position);
                         mesh.rotation.copy(css3DObject.rotation);
                         mesh.scale.copy(css3DObject.scale);
@@ -1101,8 +1137,10 @@ class CSS3DRender {
             configurable: true,
             writable: true,
             value: (element, resizeHandler, fireImmediately = true) => {
-                if (!element || !ResizeObserver)
+                if (!element) {
+                    console.error('createResizeObserver: element is undefined');
                     return { observe: () => { }, unobserve: () => { } };
+                }
                 const resizeObserverHandler = () => {
                     /**
                      * 这里evenNumber策略是遇到奇数会加1，在某些浏览器中会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
@@ -1112,6 +1150,10 @@ class CSS3DRender {
                     const height = evenNumber(element.clientHeight, { smaller: true });
                     resizeHandler(width, height);
                 };
+                if (typeof ResizeObserver === 'undefined' || !ResizeObserver) {
+                    console.warn('createResizeObserver: ResizeObserver is undefined');
+                    return { observe: () => resizeObserverHandler(), unobserve: () => { } };
+                }
                 const observer = new ResizeObserver(resizeObserverHandler);
                 if (fireImmediately)
                     resizeObserverHandler();
@@ -1191,7 +1233,12 @@ class CSS3DRender {
             return;
         container.appendChild(store.css3DRenderer.domElement);
         if (!globalStore.resizeObserver) {
-            const { observe, unobserve } = this.createResizeObserver(container, store.css3DRenderer.setSize, true);
+            const reSize = (width, height) => {
+                var _a, _b;
+                (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DRenderer.setSize(width, height);
+                (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.css3DRenderer.setSize(width, height);
+            };
+            const { observe, unobserve } = this.createResizeObserver(container, reSize, true);
             globalStore.resizeObserver = { observe, unobserve };
             observe();
             this.store.disposers.push(unobserve);
@@ -1355,17 +1402,17 @@ class RectangleScaleHelper extends RectangleScaleHelperAbstract {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "css3DRenderer", {
+        Object.defineProperty(this, "plane", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new CSS3DRender()
+            value: void 0
         });
-        Object.defineProperty(this, "plane", {
+        Object.defineProperty(this, "css3DRenderer", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: new CSS3DRender()
         });
         Object.defineProperty(this, "camera", {
             enumerable: true,
@@ -1407,28 +1454,27 @@ class RectangleScaleHelper extends RectangleScaleHelperAbstract {
         (_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);
+    updateQuaternion() {
+        var _a;
+        (_a = this.plane) === null || _a === void 0 ? void 0 : _a.quaternion.copy(this.originObject3D.quaternion);
     }
-    updateMatrix4(matrix) {
+    // public setPosition(position: Vector3) {
+    //   this.css3DInstance?.css3DObject.position.copy(position)
+    //   this.plane?.position.copy(position)
+    // }
+    applyMatrix4(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) {
+    showDraggingHelper() {
+        // nothing to do
+    }
+    applyHelperScaleMatrix4(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);
@@ -1436,7 +1482,7 @@ class RectangleScaleHelper extends RectangleScaleHelperAbstract {
             point.position.copy(position8[index]);
         });
     }
-    updateQuaternion(quaternion, origin) {
+    applyHelperQuaternion(quaternion, origin) {
         var _a;
         const css3DObject = (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject;
         if (css3DObject) {
@@ -1957,8 +2003,9 @@ function notNil(value) {
     return value !== null && value !== undefined;
 }
 
+let originOpacity = null;
 class BaseController {
-    constructor(camera, model, originObject3D, helperObject3D, container, scene, needsRender) {
+    constructor(camera, model, originObject3D, helperObject3D, container, scene, onRender) {
         Object.defineProperty(this, "hooks", {
             enumerable: true,
             configurable: true,
@@ -2013,7 +2060,7 @@ class BaseController {
             writable: true,
             value: false
         });
-        Object.defineProperty(this, "needsRender", {
+        Object.defineProperty(this, "onRender", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -2043,55 +2090,108 @@ class BaseController {
         this.container = container;
         this.scene = scene;
         this.domEvents = new DomEvents(camera, container);
-        this.needsRender = needsRender !== null && needsRender !== void 0 ? needsRender : (() => { });
-        this.updateHelperPosition();
+        this.onRender = onRender !== null && onRender !== void 0 ? onRender : (() => { });
+        this.initialHelperPosition();
+        this.initialHelperQuaternion();
         this.enable();
     }
+    initialHelperPosition() {
+        this.helperObject3D.updatePosition();
+    }
+    initialHelperQuaternion() {
+        this.helperObject3D.updateQuaternion();
+    }
     enable() {
         if (this.enabled)
             return;
         this.enabled = true;
         this.scene.add(this.helperObject3D);
-        this.needsRender();
+        this.render();
     }
     disable() {
         if (!this.enabled)
             return;
         this.enabled = false;
         this.scene.remove(this.helperObject3D);
-        this.needsRender();
+        this.render();
     }
     show() {
-        this.helperObject3D.visible = true;
-        this.needsRender();
+        this.helperObject3D.show();
+        this.render();
     }
     hide() {
-        this.helperObject3D.visible = false;
-        this.needsRender();
+        this.helperObject3D.hide();
+        this.render();
     }
     dispose() {
-        this.scene.remove(this.helperObject3D);
         this.helperObject3D.dispose();
+        this.scene.remove(this.helperObject3D);
+        this.render();
+    }
+    setOpacity(opacity) {
+        this.setOriginOpacityProperty();
+        const originObject3D = this.originObject3D;
+        if (originObject3D instanceof THREE__namespace.Mesh) {
+            originObject3D.material.opacity = opacity;
+        }
+        if (originObject3D instanceof CSS3DObjectPlus) {
+            originObject3D.container.style.opacity = opacity;
+        }
+        this.render();
+    }
+    restoreOpacity() {
+        if (originOpacity === null)
+            return;
+        const originObject3D = this.originObject3D;
+        if (originObject3D instanceof THREE__namespace.Mesh) {
+            originObject3D.material.opacity = originOpacity.opacity;
+        }
+        if (originObject3D instanceof CSS3DObjectPlus) {
+            originObject3D.container.style.opacity = originOpacity.opacity;
+        }
+        this.render();
+    }
+    setOriginOpacityProperty() {
+        var _a;
+        if (originOpacity === null) {
+            const originObject3D = this.originObject3D;
+            if (originObject3D instanceof THREE__namespace.Mesh) {
+                originOpacity = {
+                    opacity: originObject3D.material.opacity,
+                };
+            }
+            if (originObject3D instanceof CSS3DObjectPlus) {
+                originOpacity = {
+                    opacity: (_a = originObject3D.container.style.opacity) !== null && _a !== void 0 ? _a : 1,
+                };
+            }
+        }
     }
     updateHelperPosition() {
         this.helperObject3D.updatePosition();
     }
-    setHelperPosition(position) {
-        this.helperObject3D.setPosition(position);
+    updateHelperQuaternion() {
+        this.helperObject3D.updateQuaternion();
     }
-    setHelperMatrix4(matrix4, origin) {
-        this.helperObject3D.updateMatrix4(matrix4, origin);
+    // public setHelperPosition(position: THREE.Vector3) {
+    //   this.helperObject3D.setPosition(position)
+    // }
+    applyHelperMatrix4(matrix4) {
+        this.helperObject3D.applyMatrix4(matrix4);
     }
-    setHelperQuaternion(quaternion, origin) {
-        this.helperObject3D.updateQuaternion(quaternion, origin);
+    applyHelperQuaternion(quaternion, origin) {
+        this.helperObject3D.applyHelperQuaternion(quaternion, origin);
     }
-    setHelperScaleMatrix4(matrix4, params) {
-        this.helperObject3D.setHelperScaleMatrix4(matrix4, params);
+    applyHelperScaleMatrix4(matrix4, params) {
+        this.helperObject3D.applyHelperScaleMatrix4(matrix4, params);
     }
     onWantsGesture(type, pointers, final) {
         if (this.isDragging)
             return false;
     }
+    render() {
+        this.onRender();
+    }
     hoverListener(object3D, hoverColor = 0xffffff, hoverOpacity = 1) {
         const objects = (Array.isArray(object3D) ? object3D : [object3D]).filter(notNil);
         const disposers = [];
@@ -2107,14 +2207,14 @@ class BaseController {
                         mesh.material.color.set(hoverColor);
                         mesh.material.opacity = hoverOpacity;
                     });
-                    this.needsRender();
+                    this.render();
                 };
                 const resetColor = () => {
                     meshes.forEach((mesh) => {
                         mesh.material.color.copy(mesh['__originalColor__']);
                         mesh.material.opacity = mesh['__originalOpacity__'];
                     });
-                    this.needsRender();
+                    this.render();
                 };
                 const handleMouseover = () => {
                     if (this.isDragging)
@@ -2228,7 +2328,7 @@ class MoveController extends BaseController {
         plane.setFromNormalAndCoplanarPoint(planeNormal, startIntersect);
         this.startInfo = { startVectorProject: startIntersect.clone().projectOnVector(directionVector), directionVector, plane };
         // 隐藏其他箭头
-        this.helperObject3D.hide(...['x', 'y', 'z'].filter((direction) => direction !== draggingDirection));
+        this.helperObject3D.showDraggingHelper([draggingDirection]);
         this.hooks.emit('moveStart');
         this.isDragging = true;
         console.log('%c MoveController dragStart', 'color: #e5af2e');
@@ -2330,16 +2430,17 @@ class ControllerWrapper {
     }
 }
 
-const VERSION$1 = 'v1.0.0';
+const VERSION$1 = 'v1.0.1';
 const NAME = 'Object3DHelper';
 const NAMEVERSION = `${NAME}@${VERSION$1}`;
-const disposedErrorLog = () => {
+const OBJECT_OPACITY = 0.4;
+const disposedErrorLog$1 = () => {
     console.error(`${NAMEVERSION} is disposed`);
 };
-const disableWarnLog = () => {
+const disableWarnLog$1 = () => {
     console.warn(`${NAMEVERSION} is disabled`);
 };
-const disableErrorLog = () => {
+const disableErrorLog$1 = () => {
     console.error(`${NAMEVERSION} is disabled`);
 };
 class Object3DHelper {
@@ -2348,7 +2449,7 @@ class Object3DHelper {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: {}
         });
         Object.defineProperty(this, "state", {
             enumerable: true,
@@ -2383,25 +2484,24 @@ class Object3DHelper {
             configurable: true,
             writable: true,
             value: (controller, ...positionParams) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var _a, _b, _c, _d;
                 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);
+                        (_a = this.controllers.moveController) === null || _a === void 0 ? void 0 : _a.applyHelperMatrix4(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);
+                        (_b = this.controllers.rotateController) === null || _b === void 0 ? void 0 : _b.applyHelperMatrix4(matrix4);
+                    if (controller !== this.controllers.scaleController)
+                        (_c = this.controllers.scaleController) === null || _c === void 0 ? void 0 : _c.applyHelperMatrix4(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);
-                }
+                // if (position?.position) {
+                //   if (controller !== this.controllers.moveController) this.controllers.moveController?.setHelperPosition(position.position)
+                //   if (controller !== this.controllers.rotateController) this.controllers.rotateController?.setHelperPosition(position.position)
+                //   this.controllers.scaleController?.setHelperPosition(position.position)
+                //   this.helpers.outlineHelper?.position.copy(position.position)
+                // }
             }
         });
         Object.defineProperty(this, "handleScaleUpdate", {
@@ -2413,7 +2513,7 @@ class Object3DHelper {
                 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);
+                    (_a = this.controllers.scaleController) === null || _a === void 0 ? void 0 : _a.applyHelperScaleMatrix4(matrix4, params);
                     (_b = this.helpers.outlineHelper) === null || _b === void 0 ? void 0 : _b.scale.applyMatrix4(matrix4);
                 }
             }
@@ -2429,18 +2529,20 @@ class Object3DHelper {
                     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);
+                            (_a = this.controllers.moveController) === null || _a === void 0 ? void 0 : _a.applyHelperQuaternion(quaternion, origin);
                         if (controller !== this.controllers.rotateController)
-                            (_b = this.controllers.rotateController) === null || _b === void 0 ? void 0 : _b.setHelperQuaternion(quaternion, origin);
+                            (_b = this.controllers.rotateController) === null || _b === void 0 ? void 0 : _b.applyHelperQuaternion(quaternion, origin);
                         if (controller !== this.controllers.scaleController)
-                            (_c = this.controllers.scaleController) === null || _c === void 0 ? void 0 : _c.setHelperQuaternion(quaternion, origin);
+                            (_c = this.controllers.scaleController) === null || _c === void 0 ? void 0 : _c.applyHelperQuaternion(quaternion, origin);
                         (_d = this.helpers.outlineHelper) === null || _d === void 0 ? void 0 : _d.applyQuaternion(quaternion);
                     }
                 }
             }
         });
-        this.controllers = controllers !== null && controllers !== void 0 ? controllers : {};
+        if (controllers)
+            this.addControllers(controllers);
         this.helpers = helpers !== null && helpers !== void 0 ? helpers : {};
+        this.setState(this.state);
     }
     /**
      * @description Show guide line
@@ -2474,11 +2576,11 @@ class Object3DHelper {
     }
     setState(state, options) {
         if (this.state.disposed)
-            return disposedErrorLog();
+            return disposedErrorLog$1();
         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();
+                return disableErrorLog$1();
         }
         const prevState = Object.assign({}, this.state);
         this.state = Object.assign(Object.assign({}, this.state), state);
@@ -2486,10 +2588,10 @@ class Object3DHelper {
             if (state.disposed)
                 this.handleDispose();
         }
-        if (state.visible !== undefined && state.visible !== prevState.visible) {
+        if (state.visible !== undefined) {
             this.handleVisible(state.visible);
         }
-        if (state.enabled !== undefined && state.enabled !== prevState.enabled) {
+        if (state.enabled !== undefined) {
             this.handleEnable(state.enabled);
         }
         this.hooks.emit('stateChange', { state: this.state, prevState });
@@ -2497,6 +2599,7 @@ class Object3DHelper {
     addControllers(controllers) {
         this.controllers = Object.assign(Object.assign({}, this.controllers), controllers);
         this.addEventListener();
+        this.setState(this.state);
     }
     addHelpers(helpers) {
         this.helpers = Object.assign(Object.assign({}, this.helpers), helpers);
@@ -2566,25 +2669,35 @@ class Object3DHelper {
         }
     }
     handleEnable(enabled, userAction = true) {
-        console.log({ enabled });
         if (enabled) {
-            this.everyControllerDo((controller) => controller.enable());
+            this.everyControllerDo((controller) => {
+                controller.enable();
+                controller.setOpacity(OBJECT_OPACITY);
+            });
             this.hooks.emit('enable', { userAction });
         }
         else {
-            this.everyControllerDo((controller) => controller.disable());
+            this.everyControllerDo((controller) => {
+                controller.disable();
+                controller.restoreOpacity();
+            });
             this.hooks.emit('disable', { userAction });
         }
         this.state.enabled = enabled;
     }
     handleVisible(visible, userAction = true) {
-        console.log({ visible });
         if (visible) {
-            this.everyControllerDo((controller) => controller.show());
+            this.everyControllerDo((controller) => {
+                controller.show();
+                controller.setOpacity(OBJECT_OPACITY);
+            });
             this.actionIfStateIsEnabled(() => this.hooks.emit('show', { userAction }));
         }
         else {
-            this.everyControllerDo((controller) => controller.hide());
+            this.everyControllerDo((controller) => {
+                controller.hide();
+                controller.restoreOpacity();
+            });
             this.actionIfStateIsEnabled(() => this.hooks.emit('hide', { userAction }));
         }
         this.state.visible = visible;
@@ -2596,16 +2709,24 @@ class Object3DHelper {
         });
     }
     handleDispose() {
+        var _a, _b;
         Object.values(this.controllers).forEach((controller) => {
             controller === null || controller === void 0 ? void 0 : controller.dispose();
+            controller === null || controller === void 0 ? void 0 : controller.restoreOpacity();
         });
+        for (const k in this.controllers) {
+            if (!k)
+                continue;
+            const key = k;
+            (_b = (_a = this.eventListener)[key]) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
     }
     actionIfStateIsEnabled(func, options) {
         if (this.state.enabled)
             return func();
         else {
             if (options === null || options === void 0 ? void 0 : options.warnLog)
-                disableWarnLog();
+                disableWarnLog$1();
         }
     }
 }
@@ -2631,17 +2752,11 @@ class RotateController extends BaseController {
             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()
+            value: this.originObject3D.quaternion.clone()
         });
         // add hover listener
         const helper = this.helperObject3D;
@@ -2653,6 +2768,10 @@ class RotateController extends BaseController {
         document.addEventListener('mousemove', dragging);
         document.addEventListener('mouseup', dragEnd);
     }
+    initialHelperQuaternion() {
+        this.helperObject3D.updateAngleHelperQuaternion();
+        this.helperObject3D.applyHelperQuaternion(this.originObject3D.quaternion);
+    }
     /**
      * @description: 拖动开始，找出拖的Direction
      */
@@ -2677,9 +2796,9 @@ class RotateController extends BaseController {
         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 directionX = new THREE__namespace.Vector3(1, 0, 0).applyQuaternion(this.helperObject3DQuaternion);
+        const directionY = new THREE__namespace.Vector3(0, 1, 0).applyQuaternion(this.helperObject3DQuaternion);
+        const directionZ = new THREE__namespace.Vector3(0, 0, 1).applyQuaternion(this.helperObject3DQuaternion);
         const directionVector = (() => {
             switch (direction) {
                 case 'x':
@@ -2691,6 +2810,10 @@ class RotateController extends BaseController {
             }
         })();
         const plane = new THREE__namespace.Plane().setFromNormalAndCoplanarPoint(directionVector, startIntersect);
+        // this.a && this.scene.remove(this.a)
+        // const h = new THREE.PlaneHelper(plane, 1)
+        // this.scene.add(h)
+        // this.a = h
         // end
         // init startVectorProject
         const projectPoint = new THREE__namespace.Vector3();
@@ -2708,7 +2831,7 @@ class RotateController extends BaseController {
         // 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.helperObject3D.showDraggingHelper([direction]);
         this.hooks.emit('rotateStart');
         this.isDragging = true;
         console.log(`%c RotateController dragStart ${direction}`, 'color: #e5af2e');
@@ -2798,7 +2921,7 @@ class RotateController extends BaseController {
         // end
         const quaternion = new THREE__namespace.Quaternion().setFromUnitVectors(startVector.clone().normalize(), currentVector.clone().normalize());
         object.applyQuaternion(quaternion);
-        this.helperObject3D.updateQuaternion(quaternion);
+        this.helperObject3D.applyHelperQuaternion(quaternion);
         this.helperObject3DQuaternion.premultiply(quaternion);
         this.hooks.emit('rotateUpdate', { quaternion, origin: rotateCenter });
         this.startInfo.startVector = currentVector;
@@ -2871,10 +2994,6 @@ class RotateController extends BaseController {
     }
 }
 
-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);
@@ -2911,10 +3030,6 @@ class RectangleScaleController extends BaseController {
             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) {
@@ -2924,8 +3039,9 @@ class RectangleScaleController extends BaseController {
         if (!plane)
             return this.dragEnd();
         this.startInfo = { startPoint: { position: point.position.clone(), direction: point.direction }, plane };
+        // this.scene.add(getPoint(point.position.clone(), 3))
         this.hooks.emit('scaleStart');
-        this.needsRender();
+        this.render();
         this.isDragging = true;
         console.log('%c RectangleScaleController dragStart', 'color: #e5af2e');
     }
@@ -2936,7 +3052,7 @@ class RectangleScaleController extends BaseController {
         if (!raycaster)
             return this.dragEnd();
         this.scale(raycaster);
-        console.log('%c RectangleScaleController dragging', 'color: #49de1b');
+        // console.log('%c RectangleScaleController dragging', 'color: #49de1b')
     }
     scale(raycaster) {
         var _a, _b;
@@ -2952,101 +3068,116 @@ class RectangleScaleController extends BaseController {
             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
+        const ewVector = new THREE.Vector3().subVectors(cornerPositions[1], cornerPositions[0]); // west -> east vector
+        const nsVector = new THREE.Vector3().subVectors(cornerPositions[3], cornerPositions[0]); // south -> north vector
         // eslint-disable-next-line complexity
-        const getScale = (direction) => {
+        const getOffset = (direction) => {
+            const defaultVector = new THREE.Vector3(0, 0, 0);
+            if (!this.startInfo)
+                return defaultVector;
             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;
+            // this.scene.add(getPoint(startPosition, 0))
+            // this.scene.add(getPoint(planeIntersection, 0))
+            if (nowPositionProject.equals(startPositionProject))
+                return defaultVector;
+            if (direction === 'ns' && typeof this.startInfo.dragPointInCenterBottom !== '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.dragPointInCenterBottom = xIsNegative || yIsNegative || zIsNegative;
+            }
+            if (direction === 'ew' && typeof this.startInfo.dragPointInCenterLeft !== '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.dragPointInCenterLeft = xIsNegative || yIsNegative || zIsNegative;
+            }
+            const offset = new THREE.Vector3().subVectors(nowPositionProject, startPositionProject);
+            // TODO: 不知道为啥b端在缩放结束有问题，先临时加个限制
+            const offsetLength = offset.length();
+            if (offsetLength > 0.2) {
+                console.warn('offset.length() > 0.2, skipped', offsetLength);
+                return defaultVector;
+            }
+            return offset;
+        };
+        const ewOffset = getOffset('ew');
+        const nsOffset = getOffset('ns');
+        const setEWScale = () => {
+            const offset = ewOffset;
+            this.helperObject3D.cornerPositions.forEach((position, index) => {
+                var _a;
+                if ((_a = this.startInfo) === null || _a === void 0 ? void 0 : _a.dragPointInCenterLeft) {
+                    if (index === 0 || index === 3)
+                        position.add(offset); // 拖左边，只改左边点
                 }
-                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;
+                else {
+                    if (index === 1 || index === 2)
+                        position.add(offset); // 拖右边，只改右边点
                 }
-            }
-            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)
+        const setNSScale = () => {
+            const offset = nsOffset;
+            this.helperObject3D.cornerPositions.forEach((position, index) => {
+                var _a;
+                if ((_a = this.startInfo) === null || _a === void 0 ? void 0 : _a.dragPointInCenterBottom) {
+                    if (index === 0 || index === 1)
+                        position.add(offset); // 拖下边，只改下边点
+                }
+                else {
+                    if (index === 2 || index === 3)
+                        position.add(offset); // 拖上边，只改上边点
+                }
+            });
+        };
+        switch (direction) {
+            case 'ew':
+                setEWScale();
+                break;
+            case 'ns':
+                setNSScale();
+                break;
+            case 'nesw':
+            case 'nwse':
+                setEWScale();
+                setNSScale();
+        }
+        // this.helperObject3D.cornerPositions.forEach((position, index) => {
+        //   this.scene.add(getPoint(position, index))
+        // })
+        const scaleX = new THREE.Vector3().subVectors(cornerPositions[1], cornerPositions[0]).length() / ewVector.length();
+        const scaleY = new THREE.Vector3().subVectors(cornerPositions[3], cornerPositions[0]).length() / nsVector.length();
+        const scaleXY = new THREE.Vector3(scaleX, scaleY, 1);
+        console.log(scaleXY);
+        const scaleMatrix = new THREE__namespace.Matrix4().scale(scaleXY);
+        // const newScale = object.scale.clone().applyMatrix4(scaleMatrix)
+        // object.scale.copy(newScale) // 或者 object.scale.applyMatrix4(scaleMatrix)
+        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();
+        const centerPosition = new THREE.Vector3().addVectors(cornerPositions[0], cornerPositions[2]).divideScalar(2);
+        const offset = new THREE.Vector3().subVectors(centerPosition, planeCenter);
+        const transformMatrix4 = new THREE__namespace.Matrix4().setPosition(offset);
+        object.applyMatrix4(transformMatrix4);
+        (_a = this.helperObject3D.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.applyMatrix4(transformMatrix4);
+        (_b = this.helperObject3D.plane) === null || _b === void 0 ? void 0 : _b.applyMatrix4(transformMatrix4);
+        this.hooks.emit('scaleUpdate', { matrix4: scaleMatrix, helperOrigin: planeCenter });
+        this.hooks.emit('positionUpdate', { matrix4: transformMatrix4 });
+        // 移动位置end
+        // this.helperObject3D.cornerPositions.forEach((position, index) => {
+        //   this.scene.add(getPoint(position, index))
+        // })
+        this.render();
     }
     dragEnd() {
         if (!this.isDragging)
@@ -3054,7 +3185,7 @@ class RectangleScaleController extends BaseController {
         this.startInfo = undefined;
         this.isDragging = false;
         this.hooks.emit('scaleEnd');
-        this.needsRender();
+        this.render();
         console.log('%c RectangleScaleController dragEnd', 'color: #e94e4e');
     }
 }
@@ -3082,10 +3213,18 @@ class CSS3DScaleController extends RectangleScaleController {
 const VERSION = 'v1.0.0';
 const PLUGIN_NAME = 'Object3DHelperPlugin';
 const PLUGIN = `${PLUGIN_NAME}@${VERSION}`;
-const pluginFlag = (name) => `${PLUGIN}--${name}`;
-class Object3DHelperController extends Object3DHelper {
+const disposedErrorLog = () => {
+    console.error(`${PLUGIN} is disposed`);
+};
+const disableWarnLog = () => {
+    console.warn(`${PLUGIN} is disabled`);
+};
+const disableErrorLog = () => {
+    console.error(`${PLUGIN} is disabled`);
+};
+class Object3DHelperController extends Controller {
     constructor(five) {
-        super();
+        super(five);
         Object.defineProperty(this, "version", {
             enumerable: true,
             configurable: true,
@@ -3098,14 +3237,80 @@ class Object3DHelperController extends Object3DHelper {
             writable: true,
             value: PLUGIN_NAME
         });
-        Object.defineProperty(this, "five", {
+        Object.defineProperty(this, "state", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: {
+                visible: true,
+                enabled: true,
+                disposed: false,
+            }
+        });
+        Object.defineProperty(this, "objectHelperMap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
         });
         this.five = five;
         Object.assign(window, { [`__${PLUGIN_NAME.toUpperCase()}_DEBUG__`]: this });
+        // Object.assign(window, { THREE: THREE })
+    }
+    /**
+     * @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 });
+    }
+    getObject3DHelper(object3D) {
+        return this.objectHelperMap.get(object3D);
     }
     /**
      * @description 添加 helper
@@ -3116,6 +3321,14 @@ class Object3DHelperController extends Object3DHelper {
      */
     addObject3DHelper(object3D, config = {}) {
         var _a;
+        if (!object3D)
+            return console.error('Object3D is undefined');
+        if (this.objectHelperMap.has(object3D)) {
+            console.warn(`Object3DHelperPlugin: object3D ${object3D.name} already has helper`);
+            return;
+        }
+        const helper = new Object3DHelper();
+        this.objectHelperMap.set(object3D, helper);
         const container = (_a = this.five.getElement()) === null || _a === void 0 ? void 0 : _a.parentElement;
         const camera = this.five.camera;
         // 创建空的helperGroup
@@ -3125,7 +3338,7 @@ class Object3DHelperController extends Object3DHelper {
         if (moveHelper) {
             const moveHelper = new MoveHelper(object3D);
             const controllerWrapper = new ControllerWrapper(this.five, MoveController, object3D, moveHelper);
-            this.addControllers({ moveController: controllerWrapper.helperController });
+            helper.addControllers({ moveController: controllerWrapper.helperController });
         }
         if (rotateHelper) {
             let angleTipsParams;
@@ -3133,13 +3346,13 @@ class Object3DHelperController extends Object3DHelper {
                 angleTipsParams = { container };
             const rotateHelper = new RotateHelper(object3D, angleTipsParams);
             const controllerWrapper = new ControllerWrapper(this.five, RotateController, object3D, rotateHelper);
-            this.addControllers({ rotateController: controllerWrapper.helperController });
+            helper.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 });
+                helper.addControllers({ scaleController: controllerWrapper.helperController });
             }
         }
         // if (mergeConfig.outlineHelper) {
@@ -3149,6 +3362,52 @@ class Object3DHelperController extends Object3DHelper {
         // }
         // this.five.scene.add(helperGroup)
     }
+    removeObject3DHelper(object3D) {
+        const helper = this.objectHelperMap.get(object3D);
+        if (!helper)
+            return;
+        this.objectHelperMap.delete(object3D);
+        helper.dispose();
+    }
+    handleEnable(enabled, userAction = true) {
+        if (enabled) {
+            this.everyHelperDo((helper) => helper.enable());
+            this.hooks.emit('enable', { userAction });
+        }
+        else {
+            this.everyHelperDo((helper) => helper.disable());
+            this.hooks.emit('disable', { userAction });
+        }
+        this.state.enabled = enabled;
+    }
+    handleVisible(visible, userAction = true) {
+        if (visible) {
+            this.everyHelperDo((helper) => helper.show());
+            this.actionIfStateIsEnabled(() => this.hooks.emit('show', { userAction }));
+        }
+        else {
+            this.everyHelperDo((helper) => helper.hide());
+            this.actionIfStateIsEnabled(() => this.hooks.emit('hide', { userAction }));
+        }
+        this.state.visible = visible;
+    }
+    handleDispose() {
+        this.everyHelperDo((helper) => helper.dispose());
+    }
+    everyHelperDo(func) {
+        this.objectHelperMap.forEach((helper) => {
+            if (helper)
+                func(helper);
+        });
+    }
+    actionIfStateIsEnabled(func, options) {
+        if (this.state.enabled)
+            return func();
+        else {
+            if (options === null || options === void 0 ? void 0 : options.warnLog)
+                disableWarnLog();
+        }
+    }
 }
 
 const Object3DHelperPlugin = (five) => new Object3DHelperController(five);
@@ -3158,4 +3417,3 @@ exports.Object3DHelperPlugin = Object3DHelperPlugin;
 exports.PLUGIN = PLUGIN;
 exports.VERSION = VERSION;
 exports["default"] = Object3DHelperPlugin;
-exports.pluginFlag = pluginFlag;