@xtctwins/tctwins-core 1.0.26 → 1.0.28

package/dist/tctwins-core.es.js

@@ -11669,7 +11669,7 @@ class AngleMeasurement extends Component {
 	/**
 	 * Gets the color of the angle measurement.
 	 *
-	 * The color is an HTML string representation, eg. "#00BBFF" and "blue".
+	 * The color is an HTML string representation, eg. "#0065fc" and "blue".
 	 *
 	 * @type {String}
 	 */
@@ -12772,7 +12772,7 @@ class AngleMeasurementsPlugin extends Plugin {
 
 		this._measurements = {};
 
-		this.defaultColor = cfg.defaultColor !== undefined ? cfg.defaultColor : "#00BBFF";
+		this.defaultColor = cfg.defaultColor !== undefined ? cfg.defaultColor : "#0065fc";
 		this.defaultLabelsVisible = cfg.defaultLabelsVisible !== false;
 		this.zIndex = cfg.zIndex || 10000;
 
@@ -32045,13 +32045,13 @@ class Scene extends Component {
 	 */
 	destroy(callback) {
 		super.destroy();
-
 		for (const id in this.components) {
 			if (this.components.hasOwnProperty(id)) {
 				this.components[id].destroy();
 			}
 		}
-		this.canvas.destroy();
+		// this.canvas.destroy(); // canvas是scene的其中一个component，所有以不必再destroy
+
 		// Memory leak prevention
 		this.components = null;
 		this.models = null;
@@ -32073,13 +32073,14 @@ class Scene extends Component {
 		this._selectedObjectIds = null;
 		this._colorizedObjectIds = null;
 		this.types = null;
-		this.components = null;
-		this.canvas = null;
 		this._renderer = null;
 		this.input = null;
 		this._viewport = null;
 		this._camera = null;
-		if (callback) callback();
+		this.canvas = null;
+		if (typeof callback === "function") {
+			callback();
+		}
 	}
 }
 
@@ -42161,149 +42162,155 @@ math.vec3();
  * ````
  */
 class SectionPlane extends Component {
-
-    /**
+	/**
      @private
      */
-    get type() {
-        return "SectionPlane";
-    }
+	get type() {
+		return "SectionPlane";
+	}
 
-    /**
-     * @constructor
-     * @param {Component} [owner]  Owner component. When destroyed, the owner will destroy this SectionPlane as well.
-     * @param {*} [cfg]  SectionPlane configuration
-     * @param  {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
-     * @param {Boolean} [cfg.active=true] Indicates whether or not this SectionPlane is active.
-     * @param {Number[]} [cfg.pos=[0,0,0]] World-space position of the SectionPlane.
-     * @param {Number[]} [cfg.dir=[0,0,-1]] Vector perpendicular to the plane surface, indicating the SectionPlane plane orientation.
-     */
-    constructor(owner, cfg = {}) {
+	/**
+	 * @constructor
+	 * @param {Component} [owner]  Owner component. When destroyed, the owner will destroy this SectionPlane as well.
+	 * @param {*} [cfg]  SectionPlane configuration
+	 * @param  {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+	 * @param {Boolean} [cfg.active=true] Indicates whether or not this SectionPlane is active.
+	 * @param {Number[]} [cfg.pos=[0,0,0]] World-space position of the SectionPlane.
+	 * @param {Number[]} [cfg.dir=[0,0,-1]] Vector perpendicular to the plane surface, indicating the SectionPlane plane orientation.
+	 */
+	constructor(owner, cfg = {}) {
+		super(owner, cfg);
 
-        super(owner, cfg);
+		this._state = new RenderState({
+			active: true,
+			pos: math.vec3(),
+			dir: math.vec3(),
+			dist: 0
+		});
 
-        this._state = new RenderState({
-            active: true,
-            pos: math.vec3(),
-            dir: math.vec3(),
-            dist: 0
-        });
+		this.active = cfg.active;
+		this.pos = cfg.pos;
+		this.dir = cfg.dir;
 
-        this.active = cfg.active;
-        this.pos = cfg.pos;
-        this.dir = cfg.dir;
+		this.scene._sectionPlaneCreated(this);
+	}
 
-        this.scene._sectionPlaneCreated(this);
-    }
+	set control(control) {
+		this._control = control;
+	}
 
-    /**
-     * Sets if this SectionPlane is active or not.
-     *
-     * Default value is ````true````.
-     *
-     * @param {Boolean} value Set ````true```` to activate else ````false```` to deactivate.
-     */
-    set active(value) {
-        this._state.active = value !== false;
-        this.glRedraw();
-        this.fire("active", this._state.active);
-    }
+	get control() {
+		return this._control;
+	}
 
-    /**
-     * Gets if this SectionPlane is active or not.
-     *
-     * Default value is ````true````.
-     *
-     * @returns {Boolean} Returns ````true```` if active.
-     */
-    get active() {
-        return this._state.active;
-    }
+	/**
+	 * Sets if this SectionPlane is active or not.
+	 *
+	 * Default value is ````true````.
+	 *
+	 * @param {Boolean} value Set ````true```` to activate else ````false```` to deactivate.
+	 */
+	set active(value) {
+		this._state.active = value !== false;
+		this.glRedraw();
+		this.fire("active", this._state.active);
+	}
 
-    /**
-     * Sets the World-space position of this SectionPlane's plane.
-     *
-     * Default value is ````[0, 0, 0]````.
-     *
-     * @param {Number[]} value New position.
-     */
-    set pos(value) {
-        this._state.pos.set(value || [0, 0, 0]);
-        this._state.dist = (-math.dotVec3(this._state.pos, this._state.dir));
-        this.fire("pos", this._state.pos);
-        this.scene.fire("sectionPlaneUpdated", this);
-    }
+	/**
+	 * Gets if this SectionPlane is active or not.
+	 *
+	 * Default value is ````true````.
+	 *
+	 * @returns {Boolean} Returns ````true```` if active.
+	 */
+	get active() {
+		return this._state.active;
+	}
 
-    /**
-     * Gets the World-space position of this SectionPlane's plane.
-     *
-     * Default value is ````[0, 0, 0]````.
-     *
-     * @returns {Number[]} Current position.
-     */
-    get pos() {
-        return this._state.pos;
-    }
+	/**
+	 * Sets the World-space position of this SectionPlane's plane.
+	 *
+	 * Default value is ````[0, 0, 0]````.
+	 *
+	 * @param {Number[]} value New position.
+	 */
+	set pos(value) {
+		this._state.pos.set(value || [0, 0, 0]);
+		this._state.dist = -math.dotVec3(this._state.pos, this._state.dir);
+		this.fire("pos", this._state.pos);
+		this.scene.fire("sectionPlaneUpdated", this);
+	}
 
-    /**
-     * Sets the direction of this SectionPlane's plane.
-     *
-     * Default value is ````[0, 0, -1]````.
-     *
-     * @param {Number[]} value New direction.
-     */
-    set dir(value) {
-        this._state.dir.set(value || [0, 0, -1]);
-        this._state.dist = (-math.dotVec3(this._state.pos, this._state.dir));
-        this.glRedraw();
-        this.fire("dir", this._state.dir);
-        this.scene.fire("sectionPlaneUpdated", this);
-    }
+	/**
+	 * Gets the World-space position of this SectionPlane's plane.
+	 *
+	 * Default value is ````[0, 0, 0]````.
+	 *
+	 * @returns {Number[]} Current position.
+	 */
+	get pos() {
+		return this._state.pos;
+	}
 
-    /**
-     * Gets the direction of this SectionPlane's plane.
-     *
-     * Default value is ````[0, 0, -1]````.
-     *
-     * @returns {Number[]} value Current direction.
-     */
-    get dir() {
-        return this._state.dir;
-    }
+	/**
+	 * Sets the direction of this SectionPlane's plane.
+	 *
+	 * Default value is ````[0, 0, -1]````.
+	 *
+	 * @param {Number[]} value New direction.
+	 */
+	set dir(value) {
+		this._state.dir.set(value || [0, 0, -1]);
+		this._state.dist = -math.dotVec3(this._state.pos, this._state.dir);
+		this.glRedraw();
+		this.fire("dir", this._state.dir);
+		this.scene.fire("sectionPlaneUpdated", this);
+	}
 
-    /**
-     * Gets this SectionPlane's distance to the origin of the World-space coordinate system.
-     *
-     * This is the dot product of {@link SectionPlane#pos} and {@link SectionPlane#dir} and is automatically re-calculated
-     * each time either of two properties are updated.
-     *
-     * @returns {Number}
-     */
-    get dist() {
-        return this._state.dist;
-    }
+	/**
+	 * Gets the direction of this SectionPlane's plane.
+	 *
+	 * Default value is ````[0, 0, -1]````.
+	 *
+	 * @returns {Number[]} value Current direction.
+	 */
+	get dir() {
+		return this._state.dir;
+	}
 
-    /**
-     * Inverts the direction of {@link SectionPlane#dir}.
-     */
-    flipDir() {
-        const dir = this._state.dir;
-        dir[0] *= -1.0;
-        dir[1] *= -1.0;
-        dir[2] *= -1.0;
-        this._state.dist = (-math.dotVec3(this._state.pos, this._state.dir));
-        this.fire("dir", this._state.dir);
-        this.glRedraw();
-    }
+	/**
+	 * Gets this SectionPlane's distance to the origin of the World-space coordinate system.
+	 *
+	 * This is the dot product of {@link SectionPlane#pos} and {@link SectionPlane#dir} and is automatically re-calculated
+	 * each time either of two properties are updated.
+	 *
+	 * @returns {Number}
+	 */
+	get dist() {
+		return this._state.dist;
+	}
 
-    /**
-     * @destroy
-     */
-    destroy() {
-        this._state.destroy();
-        this.scene._sectionPlaneDestroyed(this);
-        super.destroy();
-    }
+	/**
+	 * Inverts the direction of {@link SectionPlane#dir}.
+	 */
+	flipDir() {
+		const dir = this._state.dir;
+		dir[0] *= -1.0;
+		dir[1] *= -1.0;
+		dir[2] *= -1.0;
+		this._state.dist = -math.dotVec3(this._state.pos, this._state.dir);
+		this.fire("dir", this._state.dir);
+		this.glRedraw();
+	}
+
+	/**
+	 * @destroy
+	 */
+	destroy() {
+		this._state.destroy();
+		this.scene._sectionPlaneDestroyed(this);
+		super.destroy();
+	}
 }
 
 const angleAxis$1 = math.vec4(4);
@@ -87717,7 +87724,7 @@ class DistanceMeasurementsPlugin extends Plugin {
 	 * @param {boolean} [cfg.defaultXAxisVisible=true] The default value of the DistanceMeasurements `xAxisVisible` property.
 	 * @param {boolean} [cfg.defaultYAxisVisible=true] The default value of the DistanceMeasurements `yAxisVisible` property.
 	 * @param {boolean} [cfg.defaultZAxisVisible=true] The default value of the DistanceMeasurements `zAxisVisible` property.
-	 * @param {string} [cfg.defaultColor=#00BBFF] The default color of the length dots, wire and label.
+	 * @param {string} [cfg.defaultColor=#0065fc] The default color of the length dots, wire and label.
 	 * @param {number} [cfg.zIndex] If set, the wires, dots and labels will have this zIndex (+1 for dots and +2 for labels).
 	 * @param {boolean} [cfg.defaultLabelsOnWires=true] The default value of the DistanceMeasurements `labelsOnWires` property.
 	 * @param {PointerCircle} [cfg.pointerLens] A PointerLens to help the user position the pointer. This can be shared with other plugins.
@@ -87744,7 +87751,7 @@ class DistanceMeasurementsPlugin extends Plugin {
 		this.defaultXAxisVisible = cfg.defaultXAxisVisible !== false;
 		this.defaultYAxisVisible = cfg.defaultYAxisVisible !== false;
 		this.defaultZAxisVisible = cfg.defaultZAxisVisible !== false;
-		this.defaultColor = cfg.defaultColor !== undefined ? cfg.defaultColor : "#00BBFF";
+		this.defaultColor = cfg.defaultColor !== undefined ? cfg.defaultColor : "#0065fc";
 		this.zIndex = cfg.zIndex || 10000;
 		this.defaultLabelsOnWires = cfg.defaultLabelsOnWires !== false;
 
@@ -91342,7 +91349,7 @@ CameraPathAnimation.PLAYING_TO = 3;
 const tempVec3$3 = math.vec3();
 const tempVec3b$5 = math.vec3();
 math.vec3();
-const zeroVec$2 = math.vec3([0, -1, 0]);
+const zeroVec$4 = math.vec3([0, -1, 0]);
 const tempQuat = math.vec4([0, 0, 0, 1]);
 
 /**
@@ -91769,7 +91776,7 @@ class ImagePlane extends Component {
 
             math.normalizeVec3(negDir);
             math.mulVec3Scalar(negDir, dist, tempVec3b$5);
-            math.vec3PairToQuaternion(zeroVec$2, dir, tempQuat);
+            math.vec3PairToQuaternion(zeroVec$4, dir, tempQuat);
 
             this._node.quaternion = tempQuat;
         }
@@ -95195,7 +95202,7 @@ class MousePanRotateDollyHandler {
 
 		let mouseMovedOnCanvasSinceLastWheel = true;
 
-		const canvas = this._scene.canvas.canvas;
+		this.canvas = this._scene.canvas.canvas;
 
 		const keyDown = [];
 
@@ -95221,13 +95228,13 @@ class MousePanRotateDollyHandler {
 			})
 		);
 
-		function setMousedownState(pick = true) {
-			canvas.style.cursor = "move";
+		const setMousedownState = (pick = true) => {
+			this.canvas.style.cursor = "move";
 			setMousedownPositions();
 			if (pick) {
 				setMousedownPick();
 			}
-		}
+		};
 
 		function setMousedownPositions() {
 
@@ -95255,7 +95262,7 @@ class MousePanRotateDollyHandler {
 			}
 		}
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"mousedown",
 			(this._mouseDownHandler = (e) => {
 				if (!(configs.active && configs.pointerEnabled)) {
@@ -95362,7 +95369,7 @@ class MousePanRotateDollyHandler {
 			})
 		);
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"mousemove",
 			(this._canvasMouseMoveHandler = (e) => {
 				if (!(configs.active && configs.pointerEnabled)) {
@@ -95403,7 +95410,7 @@ class MousePanRotateDollyHandler {
 			})
 		);
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"mouseup",
 			(this._mouseUpHandler = (e) => {
 				if (!(configs.active && configs.pointerEnabled)) {
@@ -95428,11 +95435,11 @@ class MousePanRotateDollyHandler {
 						}
 						break;
 				}
-				canvas.style.removeProperty("cursor");
+				this.canvas.style.removeProperty("cursor");
 			})
 		);
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"mouseenter",
 			(this._mouseEnterHandler = () => {
 				if (!(configs.active && configs.pointerEnabled)) {
@@ -95446,7 +95453,7 @@ class MousePanRotateDollyHandler {
 
 		let secsNowLast = null;
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"wheel",
 			(this._mouseWheelHandler = (e) => {
 				e.preventDefault();
@@ -95480,18 +95487,17 @@ class MousePanRotateDollyHandler {
 	reset() {}
 
 	destroy() {
-		const canvas = this._scene.canvas.canvas;
-		if (canvas) {
-			document.removeEventListener("keydown", this._documentKeyDownHandler);
-			document.removeEventListener("keyup", this._documentKeyUpHandler);
-			canvas.removeEventListener("mousedown", this._mouseDownHandler);
-			document.removeEventListener("mousemove", this._documentMouseMoveHandler);
-			canvas.removeEventListener("mousemove", this._canvasMouseMoveHandler);
-			document.removeEventListener("mouseup", this._documentMouseUpHandler);
-			canvas.removeEventListener("mouseup", this._mouseUpHandler);
-			canvas.removeEventListener("mouseenter", this._mouseEnterHandler);
-			canvas.removeEventListener("wheel", this._mouseWheelHandler);
+		if (this.canvas != null) {
+			this.canvas.removeEventListener("mousedown", this._mouseDownHandler);
+			this.canvas.removeEventListener("mousemove", this._canvasMouseMoveHandler);
+			this.canvas.removeEventListener("mouseup", this._mouseUpHandler);
+			this.canvas.removeEventListener("mouseenter", this._mouseEnterHandler);
+			this.canvas.removeEventListener("wheel", this._mouseWheelHandler);
 		}
+		document.removeEventListener("keydown", this._documentKeyDownHandler);
+		document.removeEventListener("keyup", this._documentKeyUpHandler);
+		document.removeEventListener("mousemove", this._documentMouseMoveHandler);
+		document.removeEventListener("mouseup", this._documentMouseUpHandler);
 	}
 }
 
@@ -95502,116 +95508,113 @@ const tempVec3c$1 = math.vec3();
 const tempVec3d = math.vec3();
 
 const tempCameraTarget = {
-    eye: math.vec3(),
-    look: math.vec3(),
-    up: math.vec3()
+	eye: math.vec3(),
+	look: math.vec3(),
+	up: math.vec3()
 };
 
 /**
  * @private
  */
 class KeyboardAxisViewHandler {
+	constructor(scene, controllers, configs, states) {
+		this._scene = scene;
+		this.input = scene.input;
+		const cameraControl = controllers.cameraControl;
+		const camera = scene.camera;
 
-    constructor(scene, controllers, configs, states) {
-
-        this._scene = scene;
-        const cameraControl = controllers.cameraControl;
-        const camera = scene.camera;
-
-        this._onSceneKeyDown = scene.input.on("keydown", () => {
-
-            if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
-                return;
-            }
-
-            if (!states.mouseover) {
-                return;
-            }
-
-            const axisViewRight = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_RIGHT);
-            const axisViewBack = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_BACK);
-            const axisViewLeft = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_LEFT);
-            const axisViewFront = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_FRONT);
-            const axisViewTop = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_TOP);
-            const axisViewBottom = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_BOTTOM);
-
-            if ((!axisViewRight) && (!axisViewBack) && (!axisViewLeft) && (!axisViewFront) && (!axisViewTop) && (!axisViewBottom)) {
-                return;
-            }
-
-            const aabb = scene.aabb;
-            const diag = math.getAABB3Diag(aabb);
-
-            math.getAABB3Center(aabb, center);
-
-            const perspectiveDist = Math.abs(diag / Math.tan(controllers.cameraFlight.fitFOV * math.DEGTORAD));
-            const orthoScale = diag * 1.1;
-
-            tempCameraTarget.orthoScale = orthoScale;
-
-            if (axisViewRight) {
-
-                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldRight, perspectiveDist, tempVec3a$5), tempVec3d));
-                tempCameraTarget.look.set(center);
-                tempCameraTarget.up.set(camera.worldUp);
-
-            } else if (axisViewBack) {
-
-                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldForward, perspectiveDist, tempVec3a$5), tempVec3d));
-                tempCameraTarget.look.set(center);
-                tempCameraTarget.up.set(camera.worldUp);
-
-            } else if (axisViewLeft) {
+		this._onSceneKeyDown = scene.input.on("keydown", () => {
+			if (!(configs.active && configs.pointerEnabled) || !scene.input.keyboardEnabled) {
+				return;
+			}
 
-                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldRight, -perspectiveDist, tempVec3a$5), tempVec3d));
-                tempCameraTarget.look.set(center);
-                tempCameraTarget.up.set(camera.worldUp);
+			if (!states.mouseover) {
+				return;
+			}
 
-            } else if (axisViewFront) {
+			const axisViewRight = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_RIGHT);
+			const axisViewBack = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_BACK);
+			const axisViewLeft = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_LEFT);
+			const axisViewFront = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_FRONT);
+			const axisViewTop = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_TOP);
+			const axisViewBottom = cameraControl._isKeyDownForAction(cameraControl.AXIS_VIEW_BOTTOM);
 
-                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldForward, -perspectiveDist, tempVec3a$5), tempVec3d));
-                tempCameraTarget.look.set(center);
-                tempCameraTarget.up.set(camera.worldUp);
+			if (!axisViewRight && !axisViewBack && !axisViewLeft && !axisViewFront && !axisViewTop && !axisViewBottom) {
+				return;
+			}
 
-            } else if (axisViewTop) {
+			const aabb = scene.aabb;
+			const diag = math.getAABB3Diag(aabb);
 
-                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldUp, perspectiveDist, tempVec3a$5), tempVec3d));
-                tempCameraTarget.look.set(center);
-                tempCameraTarget.up.set(math.normalizeVec3(math.mulVec3Scalar(camera.worldForward, 1, tempVec3b$2), tempVec3c$1));
+			math.getAABB3Center(aabb, center);
 
-            } else if (axisViewBottom) {
+			const perspectiveDist = Math.abs(diag / Math.tan(controllers.cameraFlight.fitFOV * math.DEGTORAD));
+			const orthoScale = diag * 1.1;
 
-                tempCameraTarget.eye.set(math.addVec3(center, math.mulVec3Scalar(camera.worldUp, -perspectiveDist, tempVec3a$5), tempVec3d));
-                tempCameraTarget.look.set(center);
-                tempCameraTarget.up.set(math.normalizeVec3(math.mulVec3Scalar(camera.worldForward, -1, tempVec3b$2)));
-            }
+			tempCameraTarget.orthoScale = orthoScale;
 
-            if ((!configs.firstPerson) && configs.followPointer) {
-                controllers.pivotController.setPivotPos(center);
-            }
+			if (axisViewRight) {
+				tempCameraTarget.eye.set(
+					math.addVec3(center, math.mulVec3Scalar(camera.worldRight, perspectiveDist, tempVec3a$5), tempVec3d)
+				);
+				tempCameraTarget.look.set(center);
+				tempCameraTarget.up.set(camera.worldUp);
+			} else if (axisViewBack) {
+				tempCameraTarget.eye.set(
+					math.addVec3(center, math.mulVec3Scalar(camera.worldForward, perspectiveDist, tempVec3a$5), tempVec3d)
+				);
+				tempCameraTarget.look.set(center);
+				tempCameraTarget.up.set(camera.worldUp);
+			} else if (axisViewLeft) {
+				tempCameraTarget.eye.set(
+					math.addVec3(center, math.mulVec3Scalar(camera.worldRight, -perspectiveDist, tempVec3a$5), tempVec3d)
+				);
+				tempCameraTarget.look.set(center);
+				tempCameraTarget.up.set(camera.worldUp);
+			} else if (axisViewFront) {
+				tempCameraTarget.eye.set(
+					math.addVec3(center, math.mulVec3Scalar(camera.worldForward, -perspectiveDist, tempVec3a$5), tempVec3d)
+				);
+				tempCameraTarget.look.set(center);
+				tempCameraTarget.up.set(camera.worldUp);
+			} else if (axisViewTop) {
+				tempCameraTarget.eye.set(
+					math.addVec3(center, math.mulVec3Scalar(camera.worldUp, perspectiveDist, tempVec3a$5), tempVec3d)
+				);
+				tempCameraTarget.look.set(center);
+				tempCameraTarget.up.set(math.normalizeVec3(math.mulVec3Scalar(camera.worldForward, 1, tempVec3b$2), tempVec3c$1));
+			} else if (axisViewBottom) {
+				tempCameraTarget.eye.set(
+					math.addVec3(center, math.mulVec3Scalar(camera.worldUp, -perspectiveDist, tempVec3a$5), tempVec3d)
+				);
+				tempCameraTarget.look.set(center);
+				tempCameraTarget.up.set(math.normalizeVec3(math.mulVec3Scalar(camera.worldForward, -1, tempVec3b$2)));
+			}
 
-            if (controllers.cameraFlight.duration > 0) {
-                controllers.cameraFlight.flyTo(tempCameraTarget, () => {
-                    if (controllers.pivotController.getPivoting() && configs.followPointer) {
-                        controllers.pivotController.showPivot();
-                    }
-                });
+			if (!configs.firstPerson && configs.followPointer) {
+				controllers.pivotController.setPivotPos(center);
+			}
 
-            } else {
-                controllers.cameraFlight.jumpTo(tempCameraTarget);
-                if (controllers.pivotController.getPivoting() && configs.followPointer) {
-                    controllers.pivotController.showPivot();
-                }
-            }
-        });
-    }
+			if (controllers.cameraFlight.duration > 0) {
+				controllers.cameraFlight.flyTo(tempCameraTarget, () => {
+					if (controllers.pivotController.getPivoting() && configs.followPointer) {
+						controllers.pivotController.showPivot();
+					}
+				});
+			} else {
+				controllers.cameraFlight.jumpTo(tempCameraTarget);
+				if (controllers.pivotController.getPivoting() && configs.followPointer) {
+					controllers.pivotController.showPivot();
+				}
+			}
+		});
+	}
 
-    reset() {
-    }
+	reset() {}
 
-    destroy() {
-        this._scene.input.off(this._onSceneKeyDown);
-    }
+	destroy() {
+		this.input.off(this._onSceneKeyDown);
+	}
 }
 
 /**
@@ -95632,7 +95635,7 @@ class MousePickHandler {
 		let leftDown = false;
 		let rightDown = false;
 
-		const canvas = this._scene.canvas.canvas;
+		this.canvas = this._scene.canvas.canvas;
 
 		const tickifiedMouseMoveFn = scene.tickify(
 			(this._canvasMouseMoveHandler = (e) => {
@@ -95714,8 +95717,8 @@ class MousePickHandler {
 			})
 		);
 
-		canvas.addEventListener("mousemove", tickifiedMouseMoveFn);
-		canvas.addEventListener(
+		this.canvas.addEventListener("mousemove", tickifiedMouseMoveFn);
+		this.canvas.addEventListener(
 			"dblclick",
 			(this._canvasDblClickHandler = (e) => {
 				states.mouseDownClientX = e.clientX;
@@ -95746,7 +95749,7 @@ class MousePickHandler {
 			})
 		);
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"mousedown",
 			(this._canvasMouseDownHandler = (e) => {
 				if (e.which === 1) {
@@ -95818,7 +95821,7 @@ class MousePickHandler {
 			})
 		);
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"mouseup",
 			(this._canvasMouseUpHandler = (e) => {
 				if (!(configs.active && configs.pointerEnabled)) {
@@ -95992,12 +95995,13 @@ class MousePickHandler {
 	}
 
 	destroy() {
-		const canvas = this._scene.canvas.canvas;
-		canvas.removeEventListener("mousemove", this._canvasMouseMoveHandler);
-		canvas.removeEventListener("mousedown", this._canvasMouseDownHandler);
-		canvas.removeEventListener("dblclick", this._canvasDblClickHandler);
+		if (this.canvas != null) {
+			this.canvas.removeEventListener("mousemove", this._canvasMouseMoveHandler);
+			this.canvas.removeEventListener("mousedown", this._canvasMouseDownHandler);
+			this.canvas.removeEventListener("dblclick", this._canvasDblClickHandler);
+			this.canvas.removeEventListener("mouseup", this._canvasMouseUpHandler);
+		}
 		document.removeEventListener("mouseup", this._documentMouseUpHandler);
-		canvas.removeEventListener("mouseup", this._canvasMouseUpHandler);
 		if (this._timeout) {
 			window.clearTimeout(this._timeout);
 			this._timeout = null;
@@ -96013,7 +96017,7 @@ class KeyboardPanRotateDollyHandler {
 		this._scene = scene;
 		this._updates = updates;
 		const input = scene.input;
-
+		this.input = input;
 		const keyDownMap = [];
 
 		const canvas = scene.canvas.canvas;
@@ -96167,9 +96171,9 @@ class KeyboardPanRotateDollyHandler {
 	destroy() {
 		this._scene.off(this._onTick);
 
-		this._scene.input.off(this._onSceneMouseMove);
-		this._scene.input.off(this._onSceneKeyDown);
-		this._scene.input.off(this._onSceneKeyUp);
+		this.input.off(this._onSceneMouseMove);
+		this.input.off(this._onSceneKeyDown);
+		this.input.off(this._onSceneKeyUp);
 	}
 }
 
@@ -96489,42 +96493,42 @@ class MouseMiscHandler {
 	constructor(scene, controllers, configs, states, updates) {
 		this._scene = scene;
 
-		const canvas = this._scene.canvas.canvas;
+		this.canvas = this._scene.canvas.canvas;
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"mouseenter",
 			(this._mouseEnterHandler = () => {
 				states.mouseover = true;
 			})
 		);
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"mouseleave",
 			(this._mouseLeaveHandler = () => {
 				states.mouseover = false;
-				canvas.style.cursor = null;
+				this.canvas.style.cursor = null;
 			})
 		);
 
 		document.addEventListener(
 			"mousemove",
 			(this._mouseMoveHandler = (e) => {
-				getCanvasPosFromEvent$2(e, canvas, states.pointerCanvasPos);
+				getCanvasPosFromEvent$2(e, this.canvas, states.pointerCanvasPos);
 			})
 		);
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"mousedown",
 			(this._mouseDownHandler = (e) => {
 				if (!(configs.active && configs.pointerEnabled)) {
 					return;
 				}
-				getCanvasPosFromEvent$2(e, canvas, states.pointerCanvasPos);
+				getCanvasPosFromEvent$2(e, this.canvas, states.pointerCanvasPos);
 				states.mouseover = true;
 			})
 		);
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"mouseup",
 			(this._mouseUpHandler = (e) => {
 				if (!(configs.active && configs.pointerEnabled)) {
@@ -96537,16 +96541,15 @@ class MouseMiscHandler {
 	reset() {}
 
 	destroy() {
-		const canvas = this._scene.canvas.canvas;
 		//网络问题导致的模型加载失败等情况时，如果切换模型，会找不到canvas
 		//因此暂时在此加判断
-		if (canvas) {
-			document.removeEventListener("mousemove", this._mouseMoveHandler);
-			canvas.removeEventListener("mouseenter", this._mouseEnterHandler);
-			canvas.removeEventListener("mouseleave", this._mouseLeaveHandler);
-			canvas.removeEventListener("mousedown", this._mouseDownHandler);
-			canvas.removeEventListener("mouseup", this._mouseUpHandler);
+		if (this.canvas != null) {
+			this.canvas.removeEventListener("mouseenter", this._mouseEnterHandler);
+			this.canvas.removeEventListener("mouseleave", this._mouseLeaveHandler);
+			this.canvas.removeEventListener("mousedown", this._mouseDownHandler);
+			this.canvas.removeEventListener("mouseup", this._mouseUpHandler);
 		}
+		document.removeEventListener("mousemove", this._mouseMoveHandler);
 	}
 }
 
@@ -96599,7 +96602,7 @@ class TouchPanRotateAndDollyHandler {
 		const touch0Vec = math.vec2();
 
 		const lastCanvasTouchPosList = [];
-		const canvas = this._scene.canvas.canvas;
+		this.canvas = this._scene.canvas.canvas;
 
 		let numTouches = 0;
 		let waitForTick = false;
@@ -96608,7 +96611,7 @@ class TouchPanRotateAndDollyHandler {
 			waitForTick = false;
 		});
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"touchstart",
 			(this._canvasTouchStartHandler = (event) => {
 				if (!(configs.active && configs.pointerEnabled)) {
@@ -96674,7 +96677,7 @@ class TouchPanRotateAndDollyHandler {
 			})
 		);
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"touchend",
 			(this._canvasTouchEndHandler = () => {
 				if (pivotController.getPivoting()) {
@@ -96683,9 +96686,9 @@ class TouchPanRotateAndDollyHandler {
 				}
 			})
 		);
-		canvas.addEventListener("touchcancel", this._canvasTouchEndHandler);
+		this.canvas.addEventListener("touchcancel", this._canvasTouchEndHandler);
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"touchmove",
 			(this._canvasTouchMoveHandler = (event) => {
 				if (!(configs.active && configs.pointerEnabled)) {
@@ -96831,11 +96834,12 @@ class TouchPanRotateAndDollyHandler {
 	reset() {}
 
 	destroy() {
-		const canvas = this._scene.canvas.canvas;
-		canvas.removeEventListener("touchstart", this._canvasTouchStartHandler);
-		canvas.removeEventListener("touchend", this._canvasTouchEndHandler);
-		canvas.removeEventListener("touchcancel", this._canvasTouchEndHandler);
-		canvas.removeEventListener("touchmove", this._canvasTouchMoveHandler);
+		if (this.canvas != null) {
+			this.canvas.removeEventListener("touchstart", this._canvasTouchStartHandler);
+			this.canvas.removeEventListener("touchend", this._canvasTouchEndHandler);
+			this.canvas.removeEventListener("touchcancel", this._canvasTouchEndHandler);
+			this.canvas.removeEventListener("touchmove", this._canvasTouchMoveHandler);
+		}
 		this._scene.off(this._onTick);
 	}
 }
@@ -96880,7 +96884,7 @@ class TouchPickHandler {
 		let tapStartTime = -1;
 		let lastTapTime = -1;
 
-		const canvas = this._scene.canvas.canvas;
+		this.canvas = this._scene.canvas.canvas;
 
 		const flyCameraTo = (pickResult) => {
 			let pos;
@@ -96904,7 +96908,7 @@ class TouchPickHandler {
 			}
 		};
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"touchstart",
 			(this._canvasTouchStartHandler = (e) => {
 				if (!(configs.active && configs.pointerEnabled)) {
@@ -96982,7 +96986,7 @@ class TouchPickHandler {
 			{ passive: true }
 		);
 
-		canvas.addEventListener(
+		this.canvas.addEventListener(
 			"touchend",
 			(this._canvasTouchEndHandler = (e) => {
 				if (!(configs.active && configs.pointerEnabled)) {
@@ -97079,7 +97083,7 @@ class TouchPickHandler {
 			{ passive: true }
 		);
 
-		canvas.addEventListener("touchcancel", this._canvasTouchEndHandler);
+		this.canvas.addEventListener("touchcancel", this._canvasTouchEndHandler);
 	}
 
 	reset() {
@@ -97089,10 +97093,11 @@ class TouchPickHandler {
 	}
 
 	destroy() {
-		const canvas = this._scene.canvas.canvas;
-		canvas.removeEventListener("touchstart", this._canvasTouchStartHandler);
-		canvas.removeEventListener("touchend", this._canvasTouchEndHandler);
-		canvas.removeEventListener("touchcancel", this._canvasTouchEndHandler);
+		if (this.canvas != null) {
+			this.canvas.removeEventListener("touchstart", this._canvasTouchStartHandler);
+			this.canvas.removeEventListener("touchend", this._canvasTouchEndHandler);
+			this.canvas.removeEventListener("touchcancel", this._canvasTouchEndHandler);
+		}
 	}
 }
 
@@ -108381,13 +108386,16 @@ class Viewer {
 		this._snapshotBegun = false;
 	}
 
-	/** Destroys this Viewer.
+	/**
+	 * Destroys this Viewer.
 	 */
 	destroy(callback) {
 		const plugins = this._plugins.slice(); // Array will modify as we delete plugins
-		for (let i = 0, len = plugins.length; i < len; i++) {
-			const plugin = plugins[i];
-			plugin.destroy();
+		if (plugins.length > 0) {
+			for (let i = 0, len = plugins.length; i < len; i++) {
+				const plugin = plugins[i];
+				plugin.destroy();
+			}
 		}
 		this.cameraControl.destroy();
 		this.scene.destroy(callback);
@@ -118020,7 +118028,6 @@ class NavCubePlugin extends Plugin {
 					if (hit) {
 						if (hit.uv) {
 							var areaId = self._cubeTextureCanvas.getArea(hit.uv);
-							console.log(areaId);
 							if (areaId >= 0) {
 								document.body.style.cursor = "pointer";
 								if (lastAreaId >= 0) {
@@ -118042,8 +118049,6 @@ class NavCubePlugin extends Plugin {
 											dir = rotateTrueNorth(+1, dir, tempVec3a$4);
 											up = rotateTrueNorth(+1, up, tempVec3b$1);
 										}
-										console.log(dir);
-										console.log(up);
 										flyTo(dir, up, function () {
 											if (lastAreaId >= 0) {
 												self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
@@ -119330,8 +119335,8 @@ class OBJLoaderPlugin extends Plugin {
     }
 }
 
-const zeroVec$1 = new Float64Array([0, 0, 1]);
-const quat$1 = new Float64Array(4);
+const zeroVec$3 = new Float64Array([0, 0, 1]);
+const quat$3 = new Float64Array(4);
 
 /**
  * Controls a {@link SectionPlane} with mouse and touch input.
@@ -119350,8 +119355,10 @@ class Control {
 		 * @type {String|Number}
 		 */
 		this.id = null;
+		this.type = "control";
 
 		this._viewer = plugin.viewer;
+		this._scene = plugin.viewer.scene;
 
 		this._visible = false;
 		this._pos = math.vec3(); // Full-precision position of the center of the Control
@@ -119409,6 +119416,44 @@ class Control {
 		return this._sectionPlane;
 	}
 
+	/**
+	 * 设置剖切面位置
+	 * @param {any} value
+	 */
+	set pos(posRate) {
+		if (posRate < 0 || posRate > 100) return;
+
+		const { aabb } = this._scene;
+		const { look } = this._scene.camera;
+		const xRange = aabb[3] - aabb[0]; //前后
+		const yRange = aabb[4] - aabb[1]; //上下
+		const zRange = aabb[5] - aabb[2]; //左右
+
+		const newSectionPos = math.vec3();
+		newSectionPos[0] = this.pos[0];
+		newSectionPos[1] = this.pos[1];
+		newSectionPos[2] = this.pos[2];
+
+		const { dir } = this._sectionPlane;
+		let rateDis;
+		if (dir[0] != 0) {
+			rateDis = (posRate / 100) * xRange;
+			newSectionPos[0] = look[0] - xRange / 2 + rateDis;
+		} else if (dir[1] != 0) {
+			rateDis = (posRate / 100) * yRange;
+			newSectionPos[1] = look[1] - yRange / 2 + rateDis;
+		} else if (dir[2] != 0) {
+			rateDis = (posRate / 100) * zRange;
+			newSectionPos[2] = look[2] - zRange / 2 + rateDis;
+		}
+
+		this._sectionPlane.pos = newSectionPos;
+	}
+
+	get pos() {
+		return this._pos;
+	}
+
 	/** @private */
 	_setPos(xyz) {
 		this._pos.set(xyz);
@@ -119422,7 +119467,7 @@ class Control {
 	/** @private */
 	_setDir(xyz) {
 		this._baseDir.set(xyz);
-		this._rootNode.quaternion = math.vec3PairToQuaternion(zeroVec$1, xyz, quat$1);
+		this._rootNode.quaternion = math.vec3PairToQuaternion(zeroVec$3, xyz, quat$3);
 	}
 
 	_setSectionPlaneDir(dir) {
@@ -120817,7 +120862,6 @@ class Control {
 			);
 
 			this._onCameraControlHover = this._viewer.cameraControl.on("touchEntity", (hit) => {
-				console.log("111");
 				if (!this._visible || down || grabbed) return;
 				grabbed = false;
 				if (lastAffordanceMesh) {
@@ -120885,7 +120929,6 @@ class Control {
 			canvas.addEventListener(
 				"touchstart",
 				(this._canvasMouseDownListener = (e) => {
-					console.log("222");
 					e.preventDefault();
 					if (!this._visible || !grabbed) return;
 
@@ -120936,7 +120979,7 @@ class Control {
 			canvas.addEventListener(
 				"touchend",
 				(this._canvasTouchEndListener = (e) => {
-					// if (!this._visible) return;
+					if (!this._visible) return;
 					this._viewer.cameraControl.pointerEnabled = true;
 					if (lastAffordanceMesh) {
 						lastAffordanceMesh.visible = false;
@@ -120987,407 +121030,2033 @@ class Control {
 	}
 }
 
+const zeroVec$2 = new Float64Array([0, 0, 1]);
+const quat$2 = new Float64Array(4);
+
 /**
- * Renders a 3D plane within an {@link Overview} to indicate its {@link SectionPlane}'s current position and orientation.
+ * Controls a {@link SectionPlane} with mouse and touch input.
  *
  * @private
  */
-class Plane$1 {
-
-    /** @private */
-    constructor(overview, overviewScene, sectionPlane) {
-
-        /**
-         * The ID of this SectionPlanesOverviewPlane.
-         *
-         * @type {String}
-         */
-        this.id = sectionPlane.id;
-
-        /**
-         * The {@link SectionPlane} represented by this SectionPlanesOverviewPlane.
-         *
-         * @type {SectionPlane}
-         */
-        this._sectionPlane = sectionPlane;
-
-        this._mesh = new Mesh(overviewScene, {
-            id: sectionPlane.id,
-            geometry: new ReadableGeometry(overviewScene, buildBoxGeometry({
-                xSize: .5,
-                ySize: .5,
-                zSize: .001
-            })),
-            material: new PhongMaterial(overviewScene, {
-                emissive: [1, 1, 1],
-                diffuse: [0, 0, 0],
-                backfaces: false
-            }),
-            edgeMaterial: new EdgeMaterial(overviewScene, {
-                edgeColor: [0.0, 0.0, 0.0],
-                edgeAlpha: 1.0,
-                edgeWidth: 1
-            }),
-            highlightMaterial: new EmphasisMaterial(overviewScene, {
-                fill: true,
-                fillColor: [0.5, 1, 0.5],
-                fillAlpha: 0.7,
-                edges: true,
-                edgeColor: [0.0, 0.0, 0.0],
-                edgeAlpha: 1.0,
-                edgeWidth: 1
-            }),
-            selectedMaterial: new EmphasisMaterial(overviewScene, {
-                fill: true,
-                fillColor: [0, 0, 1],
-                fillAlpha: 0.7,
-                edges: true,
-                edgeColor: [1.0, 0.0, 0.0],
-                edgeAlpha: 1.0,
-                edgeWidth: 1
-            }),
-            highlighted: true,
-            scale: [3, 3, 3],
-            position: [0, 0, 0],
-            rotation: [0, 0, 0],
-            opacity: 0.3,
-            edges: true
-        });
-
-
-        {
-            const vec = math.vec3([0, 0, 0]);
-            const pos2 = math.vec3();
-            const zeroVec = math.vec3([0, 0, 1]);
-            const quat = math.vec4(4);
-            const pos3 = math.vec3();
-
-            const update = () => {
-
-                const origin = this._sectionPlane.scene.center;
+class ClippingBox {
+	/** @private */
+	constructor(plugin, cfg) {
+		/**
+		 * ID of this Control.
+		 *
+		 * SectionPlaneControls are mapped by this ID in {@link SectionPlanesPlugin#sectionPlaneControls}.
+		 *
+		 * @property id
+		 * @type {String|Number}
+		 */
+		this.id = null;
+		this.type = "box";
 
-                const negDir = [-this._sectionPlane.dir[0], -this._sectionPlane.dir[1], -this._sectionPlane.dir[2]];
-                math.subVec3(origin, this._sectionPlane.pos, vec);
-                const dist = -math.dotVec3(negDir, vec);
+		this._viewer = plugin.viewer;
+		this._scene = plugin.viewer.scene;
 
-                math.normalizeVec3(negDir);
-                math.mulVec3Scalar(negDir, dist, pos2);
-                const quaternion = math.vec3PairToQuaternion(zeroVec, this._sectionPlane.dir, quat);
+		this._controlFillColor = !!cfg && !!cfg.controlFillColor ? cfg.controlFillColor : [0.1, 0.4, 0.99];
+		this._planeSize = !!cfg && !!cfg.planeSize ? cfg.planeSize : 1;
+		this._controlSize = !!cfg && !!cfg.controlSize ? cfg.controlSize : 0.07;
+		this._planeOpacity = !!cfg && !!cfg.planeOpacity ? cfg.planeOpacity : 0.4;
 
-                pos3[0] = pos2[0] * 0.1;
-                pos3[1] = pos2[1] * 0.1;
-                pos3[2] = pos2[2] * 0.1;
+		this._visible = false;
+		this._pos = math.vec3(); // Full-precision position of the center of the Control
+		this._origin = math.vec3();
+		this._rtcPos = math.vec3();
 
-                this._mesh.quaternion = quaternion;
-                this._mesh.position = pos3;
-            };
+		this._baseDir = math.vec3(); // Saves direction of clip plane when we start dragging an arrow or ring.
+		this._rootNode = null; // Root of Node graph that represents this control in the 3D scene
+		this._displayMeshes = null; // Meshes that are always visible
+		this._affordanceMeshes = null; // Meshes displayed momentarily for affordance
 
-            this._onSectionPlanePos = this._sectionPlane.on("pos", update);
-            this._onSectionPlaneDir = this._sectionPlane.on("dir", update);
+		this._ignoreNextSectionPlaneDirUpdate = false;
 
-            // update();
-        }
+		this._createNodes();
+		this._bindEvents();
+	}
 
-        this._highlighted = false;
-        this._selected = false;
-    }
+	/**
+	 * Called by SectionPlanesPlugin to assign this Control to a SectionPlane.
+	 * SectionPlanesPlugin keeps SectionPlaneControls in a reuse pool.
+	 * Call with a null or undefined value to disconnect the Control ffrom whatever SectionPlane it was assigned to.
+	 * @private
+	 */
+	_setSectionPlane(sectionPlane) {
+		if (this._sectionPlane) {
+			this._sectionPlane.off(this._onSectionPlanePos);
+			this._sectionPlane.off(this._onSectionPlaneDir);
+			this._onSectionPlanePos = null;
+			this._onSectionPlaneDir = null;
+			this._sectionPlane = null;
+		}
+		if (sectionPlane) {
+			this.id = sectionPlane.id;
+			this._setPos(sectionPlane.pos);
+			this._setDir(sectionPlane.dir);
+			this._sectionPlane = sectionPlane;
+			this._onSectionPlanePos = sectionPlane.on("pos", () => {
+				this._setPos(this._sectionPlane.pos);
+			});
+			this._onSectionPlaneDir = sectionPlane.on("dir", () => {
+				if (!this._ignoreNextSectionPlaneDirUpdate) {
+					this._setDir(this._sectionPlane.dir);
+				} else {
+					this._ignoreNextSectionPlaneDirUpdate = false;
+				}
+			});
+		}
+	}
 
-    /**
-     * Sets if this SectionPlanesOverviewPlane is highlighted.
-     *
-     * @type {Boolean}
-     * @private
-     */
-    setHighlighted(highlighted) {
-        this._highlighted = !!highlighted;
-        this._mesh.highlighted = this._highlighted;
-        this._mesh.highlightMaterial.fillColor = highlighted ? [0, 0.7, 0] : [0, 0, 0];
-        // this._selectedMesh.highlighted = true;
-    }
+	/**
+	 * Gets the {@link SectionPlane} controlled by this Control.
+	 * @returns {SectionPlane} The SectionPlane.
+	 */
+	get sectionPlane() {
+		return this._sectionPlane;
+	}
 
-    /**
-     * Gets if this SectionPlanesOverviewPlane is highlighted.
-     *
-     * @type {Boolean}
-     * @private
-     */
-    getHighlighted() {
-        return this._highlighted;
-    }
+	/**
+	 * 设置剖切面位置
+	 * @param {any} value
+	 */
+	set pos(posRate) {
+		if (posRate < 0 || posRate > 100) return;
+
+		const { aabb } = this._scene;
+		const { look } = this._scene.camera;
+		const xRange = aabb[3] - aabb[0]; //前后
+		const yRange = aabb[4] - aabb[1]; //上下
+		const zRange = aabb[5] - aabb[2]; //左右
+
+		const newSectionPos = math.vec3();
+		newSectionPos[0] = this.pos[0];
+		newSectionPos[1] = this.pos[1];
+		newSectionPos[2] = this.pos[2];
+
+		const { dir } = this._sectionPlane;
+		let rateDis;
+		if (dir[0] != 0) {
+			rateDis = (posRate / 100) * xRange;
+			newSectionPos[0] = look[0] - xRange / 2 + rateDis;
+		} else if (dir[1] != 0) {
+			rateDis = (posRate / 100) * yRange;
+			newSectionPos[1] = look[1] - yRange / 2 + rateDis;
+		} else if (dir[2] != 0) {
+			rateDis = (posRate / 100) * zRange;
+			newSectionPos[2] = look[2] - zRange / 2 + rateDis;
+		}
 
-    /**
-     * Sets if this SectionPlanesOverviewPlane is selected.
-     *
-     * @type {Boolean}
-     * @private
-     */
-    setSelected(selected) {
-        this._selected = !!selected;
-        this._mesh.edgeMaterial.edgeWidth = selected ? 3 : 1;
-        this._mesh.highlightMaterial.edgeWidth = selected ? 3 : 1;
+		this._sectionPlane.pos = newSectionPos;
+	}
 
-    }
+	get pos() {
+		return this._pos;
+	}
 
-    /**
-     * Gets if this SectionPlanesOverviewPlane is selected.
-     *
-     * @type {Boolean}
-     * @private
-     */
-    getSelected() {
-        return this._selected;
-    }
+	/** @private */
+	_setPos(xyz) {
+		this._pos.set(xyz);
 
-    /** @private */
-    destroy() {
-        this._sectionPlane.off(this._onSectionPlanePos);
-        this._sectionPlane.off(this._onSectionPlaneDir);
-        this._mesh.destroy();
-    }
-}
-
-/**
- * @desc An interactive 3D overview for navigating the {@link SectionPlane}s created by its {@link SectionPlanesPlugin}.
- *
- * * Located at {@link SectionPlanesPlugin#overview}.
- * * Renders the overview on a separate canvas at a corner of the {@link Viewer}'s {@link Scene} {@link Canvas}.
- * * The overview shows a 3D plane object for each {@link SectionPlane} in the {@link Scene}.
- * * Click a plane object in the overview to toggle the visibility of a 3D gizmo to edit the position and orientation of its {@link SectionPlane}.
- *
- * @private
- */
-class Overview$1 {
+		worldToRTCPos(this._pos, this._origin, this._rtcPos);
 
-    /**
-     * @private
-     */
-    constructor(plugin, cfg) {
+		this._rootNode.origin = this._origin;
+		this._rootNode.position = this._rtcPos;
+	}
 
-        if (!cfg.onHoverEnterPlane || !cfg.onHoverLeavePlane || !cfg.onClickedNothing || !cfg.onClickedPlane) {
-            throw "Missing config(s): onHoverEnterPlane, onHoverLeavePlane, onClickedNothing || onClickedPlane";
-        }
+	/** @private */
+	_setDir(xyz) {
+		this._baseDir.set(xyz);
+		this._rootNode.quaternion = math.vec3PairToQuaternion(zeroVec$2, xyz, quat$2);
+	}
 
-        /**
-         * The {@link SectionPlanesPlugin} that owns this SectionPlanesOverview.
-         *
-         * @type {SectionPlanesPlugin}
-         */
-        this.plugin = plugin;
+	_setSectionPlaneDir(dir) {
+		if (this._sectionPlane) {
+			this._ignoreNextSectionPlaneDirUpdate = true;
+			this._sectionPlane.dir = dir;
+		}
+	}
 
-        this._viewer = plugin.viewer;
+	/**
+	 * Sets if this Control is visible.
+	 *
+	 * @type {Boolean}
+	 */
+	setVisible(visible = true) {
+		if (this._visible === visible) {
+			return;
+		}
+		this._visible = visible;
+		var id;
+		for (id in this._displayMeshes) {
+			if (this._displayMeshes.hasOwnProperty(id)) {
+				this._displayMeshes[id].visible = visible;
+			}
+		}
+		if (!visible) {
+			for (id in this._affordanceMeshes) {
+				if (this._affordanceMeshes.hasOwnProperty(id)) {
+					this._affordanceMeshes[id].visible = visible;
+				}
+			}
+		}
+	}
 
-        this._onHoverEnterPlane = cfg.onHoverEnterPlane;
-        this._onHoverLeavePlane = cfg.onHoverLeavePlane;
-        this._onClickedNothing = cfg.onClickedNothing;
-        this._onClickedPlane = cfg.onClickedPlane;
-        this._visible = true;
+	/**
+	 * Gets if this Control is visible.
+	 *
+	 * @type {Boolean}
+	 */
+	getVisible() {
+		return this._visible;
+	}
 
-        this._planes = {};
+	/**
+	 * Sets if this Control is culled. This is called by SectionPlanesPlugin to
+	 * temporarily hide the Control while a snapshot is being taken by Viewer#getSnapshot().
+	 * @param culled
+	 */
+	setCulled(culled) {
+		var id;
+		for (id in this._displayMeshes) {
+			if (this._displayMeshes.hasOwnProperty(id)) {
+				this._displayMeshes[id].culled = culled;
+			}
+		}
+		if (!culled) {
+			for (id in this._affordanceMeshes) {
+				if (this._affordanceMeshes.hasOwnProperty(id)) {
+					this._affordanceMeshes[id].culled = culled;
+				}
+			}
+		}
+	}
 
-        //--------------------------------------------------------------------------------------------------------------
-        // Init canvas
-        //--------------------------------------------------------------------------------------------------------------
+	/**
+	 * Builds the Entities that represent this Control.
+	 * @private
+	 */
+	_createNodes() {
+		const NO_STATE_INHERIT = false;
+		const scene = this._viewer.scene;
 
-        this._canvas = cfg.overviewCanvas;
+		this._rootNode = new Node$2(scene, {
+			position: [0, 0, 0],
+			scale: [5, 5, 5],
+			isObject: false
+		});
 
-        //--------------------------------------------------------------------------------------------------------------
-        // Init scene
-        //--------------------------------------------------------------------------------------------------------------
+		const rootNode = this._rootNode;
 
-        this._scene = new Scene(this._viewer, {
-            canvasId: this._canvas.id,
-            transparent: true
-        });
-        this._scene.clearLights();
-        new DirLight(this._scene, {
-            dir: [0.4, -0.4, 0.8],
-            color: [0.8, 1.0, 1.0],
-            intensity: 1.0,
-            space: "view"
-        });
-        new DirLight(this._scene, {
-            dir: [-0.8, -0.3, -0.4],
-            color: [0.8, 0.8, 0.8],
-            intensity: 1.0,
-            space: "view"
-        });
-        new DirLight(this._scene, {
-            dir: [0.8, -0.6, -0.8],
-            color: [1.0, 1.0, 1.0],
-            intensity: 1.0,
-            space: "view"
-        });
+		const newMesh = (color) => {
+			return new Mesh(rootNode, {
+				geometry: MeshConfigs.geometry,
+				material: new PhongMaterial(rootNode, {
+					emissive: [0, 0, 0],
+					diffuse: color,
+					backfaces: true
+				}),
+				opacity: this._planeOpacity,
+				ghosted: true,
+				ghostMaterial: new EmphasisMaterial(rootNode, {
+					edges: false,
+					filled: true,
+					fillColor: color,
+					fillAlpha: 0.1,
+					backfaces: true
+				}),
+				pickable: true,
+				collidable: true,
+				clippable: false,
+				visible: false,
+				scale: [2.4, 2.4, 1],
+				isObject: false
+			});
+		};
 
-        this._scene.camera;
-        this._scene.camera.perspective.fov = 70;
+		this._displayMeshes = {
+			front_plane: rootNode.addChild(newMesh(this._controlFillColor), NO_STATE_INHERIT),
+			back_plane: rootNode.addChild(newMesh(this._controlFillColor), NO_STATE_INHERIT),
+			right_plane: rootNode.addChild(newMesh(this._controlFillColor), NO_STATE_INHERIT),
+			left_plane: rootNode.addChild(newMesh(this._controlFillColor), NO_STATE_INHERIT),
+			top_plane: rootNode.addChild(newMesh(this._controlFillColor), NO_STATE_INHERIT),
+			bottom_plane: rootNode.addChild(newMesh(this._controlFillColor), NO_STATE_INHERIT)
+		};
 
-        this._zUp = false;
+		this._affordanceMeshes = {
+			front_plane: rootNode.addChild(newMesh(this._controlEdgeColor), NO_STATE_INHERIT),
+			back_plane: rootNode.addChild(newMesh(this._controlEdgeColor), NO_STATE_INHERIT),
+			right_plane: rootNode.addChild(newMesh(this._controlEdgeColor), NO_STATE_INHERIT),
+			left_plane: rootNode.addChild(newMesh(this._controlEdgeColor), NO_STATE_INHERIT),
+			top_plane: rootNode.addChild(newMesh(this._controlEdgeColor), NO_STATE_INHERIT),
+			bottom_plane: rootNode.addChild(newMesh(this._controlEdgeColor), NO_STATE_INHERIT)
+		};
+	}
 
-        //--------------------------------------------------------------------------------------------------------------
-        // Synchronize overview scene camera with viewer camera
-        //--------------------------------------------------------------------------------------------------------------
+	_bindEvents() {
+		const self = this;
+		var grabbed = false;
+		const DRAG_ACTIONS = {
+			none: -1,
+			left_Translate: 0,
+			top_Translate: 1,
+			front_Translate: 2,
+			right_Translate: 3,
+			bottom_Translate: 4,
+			back_Translate: 5
+		};
+		const rootNode = this._rootNode;
+		var nextDragAction = null; // As we hover grabbed an arrow or hoop, self is the action we would do if we then dragged it.
+		var dragAction = null; // Action we're doing while we drag an arrow or hoop.
+		const lastCanvasPos = math.vec2();
+		this.lastCanvasPos = lastCanvasPos;
+		const xBaseAxis = math.vec3([1, 0, 0]);
+		const yBaseAxis = math.vec3([0, 1, 0]);
+		const zBaseAxis = math.vec3([0, 0, 1]);
 
-        {
-            const camera = this._scene.camera;
-            const matrix = math.rotationMat4c(-90 * math.DEGTORAD, 1, 0, 0);
-            const eyeLookVec = math.vec3();
-            const eyeLookVecOverview = math.vec3();
-            const upOverview = math.vec3();
-
-            this._synchCamera = () => {
-                const eye = this._viewer.camera.eye;
-                const look = this._viewer.camera.look;
-                const up = this._viewer.camera.up;
-                math.mulVec3Scalar(math.normalizeVec3(math.subVec3(eye, look, eyeLookVec)), 7);
-                if (this._zUp) { // +Z up
-                    math.transformVec3(matrix, eyeLookVec, eyeLookVecOverview);
-                    math.transformVec3(matrix, up, upOverview);
-                    camera.look = [0, 0, 0];
-                    camera.eye = math.transformVec3(matrix, eyeLookVec, eyeLookVecOverview);
-                    camera.up = math.transformPoint3(matrix, up, upOverview);
-                } else { // +Y up
-                    camera.look = [0, 0, 0];
-                    camera.eye = eyeLookVec;
-                    camera.up = up;
-                }
-            };
-        }
+		const canvas = this._viewer.scene.canvas.canvas;
+		const camera = this._viewer.camera;
+		const scene = this._viewer.scene;
 
-        this._onViewerCameraMatrix = this._viewer.camera.on("matrix", this._synchCamera);
+		{
+			// Keep gizmo screen size constant
+			const tempVec3a = math.vec3([0, 0, 0]);
+			let lastDist = -1;
 
-        this._onViewerCameraWorldAxis = this._viewer.camera.on("worldAxis", this._synchCamera);
+			this._onCameraViewMatrix = scene.camera.on("viewMatrix", () => {
+			});
 
-        this._onViewerCameraFOV = this._viewer.camera.perspective.on("fov", (fov) => {
-            this._scene.camera.perspective.fov = fov;
-        });
+			this._onCameraProjMatrix = scene.camera.on("projMatrix", () => {
+			});
 
-        //--------------------------------------------------------------------------------------------------------------
-        // Bind overview canvas events
-        //--------------------------------------------------------------------------------------------------------------
+			this._onSceneTick = scene.on("tick", () => {
+				const dist = Math.abs(math.lenVec3(math.subVec3(scene.camera.eye, this._pos, tempVec3a)));
 
-        {
-            var hoveredEntity = null;
+				if (dist !== lastDist) {
+					if (camera.projection === "perspective") {
+						const worldSize = Math.tan(camera.perspective.fov * math.DEGTORAD) * dist;
+						const size = this._controlSize * worldSize;
+						rootNode.scale = [size, size, size];
+						lastDist = dist;
+					}
+				}
 
-            this._onInputMouseMove = this._scene.input.on("mousemove", (coords) => {
-                const hit = this._scene.pick({
-                    canvasPos: coords
-                });
-                if (hit) {
-                    if (!hoveredEntity || hit.entity.id !== hoveredEntity.id) {
-                        if (hoveredEntity) {
-                            const plane = this._planes[hoveredEntity.id];
-                            if (plane) {
-                                this._onHoverLeavePlane(hoveredEntity.id);
-                            }
-                        }
-                        hoveredEntity = hit.entity;
-                        const plane = this._planes[hoveredEntity.id];
-                        if (plane) {
-                            this._onHoverEnterPlane(hoveredEntity.id);
-                        }
-                    }
-                } else {
-                    if (hoveredEntity) {
-                        this._onHoverLeavePlane(hoveredEntity.id);
-                        hoveredEntity = null;
-                    }
-                }
-            });
+				if (camera.projection === "ortho") {
+					const worldSize = camera.ortho.scale / 10;
+					const size = worldSize;
+					rootNode.scale = [size, size, size];
+					lastDist = dist;
+				}
+			});
+		}
 
-            this._scene.canvas.canvas.addEventListener("mouseup", this._onCanvasMouseUp = () => {
-                if (hoveredEntity) {
-                    const plane = this._planes[hoveredEntity.id];
-                    if (plane) {
-                        this._onClickedPlane(hoveredEntity.id);
-                    }
-                } else {
-                    this._onClickedNothing();
-                }
-            });
+		//鼠标获取屏幕点击坐标
+		const getClickCoordsWithinElement = (function () {
+			const canvasPos = new Float64Array(2);
+			return function (event) {
+				if (!event) {
+					event = window.event;
+					canvasPos[0] = event.x;
+					canvasPos[1] = event.y;
+				} else {
+					var element = event.target;
+					var totalOffsetLeft = 0;
+					var totalOffsetTop = 0;
 
-            this._scene.canvas.canvas.addEventListener("mouseout", this._onCanvasMouseOut = () => {
-                if (hoveredEntity) {
-                    this._onHoverLeavePlane(hoveredEntity.id);
-                    hoveredEntity = null;
-                }
-            });
-        }
+					while (element.offsetParent) {
+						totalOffsetLeft += element.offsetLeft;
+						totalOffsetTop += element.offsetTop;
+						element = element.offsetParent;
+					}
+					canvasPos[0] = event.pageX - totalOffsetLeft;
+					canvasPos[1] = event.pageY - totalOffsetTop;
+				}
+				return canvasPos;
+			};
+		})();
 
-        //--------------------------------------------------------------------------------------------------------------
-        // Configure overview
-        //--------------------------------------------------------------------------------------------------------------
+		//触屏获取屏幕点击坐标
+		const getTouchCoordsWithinElement = (function () {
+			const canvasPos = new Float64Array(2);
+			return function (event) {
+				if (!event) {
+					event = window.event;
+				}
+				if (event.touches && event.touches.length) {
+					// 如果有触摸事件，使用第一个触摸点的坐标
+					canvasPos[0] = event.touches[0].pageX;
+					canvasPos[1] = event.touches[0].pageY;
+				} else {
+					// 否则，假设是鼠标事件
+					var element = event.target;
+					var totalOffsetLeft = 0;
+					var totalOffsetTop = 0;
 
-        this.setVisible(cfg.overviewVisible);
-    }
+					while (element.offsetParent) {
+						totalOffsetLeft += element.offsetLeft;
+						totalOffsetTop += element.offsetTop;
+						element = element.offsetParent;
+					}
+					canvasPos[0] = event.pageX - totalOffsetLeft;
+					canvasPos[1] = event.pageY - totalOffsetTop;
+				}
+				return canvasPos;
+			};
+		})();
 
-    /** Called by SectionPlanesPlugin#createSectionPlane()
-     * @private
-     */
-    addSectionPlane(sectionPlane) {
-        this._planes[sectionPlane.id] = new Plane$1(this, this._scene, sectionPlane);
-    }
+		const localToWorldVec = (function () {
+			const mat = math.mat4();
+			return function (localVec, worldVec) {
+				math.quaternionToMat4(self._rootNode.quaternion, mat);
+				math.transformVec3(mat, localVec, worldVec);
+				math.normalizeVec3(worldVec);
+				return worldVec;
+			};
+		})();
 
-    /**  @private
-     */
-    setPlaneHighlighted(id, highlighted) {
-        const plane = this._planes[id];
-        if (plane) {
-            plane.setHighlighted(highlighted);
-        }
-    }
+		var getTranslationPlane = (function () {
+			const planeNormal = math.vec3();
+			return function (worldAxis) {
+				const absX = Math.abs(worldAxis[0]);
+				if (absX > Math.abs(worldAxis[1]) && absX > Math.abs(worldAxis[2])) {
+					math.cross3Vec3(worldAxis, [0, 1, 0], planeNormal);
+				} else {
+					math.cross3Vec3(worldAxis, [1, 0, 0], planeNormal);
+				}
+				math.cross3Vec3(planeNormal, worldAxis, planeNormal);
+				math.normalizeVec3(planeNormal);
+				return planeNormal;
+			};
+		})();
 
-    /**  @private
-     */
-    setPlaneSelected(id, selected) {
-        const plane = this._planes[id];
-        if (plane) {
-            plane.setSelected(selected);
-        }
-    }
+		const dragTranslateSectionPlane = (function () {
+			const p1 = math.vec3();
+			const p2 = math.vec3();
+			const worldAxis = math.vec4();
+			return function (baseAxis, fromMouse, toMouse) {
+				localToWorldVec(baseAxis, worldAxis);
+				const planeNormal = getTranslationPlane(worldAxis, fromMouse, toMouse);
+				getPointerPlaneIntersect(fromMouse, planeNormal, p1);
+				getPointerPlaneIntersect(toMouse, planeNormal, p2);
+				math.subVec3(p2, p1);
+				const dot = math.dotVec3(p2, worldAxis);
+				self._pos[0] += worldAxis[0] * dot;
+				self._pos[1] += worldAxis[1] * dot;
+				self._pos[2] += worldAxis[2] * dot;
+				self._rootNode.position = self._pos;
+				if (self._sectionPlane) {
+					self._sectionPlane.pos = self._pos;
+				}
+			};
+		})();
 
-    /** @private
-     */
-    removeSectionPlane(sectionPlane) {
-        const plane = this._planes[sectionPlane.id];
-        if (plane) {
-            plane.destroy();
-            delete this._planes[sectionPlane.id];
+		var dragRotateSectionPlane = (function () {
+			const p1 = math.vec4();
+			const p2 = math.vec4();
+			const c = math.vec4();
+			const worldAxis = math.vec4();
+			return function (baseAxis, fromMouse, toMouse) {
+				localToWorldVec(baseAxis, worldAxis);
+				const hasData =
+					getPointerPlaneIntersect(fromMouse, worldAxis, p1) && getPointerPlaneIntersect(toMouse, worldAxis, p2);
+				if (!hasData) {
+					// Find intersections with view plane and project down to origin
+					const planeNormal = getTranslationPlane(worldAxis, fromMouse, toMouse);
+					getPointerPlaneIntersect(fromMouse, planeNormal, p1, 1); // Ensure plane moves closer to camera so angles become workable
+					getPointerPlaneIntersect(toMouse, planeNormal, p2, 1);
+					var dot = math.dotVec3(p1, worldAxis);
+					p1[0] -= dot * worldAxis[0];
+					p1[1] -= dot * worldAxis[1];
+					p1[2] -= dot * worldAxis[2];
+					dot = math.dotVec3(p2, worldAxis);
+					p2[0] -= dot * worldAxis[0];
+					p2[1] -= dot * worldAxis[1];
+					p2[2] -= dot * worldAxis[2];
+				}
+				math.normalizeVec3(p1);
+				math.normalizeVec3(p2);
+				dot = math.dotVec3(p1, p2);
+				dot = math.clamp(dot, -1.0, 1.0); // Rounding errors cause dot to exceed allowed range
+				var incDegrees = Math.acos(dot) * math.RADTODEG;
+				math.cross3Vec3(p1, p2, c);
+				if (math.dotVec3(c, worldAxis) < 0.0) {
+					incDegrees = -incDegrees;
+				}
+				self._rootNode.rotate(baseAxis, incDegrees);
+				rotateSectionPlane();
+			};
+		})();
+
+		var getPointerPlaneIntersect = (function () {
+			const dir = math.vec4([0, 0, 0, 1]);
+			const matrix = math.mat4();
+			return function (mouse, axis, dest, offset) {
+				offset = offset || 0;
+				dir[0] = (mouse[0] / canvas.width) * 2.0 - 1.0;
+				dir[1] = -((mouse[1] / canvas.height) * 2.0 - 1.0);
+				dir[2] = 0.0;
+				dir[3] = 1.0;
+				math.mulMat4(camera.projMatrix, camera.viewMatrix, matrix); // Unproject norm device coords to view coords
+				math.inverseMat4(matrix);
+				math.transformVec4(matrix, dir, dir);
+				math.mulVec4Scalar(dir, 1.0 / dir[3]); // This is now point A on the ray in world space
+				var rayO = camera.eye; // The direction
+				math.subVec4(dir, rayO, dir);
+				const origin = self._sectionPlane.pos; // Plane origin:
+				var d = -math.dotVec3(origin, axis) - offset;
+				var dot = math.dotVec3(axis, dir);
+				if (Math.abs(dot) > 0.005) {
+					var t = -(math.dotVec3(axis, rayO) + d) / dot;
+					math.mulVec3Scalar(dir, t, dest);
+					math.addVec3(dest, rayO);
+					math.subVec3(dest, origin, dest);
+					return true;
+				}
+				return false;
+			};
+		})();
+
+		const rotateSectionPlane = (function () {
+			const dir = math.vec3();
+			const mat = math.mat4();
+			return function () {
+				if (self.sectionPlane) {
+					math.quaternionToMat4(rootNode.quaternion, mat); // << ---
+					math.transformVec3(mat, [0, 0, 1], dir);
+					self._setSectionPlaneDir(dir);
+				}
+			};
+		})();
+
+		{
+			var down = false;
+			var lastAffordanceMesh;
+
+			this._onCameraControlHover = this._viewer.cameraControl.on("hoverEnter", (hit) => {
+				if (!this._visible) {
+					return;
+				}
+				if (down) {
+					return;
+				}
+				grabbed = false;
+				if (lastAffordanceMesh) {
+					lastAffordanceMesh.visible = false;
+				}
+				var affordanceMesh;
+				const meshId = hit.entity.id;
+				switch (meshId) {
+					case this._displayMeshes.plane.id:
+						affordanceMesh = this._affordanceMeshes.plane;
+						nextDragAction = DRAG_ACTIONS.front_Translate;
+						break;
+
+					case this._displayMeshes.xAxisArrowHandle.id:
+						affordanceMesh = this._affordanceMeshes.xAxisArrow;
+						nextDragAction = DRAG_ACTIONS.xTranslate;
+						break;
+
+					case this._displayMeshes.xAxisHandle.id:
+						affordanceMesh = this._affordanceMeshes.xAxisArrow;
+						nextDragAction = DRAG_ACTIONS.xTranslate;
+						break;
+
+					case this._displayMeshes.yAxisArrowHandle.id:
+						affordanceMesh = this._affordanceMeshes.yAxisArrow;
+						nextDragAction = DRAG_ACTIONS.yTranslate;
+						break;
+
+					case this._displayMeshes.yShaftHandle.id:
+						affordanceMesh = this._affordanceMeshes.yAxisArrow;
+						nextDragAction = DRAG_ACTIONS.yTranslate;
+						break;
+
+					case this._displayMeshes.zAxisArrowHandle.id:
+						affordanceMesh = this._affordanceMeshes.zAxisArrow;
+						nextDragAction = DRAG_ACTIONS.zTranslate;
+						break;
+
+					case this._displayMeshes.zAxisHandle.id:
+						affordanceMesh = this._affordanceMeshes.zAxisArrow;
+						nextDragAction = DRAG_ACTIONS.zTranslate;
+						break;
+
+					case this._displayMeshes.xCurveHandle.id:
+						affordanceMesh = this._affordanceMeshes.xHoop;
+						nextDragAction = DRAG_ACTIONS.xRotate;
+						break;
+
+					default:
+						nextDragAction = DRAG_ACTIONS.none;
+						return; // Not clicked an arrow or hoop
+				}
+				if (affordanceMesh) {
+					affordanceMesh.visible = true;
+				}
+				lastAffordanceMesh = affordanceMesh;
+				grabbed = true;
+			});
+
+			this._onCameraControlHoverLeave = this._viewer.cameraControl.on("hoverOutEntity", (hit) => {
+				if (!this._visible) {
+					return;
+				}
+				if (lastAffordanceMesh) {
+					lastAffordanceMesh.visible = false;
+				}
+				lastAffordanceMesh = null;
+				nextDragAction = DRAG_ACTIONS.none;
+			});
+
+			//mousedown
+			canvas.addEventListener(
+				"mousedown",
+				(this._canvasMouseDownListener = (e) => {
+					e.preventDefault();
+					if (!this._visible || !grabbed) return;
+
+					this._viewer.cameraControl.pointerEnabled = false;
+					switch (e.which) {
+						case 1: // Left button
+							mouseDownLeft = true;
+							down = true;
+							var canvasPos = getClickCoordsWithinElement(e);
+							dragAction = nextDragAction;
+							lastCanvasPos[0] = canvasPos[0];
+							lastCanvasPos[1] = canvasPos[1];
+							break;
+					}
+				})
+			);
+			//mousemove
+			canvas.addEventListener(
+				"mousemove",
+				(this._canvasMouseMoveListener = (e) => {
+					if (!this._visible) {
+						return;
+					}
+					if (!down) {
+						return;
+					}
+					var canvasPos = getClickCoordsWithinElement(e);
+					const x = canvasPos[0];
+					const y = canvasPos[1];
+
+					switch (dragAction) {
+						case DRAG_ACTIONS.xTranslate:
+							dragTranslateSectionPlane(xBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.yTranslate:
+							dragTranslateSectionPlane(yBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.zTranslate:
+							dragTranslateSectionPlane(zBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.xRotate:
+							dragRotateSectionPlane(xBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.yRotate:
+							dragRotateSectionPlane(yBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.zRotate:
+							dragRotateSectionPlane(zBaseAxis, lastCanvasPos, canvasPos);
+							break;
+					}
+
+					lastCanvasPos[0] = x;
+					lastCanvasPos[1] = y;
+				})
+			);
+			//mouseup
+			canvas.addEventListener(
+				"mouseup",
+				(this._canvasMouseUpListener = (e) => {
+					if (!this._visible) return;
+					this._viewer.cameraControl.pointerEnabled = true;
+					if (!down) {
+						return;
+					}
+					switch (e.which) {
+						case 1: // Left button
+							mouseDownLeft = false;
+							break;
+						case 2: // Middle/both buttons
+							mouseDownMiddle = false;
+							break;
+						case 3: // Right button
+							mouseDownRight = false;
+							break;
+					}
+					down = false;
+					grabbed = false;
+				})
+			);
+
+			//wheel
+			canvas.addEventListener(
+				"wheel",
+				(this._canvasWheelListener = (e) => {
+					if (!this._visible) {
+						return;
+					}
+					var delta = Math.max(-1, Math.min(1, -e.deltaY * 40));
+					if (delta === 0) {
+						return;
+					}
+				})
+			);
+
+			this._onCameraControlHover = this._viewer.cameraControl.on("touchEntity", (hit) => {
+				if (!this._visible || down || grabbed) return;
+				grabbed = false;
+				if (lastAffordanceMesh) {
+					lastAffordanceMesh.visible = false;
+				}
+				var affordanceMesh;
+				const meshId = hit.entity.id;
+				switch (meshId) {
+					case this._displayMeshes.plane.id:
+						affordanceMesh = this._affordanceMeshes.plane;
+						nextDragAction = DRAG_ACTIONS.zTranslate;
+						break;
+					// case this._displayMeshes.xAxisArrowHandle.id:
+					// 	affordanceMesh = this._affordanceMeshes.xAxisArrow;
+					// 	nextDragAction = DRAG_ACTIONS.xTranslate;
+					// 	break;
+
+					// case this._displayMeshes.xAxisHandle.id:
+					// 	affordanceMesh = this._affordanceMeshes.xAxisArrow;
+					// 	nextDragAction = DRAG_ACTIONS.xTranslate;
+					// 	break;
+
+					// case this._displayMeshes.yAxisArrowHandle.id:
+					// 	affordanceMesh = this._affordanceMeshes.yAxisArrow;
+					// 	nextDragAction = DRAG_ACTIONS.yTranslate;
+					// 	break;
+
+					// case this._displayMeshes.yShaftHandle.id:
+					// 	affordanceMesh = this._affordanceMeshes.yAxisArrow;
+					// 	nextDragAction = DRAG_ACTIONS.yTranslate;
+					// 	break;
+
+					// case this._displayMeshes.zAxisArrowHandle.id:
+					// 	affordanceMesh = this._affordanceMeshes.zAxisArrow;
+					// 	nextDragAction = DRAG_ACTIONS.zTranslate;
+					// 	break;
+
+					// case this._displayMeshes.zAxisHandle.id:
+					// 	affordanceMesh = this._affordanceMeshes.zAxisArrow;
+					// 	nextDragAction = DRAG_ACTIONS.zTranslate;
+					// 	break;
+
+					// case this._displayMeshes.xCurveHandle.id:
+					// 	affordanceMesh = this._affordanceMeshes.xHoop;
+					// 	nextDragAction = DRAG_ACTIONS.xRotate;
+					// 	break;
+
+					// case this._displayMeshes.yCurveHandle.id:
+					// 	affordanceMesh = this._affordanceMeshes.yHoop;
+					// 	nextDragAction = DRAG_ACTIONS.yRotate;
+					// 	break;
+
+					// case this._displayMeshes.zCurveHandle.id:
+					// 	affordanceMesh = this._affordanceMeshes.zHoop;
+					// 	nextDragAction = DRAG_ACTIONS.zRotate;
+					// 	break;
+
+					default:
+						nextDragAction = DRAG_ACTIONS.none;
+						return; // Not clicked an arrow or hoop
+				}
+				if (affordanceMesh) {
+					affordanceMesh.visible = true;
+				}
+				lastAffordanceMesh = affordanceMesh;
+				grabbed = true;
+			});
+			//touchstart
+			canvas.addEventListener(
+				"touchstart",
+				(this._canvasMouseDownListener = (e) => {
+					e.preventDefault();
+					if (!this._visible || !grabbed) return;
+					this._viewer.cameraControl.pointerEnabled = false;
+					if (lastAffordanceMesh) {
+						lastAffordanceMesh.visible = true;
+					}
+					down = true;
+					var canvasPos = getTouchCoordsWithinElement(e);
+					dragAction = nextDragAction;
+					lastCanvasPos[0] = canvasPos[0];
+					lastCanvasPos[1] = canvasPos[1];
+				})
+			);
+			//touchmove
+			canvas.addEventListener(
+				"touchmove",
+				(this._canvasMouseMoveListener = (e) => {
+					if (!this._visible || !down) return;
+
+					var canvasPos = getTouchCoordsWithinElement(e);
+					const x = canvasPos[0];
+					const y = canvasPos[1];
+
+					switch (dragAction) {
+						case DRAG_ACTIONS.xTranslate:
+							dragTranslateSectionPlane(xBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.yTranslate:
+							dragTranslateSectionPlane(yBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.zTranslate:
+							dragTranslateSectionPlane(zBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.xRotate:
+							dragRotateSectionPlane(xBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.yRotate:
+							dragRotateSectionPlane(yBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.zRotate:
+							dragRotateSectionPlane(zBaseAxis, lastCanvasPos, canvasPos);
+							break;
+					}
+
+					lastCanvasPos[0] = x;
+					lastCanvasPos[1] = y;
+				})
+			);
+			//touchend
+			canvas.addEventListener(
+				"touchend",
+				(this._canvasTouchEndListener = (e) => {
+					// if (!this._visible) return;
+					this._viewer.cameraControl.pointerEnabled = true;
+					if (lastAffordanceMesh) {
+						lastAffordanceMesh.visible = false;
+					}
+					lastAffordanceMesh = null;
+					nextDragAction = DRAG_ACTIONS.none;
+					down = false;
+					grabbed = false;
+				})
+			);
+			canvas.addEventListener("touchcancel", this._canvasTouchEndListener);
+		}
+	}
+
+	_destroy() {
+		this._unbindEvents();
+		this._destroyNodes();
+	}
+
+	_unbindEvents() {
+		const viewer = this._viewer;
+		const scene = viewer.scene;
+		const canvas = scene.canvas.canvas;
+		const camera = viewer.camera;
+		const cameraControl = viewer.cameraControl;
+
+		scene.off(this._onSceneTick);
+
+		canvas.removeEventListener("mousedown", this._canvasMouseDownListener);
+		canvas.removeEventListener("mousemove", this._canvasMouseMoveListener);
+		canvas.removeEventListener("mouseup", this._canvasMouseUpListener);
+		canvas.removeEventListener("wheel", this._canvasWheelListener);
+		canvas.removeEventListener("touchend", this._canvasTouchEndListener);
+		canvas.removeEventListener("touchcancel", this._canvasTouchEndListener);
+
+		camera.off(this._onCameraViewMatrix);
+		camera.off(this._onCameraProjMatrix);
+
+		cameraControl.off(this._onCameraControlHover);
+		cameraControl.off(this._onCameraControlHoverLeave);
+	}
+
+	_destroyNodes() {
+		this._setSectionPlane(null);
+		this._rootNode.destroy();
+		this._displayMeshes = {};
+		this._affordanceMeshes = {};
+	}
+}
+
+const zeroVec$1 = new Float64Array([0, 0, 1]);
+const quat$1 = new Float64Array(4);
+
+/**
+ * Controls a {@link SectionPlane} with mouse and touch input.
+ *
+ * @private
+ */
+class ClippingPlane {
+	/** @private */
+	constructor(plugin, cfg) {
+		/**
+		 * ID of this Control.
+		 *
+		 * SectionPlaneControls are mapped by this ID in {@link SectionPlanesPlugin#sectionPlaneControls}.
+		 *
+		 * @property id
+		 * @type {String|Number}
+		 */
+		this.id = null;
+		this.type = "plane";
+
+		this._viewer = plugin.viewer;
+		this._scene = plugin.viewer.scene;
+
+		this._controlFillColor = !!cfg && !!cfg.controlFillColor ? cfg.controlFillColor : [0.1, 0.4, 0.99];
+		this._planeSize = !!cfg && !!cfg.planeSize ? cfg.planeSize : 1;
+		this._controlSize = !!cfg && !!cfg.controlSize ? cfg.controlSize : 0.07;
+		this._planeOpacity = !!cfg && !!cfg.planeOpacity ? cfg.planeOpacity : 0.4;
+
+		this._visible = false;
+		this._pos = math.vec3(); // Full-precision position of the center of the Control
+		this._origin = math.vec3();
+		this._rtcPos = math.vec3();
+
+		this._baseDir = math.vec3(); // Saves direction of clip plane when we start dragging an arrow or ring.
+		this._rootNode = null; // Root of Node graph that represents this control in the 3D scene
+		this._displayMeshes = null; // Meshes that are always visible
+		this._affordanceMeshes = null; // Meshes displayed momentarily for affordance
+
+		this._ignoreNextSectionPlaneDirUpdate = false;
+
+		this._createNodes();
+		this._bindEvents();
+	}
+
+	/**
+	 * Builds the Entities that represent this Control.
+	 * @private
+	 */
+	_createNodes() {
+		const NO_STATE_INHERIT = false;
+		const scene = this._viewer.scene;
+
+		this._rootNode = new Node$2(scene, {
+			position: [0, 0, 0],
+			scale: [5, 5, 5],
+			isObject: false
+		});
+
+		const rootNode = this._rootNode;
+
+		this._displayMeshes = {
+			plane: rootNode.addChild(
+				new Mesh(rootNode, {
+					geometry: new ReadableGeometry(rootNode, {
+						primitive: "triangles",
+						positions: [
+							0.5,
+							0.5,
+							0.0,
+							0.5,
+							-0.5,
+							0.0, // 0
+							-0.5,
+							-0.5,
+							0.0,
+							-0.5,
+							0.5,
+							0.0, // 1
+							0.5,
+							0.5,
+							-0.0,
+							0.5,
+							-0.5,
+							-0.0, // 2
+							-0.5,
+							-0.5,
+							-0.0,
+							-0.5,
+							0.5,
+							-0.0 // 3
+						],
+						indices: [0, 1, 2, 2, 3, 0]
+					}),
+					material: new PhongMaterial(rootNode, {
+						emissive: [0, 0, 0],
+						diffuse: this._controlFillColor,
+						backfaces: true
+					}),
+					opacity: this._planeOpacity,
+					ghosted: true,
+					ghostMaterial: new EmphasisMaterial(rootNode, {
+						edges: false,
+						filled: true,
+						fillColor: this._controlFillColor ? this._controlFillColor : [0.1, 0.4, 0.99],
+						fillAlpha: 0.1,
+						backfaces: true
+					}),
+					pickable: true,
+					collidable: true,
+					clippable: false,
+					visible: false,
+					scale: [2.4 * this._planeSize, 2.4 * this._planeSize, 1 * this._planeSize],
+					isObject: false
+				}),
+				NO_STATE_INHERIT
+			)
+		};
+
+		this._affordanceMeshes = {
+			// plane: rootNode.addChild(
+			// 	new Mesh(rootNode, {
+			// 		geometry: new ReadableGeometry(rootNode, {
+			// 			primitive: "triangles",
+			// 			positions: [
+			// 				0.5,
+			// 				0.5,
+			// 				0.0,
+			// 				0.5,
+			// 				-0.5,
+			// 				0.0, // 0
+			// 				-0.5,
+			// 				-0.5,
+			// 				0.0,
+			// 				-0.5,
+			// 				0.5,
+			// 				0.0, // 1
+			// 				0.5,
+			// 				0.5,
+			// 				-0.0,
+			// 				0.5,
+			// 				-0.5,
+			// 				-0.0, // 2
+			// 				-0.5,
+			// 				-0.5,
+			// 				-0.0,
+			// 				-0.5,
+			// 				0.5,
+			// 				-0.0 // 3
+			// 			],
+			// 			indices: [0, 1, 2, 2, 3, 0]
+			// 		}),
+			// 		material: new PhongMaterial(rootNode, {
+			// 			emissive: [0, 0, 0],
+			// 			diffuse: this._controlFillColor,
+			// 			backfaces: true
+			// 		}),
+			// 		opacity: this._planeOpacity,
+			// 		ghosted: true,
+			// 		ghostMaterial: new EmphasisMaterial(rootNode, {
+			// 			edges: false,
+			// 			filled: true,
+			// 			fillColor: this._controlFillColor,
+			// 			fillAlpha: 0.1,
+			// 			backfaces: true
+			// 		}),
+			// 		pickable: true,
+			// 		collidable: true,
+			// 		clippable: false,
+			// 		visible: false,
+			// 		scale: [2.4 * this._planeSize, 2.4 * this._planeSize, 1 * this._planeSize],
+			// 		isObject: false
+			// 	}),
+			// 	NO_STATE_INHERIT
+			// )
+		};
+	}
+
+	/**
+	 * Called by SectionPlanesPlugin to assign this Control to a SectionPlane.
+	 * SectionPlanesPlugin keeps SectionPlaneControls in a reuse pool.
+	 * Call with a null or undefined value to disconnect the Control ffrom whatever SectionPlane it was assigned to.
+	 * @private
+	 */
+	_setSectionPlane(sectionPlane) {
+		if (this._sectionPlane) {
+			this._sectionPlane.off(this._onSectionPlanePos);
+			this._sectionPlane.off(this._onSectionPlaneDir);
+			this._onSectionPlanePos = null;
+			this._onSectionPlaneDir = null;
+			this._sectionPlane = null;
+		}
+		if (sectionPlane) {
+			this.id = sectionPlane.id;
+			this._setPos(sectionPlane.pos);
+			this._setDir(sectionPlane.dir);
+			this._sectionPlane = sectionPlane;
+			sectionPlane.control = this;
+			this._onSectionPlanePos = sectionPlane.on("pos", () => {
+				this._setPos(this._sectionPlane.pos);
+			});
+			this._onSectionPlaneDir = sectionPlane.on("dir", () => {
+				if (!this._ignoreNextSectionPlaneDirUpdate) {
+					this._setDir(this._sectionPlane.dir);
+				} else {
+					this._ignoreNextSectionPlaneDirUpdate = false;
+				}
+			});
+		}
+	}
+
+	/**
+	 * Gets the {@link SectionPlane} controlled by this Control.
+	 * @returns {SectionPlane} The SectionPlane.
+	 */
+	get sectionPlane() {
+		return this._sectionPlane;
+	}
+
+	/**
+	 * 设置剖切面位置
+	 * @param {any} value
+	 */
+	set pos(posRate) {
+		if (posRate < 0 || posRate > 100) return;
+
+		const { aabb } = this._scene;
+		const { look } = this._scene.camera;
+		const xRange = aabb[3] - aabb[0]; //前后
+		const yRange = aabb[4] - aabb[1]; //上下
+		const zRange = aabb[5] - aabb[2]; //左右
+
+		const newSectionPos = math.vec3();
+		newSectionPos[0] = this.pos[0];
+		newSectionPos[1] = this.pos[1];
+		newSectionPos[2] = this.pos[2];
+
+		const { dir } = this._sectionPlane;
+		let rateDis;
+		if (dir[0] != 0) {
+			rateDis = (posRate / 100) * xRange;
+			newSectionPos[0] = look[0] - xRange / 2 + rateDis; // console.log("xRange", rateDis, rateDis + aabb[0]);
+		} else if (dir[1] != 0) {
+			rateDis = (posRate / 100) * yRange;
+			newSectionPos[1] = look[1] - yRange / 2 + rateDis; // console.log("yRange", rateDis, rateDis + aabb[1]);
+		} else if (dir[2] != 0) {
+			rateDis = (posRate / 100) * zRange;
+			newSectionPos[2] = look[2] - zRange / 2 + rateDis; // console.log("zRange", rateDis, rateDis + aabb[2]);
+		}
+
+		this._sectionPlane.pos = newSectionPos;
+	}
+
+	get pos() {
+		return this._pos;
+	}
+
+	/** @private */
+	_setPos(xyz) {
+		this._pos.set(xyz);
+		worldToRTCPos(this._pos, this._origin, this._rtcPos);
+		this._rootNode.origin = this._origin;
+		this._rootNode.position = this._rtcPos;
+	}
+
+	/** @private */
+	_setDir(xyz) {
+		this._baseDir.set(xyz);
+		this._rootNode.quaternion = math.vec3PairToQuaternion(zeroVec$1, xyz, quat$1);
+	}
+
+	_setSectionPlaneDir(dir) {
+		if (this._sectionPlane) {
+			this._ignoreNextSectionPlaneDirUpdate = true;
+			this._sectionPlane.dir = dir;
+		}
+	}
+
+	/**
+	 * Sets if this Control is visible.
+	 *
+	 * @type {Boolean}
+	 */
+	setVisible(visible = true) {
+		if (this._visible === visible) {
+			return;
+		}
+		this._visible = visible;
+		var id;
+		for (id in this._displayMeshes) {
+			if (this._displayMeshes.hasOwnProperty(id)) {
+				this._displayMeshes[id].visible = visible;
+			}
+		}
+		if (!visible) {
+			for (id in this._affordanceMeshes) {
+				if (this._affordanceMeshes.hasOwnProperty(id)) {
+					this._affordanceMeshes[id].visible = visible;
+				}
+			}
+		}
+	}
+
+	/**
+	 * Gets if this Control is visible.
+	 *
+	 * @type {Boolean}
+	 */
+	getVisible() {
+		return this._visible;
+	}
+
+	/**
+	 * Sets if this Control is culled. This is called by SectionPlanesPlugin to
+	 * temporarily hide the Control while a snapshot is being taken by Viewer#getSnapshot().
+	 * @param culled
+	 */
+	setCulled(culled) {
+		var id;
+		for (id in this._displayMeshes) {
+			if (this._displayMeshes.hasOwnProperty(id)) {
+				this._displayMeshes[id].culled = culled;
+			}
+		}
+		if (!culled) {
+			for (id in this._affordanceMeshes) {
+				if (this._affordanceMeshes.hasOwnProperty(id)) {
+					this._affordanceMeshes[id].culled = culled;
+				}
+			}
+		}
+	}
+
+	_bindEvents() {
+		const self = this;
+
+		var grabbed = false;
+
+		const DRAG_ACTIONS = {
+			none: -1,
+			xTranslate: 0,
+			yTranslate: 1,
+			zTranslate: 2,
+			xRotate: 3,
+			yRotate: 4,
+			zRotate: 5
+		};
+
+		this._rootNode;
+
+		var nextDragAction = null; // As we hover grabbed an arrow or hoop, self is the action we would do if we then dragged it.
+		var dragAction = null; // Action we're doing while we drag an arrow or hoop.
+		const lastCanvasPos = math.vec2();
+		this.lastCanvasPos = lastCanvasPos;
+		const xBaseAxis = math.vec3([1, 0, 0]);
+		const yBaseAxis = math.vec3([0, 1, 0]);
+		const zBaseAxis = math.vec3([0, 0, 1]);
+
+		const canvas = this._viewer.scene.canvas.canvas;
+		const camera = this._viewer.camera;
+		const scene = this._viewer.scene;
+
+		{
+			// Keep gizmo screen size constant
+
+			const tempVec3a = math.vec3([0, 0, 0]);
+			let lastDist = -1;
+
+			this._onCameraViewMatrix = scene.camera.on("viewMatrix", () => {
+			});
+
+			this._onCameraProjMatrix = scene.camera.on("projMatrix", () => {
+			});
+
+			this._onSceneTick = scene.on("tick", () => {
+				const dist = Math.abs(math.lenVec3(math.subVec3(scene.camera.eye, this._pos, tempVec3a)));
+
+				if (dist !== lastDist) {
+					if (camera.projection === "perspective") {
+						Math.tan(camera.perspective.fov * math.DEGTORAD) * dist;
+						// const size = this._controlSize * worldSize;
+						// rootNode.scale = [size, size, size];
+						lastDist = dist;
+					}
+				}
+
+				if (camera.projection === "ortho") {
+					camera.ortho.scale / 10;
+					// const size = worldSize;
+					// rootNode.scale = [size, size, size];
+					lastDist = dist;
+				}
+			});
+		}
+
+		const getClickCoordsWithinElement = (function () {
+			const canvasPos = new Float64Array(2);
+			return function (event) {
+				if (!event) {
+					event = window.event;
+					canvasPos[0] = event.x;
+					canvasPos[1] = event.y;
+				} else {
+					var element = event.target;
+					var totalOffsetLeft = 0;
+					var totalOffsetTop = 0;
+
+					while (element.offsetParent) {
+						totalOffsetLeft += element.offsetLeft;
+						totalOffsetTop += element.offsetTop;
+						element = element.offsetParent;
+					}
+					canvasPos[0] = event.pageX - totalOffsetLeft;
+					canvasPos[1] = event.pageY - totalOffsetTop;
+				}
+				return canvasPos;
+			};
+		})();
+
+		const getTouchCoordsWithinElement = (function () {
+			const canvasPos = new Float64Array(2);
+			return function (event) {
+				if (!event) {
+					event = window.event;
+				}
+				if (event.touches && event.touches.length) {
+					// 如果有触摸事件，使用第一个触摸点的坐标
+					canvasPos[0] = event.touches[0].pageX;
+					canvasPos[1] = event.touches[0].pageY;
+				} else {
+					// 否则，假设是鼠标事件
+					var element = event.target;
+					var totalOffsetLeft = 0;
+					var totalOffsetTop = 0;
+
+					while (element.offsetParent) {
+						totalOffsetLeft += element.offsetLeft;
+						totalOffsetTop += element.offsetTop;
+						element = element.offsetParent;
+					}
+					canvasPos[0] = event.pageX - totalOffsetLeft;
+					canvasPos[1] = event.pageY - totalOffsetTop;
+				}
+				return canvasPos;
+			};
+		})();
+
+		//转换为世界坐标
+		const localToWorldVec = (function () {
+			const mat = math.mat4();
+			return function (localVec, worldVec) {
+				math.quaternionToMat4(self._rootNode.quaternion, mat);
+				math.transformVec3(mat, localVec, worldVec);
+				math.normalizeVec3(worldVec);
+				return worldVec;
+			};
+		})();
+
+		var getTranslationPlane = (function () {
+			const planeNormal = math.vec3();
+			return function (worldAxis) {
+				const absX = Math.abs(worldAxis[0]);
+				if (absX > Math.abs(worldAxis[1]) && absX > Math.abs(worldAxis[2])) {
+					math.cross3Vec3(worldAxis, [0, 1, 0], planeNormal);
+				} else {
+					math.cross3Vec3(worldAxis, [1, 0, 0], planeNormal);
+				}
+				math.cross3Vec3(planeNormal, worldAxis, planeNormal);
+				math.normalizeVec3(planeNormal);
+				return planeNormal;
+			};
+		})();
+
+		//拖拽平面
+		const dragTranslateSectionPlane = (function () {
+			const p1 = math.vec3();
+			const p2 = math.vec3();
+			const worldAxis = math.vec4();
+			return function (baseAxis, fromMouse, toMouse) {
+				localToWorldVec(baseAxis, worldAxis);
+				const planeNormal = getTranslationPlane(worldAxis, fromMouse, toMouse);
+				getPointerPlaneIntersect(fromMouse, planeNormal, p1);
+				getPointerPlaneIntersect(toMouse, planeNormal, p2);
+				math.subVec3(p2, p1);
+				const dot = math.dotVec3(p2, worldAxis);
+				self._pos[0] += worldAxis[0] * dot;
+				self._pos[1] += worldAxis[1] * dot;
+				self._pos[2] += worldAxis[2] * dot;
+				self._rootNode.position = self._pos;
+				if (self._sectionPlane) {
+					self._sectionPlane.pos = self._pos;
+				}
+			};
+		})();
+
+		var getPointerPlaneIntersect = (function () {
+			const dir = math.vec4([0, 0, 0, 1]);
+			const matrix = math.mat4();
+			return function (mouse, axis, dest, offset) {
+				offset = offset || 0;
+				dir[0] = (mouse[0] / canvas.width) * 2.0 - 1.0;
+				dir[1] = -((mouse[1] / canvas.height) * 2.0 - 1.0);
+				dir[2] = 0.0;
+				dir[3] = 1.0;
+				math.mulMat4(camera.projMatrix, camera.viewMatrix, matrix); // Unproject norm device coords to view coords
+				math.inverseMat4(matrix);
+				math.transformVec4(matrix, dir, dir);
+				math.mulVec4Scalar(dir, 1.0 / dir[3]); // This is now point A on the ray in world space
+				var rayO = camera.eye; // The direction
+				math.subVec4(dir, rayO, dir);
+				const origin = self._sectionPlane.pos; // Plane origin:
+				var d = -math.dotVec3(origin, axis) - offset;
+				var dot = math.dotVec3(axis, dir);
+				if (Math.abs(dot) > 0.005) {
+					var t = -(math.dotVec3(axis, rayO) + d) / dot;
+					math.mulVec3Scalar(dir, t, dest);
+					math.addVec3(dest, rayO);
+					math.subVec3(dest, origin, dest);
+					return true;
+				}
+				return false;
+			};
+		})();
+
+		{
+			var down = false;
+			// var lastAffordanceMesh;
+
+			this._onCameraControlHover = this._viewer.cameraControl.on("hoverEnter", (hit) => {
+				if (!this._visible) {
+					return;
+				}
+				if (down) {
+					return;
+				}
+				grabbed = false;
+				// if (lastAffordanceMesh) {
+				// 	lastAffordanceMesh.visible = false;
+				// }
+				// var affordanceMesh;
+				const meshId = hit.entity.id;
+				switch (meshId) {
+					case this._displayMeshes.plane.id:
+						// affordanceMesh = this._affordanceMeshes.plane;
+						nextDragAction = DRAG_ACTIONS.zTranslate;
+						break;
+					default:
+						nextDragAction = DRAG_ACTIONS.none;
+						return; // Not clicked an arrow or hoop
+				}
+				// if (affordanceMesh) {
+				// 	affordanceMesh.visible = true;
+				// }
+				// lastAffordanceMesh = affordanceMesh;
+				grabbed = true;
+			});
+
+			this._onCameraControlHoverLeave = this._viewer.cameraControl.on("hoverOutEntity", (hit) => {
+				if (!this._visible) {
+					return;
+				}
+				// if (lastAffordanceMesh) {
+				// 	lastAffordanceMesh.visible = false;
+				// }
+				// lastAffordanceMesh = null;
+				nextDragAction = DRAG_ACTIONS.none;
+			});
+
+			//mousedown
+			canvas.addEventListener(
+				"mousedown",
+				(this._canvasMouseDownListener = (e) => {
+					e.preventDefault();
+					if (!this._visible || !grabbed) return;
+
+					this._viewer.cameraControl.pointerEnabled = false;
+					switch (e.which) {
+						case 1: // Left button
+							down = true;
+							var canvasPos = getClickCoordsWithinElement(e); //获取鼠标点击对应坐标
+							dragAction = nextDragAction;
+							lastCanvasPos[0] = canvasPos[0];
+							lastCanvasPos[1] = canvasPos[1];
+							break;
+					}
+				})
+			);
+			//mousemove
+			canvas.addEventListener(
+				"mousemove",
+				(this._canvasMouseMoveListener = (e) => {
+					if (!this._visible) {
+						return;
+					}
+					if (!down) {
+						return;
+					}
+					var canvasPos = getClickCoordsWithinElement(e);
+					const x = canvasPos[0];
+					const y = canvasPos[1];
+
+					switch (dragAction) {
+						case DRAG_ACTIONS.xTranslate:
+							dragTranslateSectionPlane(xBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.yTranslate:
+							dragTranslateSectionPlane(yBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.zTranslate:
+							dragTranslateSectionPlane(zBaseAxis, lastCanvasPos, canvasPos);
+							break;
+					}
+
+					lastCanvasPos[0] = x;
+					lastCanvasPos[1] = y;
+				})
+			);
+			//mouseup
+			canvas.addEventListener(
+				"mouseup",
+				(this._canvasMouseUpListener = (e) => {
+					if (!this._visible) return;
+					this._viewer.cameraControl.pointerEnabled = true;
+					if (!down) {
+						return;
+					}
+					switch (e.which) {
+											}
+					down = false;
+					grabbed = false;
+				})
+			);
+
+			//wheel
+			canvas.addEventListener(
+				"wheel",
+				(this._canvasWheelListener = (e) => {
+					if (!this._visible) {
+						return;
+					}
+					var delta = Math.max(-1, Math.min(1, -e.deltaY * 40));
+					if (delta === 0) {
+						return;
+					}
+				})
+			);
+
+			this._onCameraControlHover = this._viewer.cameraControl.on("touchEntity", (hit) => {
+				if (!this._visible || down || grabbed) return;
+				// if (lastAffordanceMesh) {
+				// 	lastAffordanceMesh.visible = false;
+				// }
+				var affordanceMesh;
+				const meshId = hit.entity.id;
+				switch (meshId) {
+					case this._displayMeshes.plane.id:
+						affordanceMesh = this._affordanceMeshes.plane;
+						nextDragAction = DRAG_ACTIONS.zTranslate;
+						break;
+
+					default:
+						nextDragAction = DRAG_ACTIONS.none;
+						return; // Not clicked an arrow or hoop
+				}
+				if (affordanceMesh) {
+					affordanceMesh.visible = true;
+				}
+				// lastAffordanceMesh = affordanceMesh;
+				grabbed = true;
+				down = true;
+			});
+			//touchstart
+			canvas.addEventListener(
+				"touchstart",
+				(this._canvasMouseDownListener = (e) => {
+					e.preventDefault();
+					if (!this._visible || !grabbed || !down) return;
+					this._viewer.cameraControl.pointerEnabled = false;
+					// if (lastAffordanceMesh) {
+					// 	lastAffordanceMesh.visible = true;
+					// }
+					var canvasPos = getTouchCoordsWithinElement(e);
+					dragAction = nextDragAction;
+					lastCanvasPos[0] = canvasPos[0];
+					lastCanvasPos[1] = canvasPos[1];
+				})
+			);
+			//touchmove
+			canvas.addEventListener(
+				"touchmove",
+				(this._canvasMouseMoveListener = (e) => {
+					if (!this._visible || !down || !grabbed) return;
+
+					var canvasPos = getTouchCoordsWithinElement(e);
+					const x = canvasPos[0];
+					const y = canvasPos[1];
+
+					switch (dragAction) {
+						case DRAG_ACTIONS.xTranslate:
+							dragTranslateSectionPlane(xBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.yTranslate:
+							dragTranslateSectionPlane(yBaseAxis, lastCanvasPos, canvasPos);
+							break;
+						case DRAG_ACTIONS.zTranslate:
+							dragTranslateSectionPlane(zBaseAxis, lastCanvasPos, canvasPos);
+							break;
+					}
+
+					lastCanvasPos[0] = x;
+					lastCanvasPos[1] = y;
+				})
+			);
+			//touchend
+			canvas.addEventListener(
+				"touchend",
+				(this._canvasTouchEndListener = (e) => {
+					if (!this._visible) return;
+					if (grabbed) this._viewer.cameraControl.pointerEnabled = true;
+					// if (lastAffordanceMesh) {
+					// 	lastAffordanceMesh.visible = false;
+					// }
+					// lastAffordanceMesh = null;
+					nextDragAction = DRAG_ACTIONS.none;
+					down = false;
+					grabbed = false;
+				})
+			);
+			canvas.addEventListener("touchcancel", this._canvasTouchEndListener);
+		}
+	}
+
+	_destroy() {
+		this._unbindEvents();
+		this._destroyNodes();
+	}
+
+	_unbindEvents() {
+		const viewer = this._viewer;
+		const scene = viewer.scene;
+		const canvas = scene.canvas.canvas;
+		const camera = viewer.camera;
+		const cameraControl = viewer.cameraControl;
+
+		scene.off(this._onSceneTick);
+
+		canvas.removeEventListener("mousedown", this._canvasMouseDownListener);
+		canvas.removeEventListener("mousemove", this._canvasMouseMoveListener);
+		canvas.removeEventListener("mouseup", this._canvasMouseUpListener);
+		canvas.removeEventListener("wheel", this._canvasWheelListener);
+		canvas.removeEventListener("touchend", this._canvasTouchEndListener);
+		canvas.removeEventListener("touchcancel", this._canvasTouchEndListener);
+
+		camera.off(this._onCameraViewMatrix);
+		camera.off(this._onCameraProjMatrix);
+
+		cameraControl.off(this._onCameraControlHover);
+		cameraControl.off(this._onCameraControlHoverLeave);
+	}
+
+	_destroyNodes() {
+		this._setSectionPlane(null);
+		this._rootNode.destroy();
+		this._displayMeshes = {};
+		this._affordanceMeshes = {};
+	}
+}
+
+/**
+ * Renders a 3D plane within an {@link Overview} to indicate its {@link SectionPlane}'s current position and orientation.
+ *
+ * @private
+ */
+class Plane$1 {
+
+    /** @private */
+    constructor(overview, overviewScene, sectionPlane) {
+
+        /**
+         * The ID of this SectionPlanesOverviewPlane.
+         *
+         * @type {String}
+         */
+        this.id = sectionPlane.id;
+
+        /**
+         * The {@link SectionPlane} represented by this SectionPlanesOverviewPlane.
+         *
+         * @type {SectionPlane}
+         */
+        this._sectionPlane = sectionPlane;
+
+        this._mesh = new Mesh(overviewScene, {
+            id: sectionPlane.id,
+            geometry: new ReadableGeometry(overviewScene, buildBoxGeometry({
+                xSize: .5,
+                ySize: .5,
+                zSize: .001
+            })),
+            material: new PhongMaterial(overviewScene, {
+                emissive: [1, 1, 1],
+                diffuse: [0, 0, 0],
+                backfaces: false
+            }),
+            edgeMaterial: new EdgeMaterial(overviewScene, {
+                edgeColor: [0.0, 0.0, 0.0],
+                edgeAlpha: 1.0,
+                edgeWidth: 1
+            }),
+            highlightMaterial: new EmphasisMaterial(overviewScene, {
+                fill: true,
+                fillColor: [0.5, 1, 0.5],
+                fillAlpha: 0.7,
+                edges: true,
+                edgeColor: [0.0, 0.0, 0.0],
+                edgeAlpha: 1.0,
+                edgeWidth: 1
+            }),
+            selectedMaterial: new EmphasisMaterial(overviewScene, {
+                fill: true,
+                fillColor: [0, 0, 1],
+                fillAlpha: 0.7,
+                edges: true,
+                edgeColor: [1.0, 0.0, 0.0],
+                edgeAlpha: 1.0,
+                edgeWidth: 1
+            }),
+            highlighted: true,
+            scale: [3, 3, 3],
+            position: [0, 0, 0],
+            rotation: [0, 0, 0],
+            opacity: 0.3,
+            edges: true
+        });
+
+
+        {
+            const vec = math.vec3([0, 0, 0]);
+            const pos2 = math.vec3();
+            const zeroVec = math.vec3([0, 0, 1]);
+            const quat = math.vec4(4);
+            const pos3 = math.vec3();
+
+            const update = () => {
+
+                const origin = this._sectionPlane.scene.center;
+
+                const negDir = [-this._sectionPlane.dir[0], -this._sectionPlane.dir[1], -this._sectionPlane.dir[2]];
+                math.subVec3(origin, this._sectionPlane.pos, vec);
+                const dist = -math.dotVec3(negDir, vec);
+
+                math.normalizeVec3(negDir);
+                math.mulVec3Scalar(negDir, dist, pos2);
+                const quaternion = math.vec3PairToQuaternion(zeroVec, this._sectionPlane.dir, quat);
+
+                pos3[0] = pos2[0] * 0.1;
+                pos3[1] = pos2[1] * 0.1;
+                pos3[2] = pos2[2] * 0.1;
+
+                this._mesh.quaternion = quaternion;
+                this._mesh.position = pos3;
+            };
+
+            this._onSectionPlanePos = this._sectionPlane.on("pos", update);
+            this._onSectionPlaneDir = this._sectionPlane.on("dir", update);
+
+            // update();
         }
+
+        this._highlighted = false;
+        this._selected = false;
     }
 
     /**
-     * Sets if this SectionPlanesOverview is visible.
+     * Sets if this SectionPlanesOverviewPlane is highlighted.
      *
-     * @param {Boolean} visible Whether or not this SectionPlanesOverview is visible.
+     * @type {Boolean}
+     * @private
      */
-    setVisible(visible = true) {
-        this._visible = visible;
-        this._canvas.style.visibility = visible ? "visible" : "hidden";
+    setHighlighted(highlighted) {
+        this._highlighted = !!highlighted;
+        this._mesh.highlighted = this._highlighted;
+        this._mesh.highlightMaterial.fillColor = highlighted ? [0, 0.7, 0] : [0, 0, 0];
+        // this._selectedMesh.highlighted = true;
     }
 
     /**
-     * Gets if this SectionPlanesOverview is visible.
+     * Gets if this SectionPlanesOverviewPlane is highlighted.
      *
-     * @return {Boolean} True when this SectionPlanesOverview is visible.
+     * @type {Boolean}
+     * @private
      */
-    getVisible() {
-        return this._visible;
+    getHighlighted() {
+        return this._highlighted;
+    }
+
+    /**
+     * Sets if this SectionPlanesOverviewPlane is selected.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    setSelected(selected) {
+        this._selected = !!selected;
+        this._mesh.edgeMaterial.edgeWidth = selected ? 3 : 1;
+        this._mesh.highlightMaterial.edgeWidth = selected ? 3 : 1;
+
     }
 
-    /**  @private
+    /**
+     * Gets if this SectionPlanesOverviewPlane is selected.
+     *
+     * @type {Boolean}
+     * @private
      */
-    destroy() {
-        this._viewer.camera.off(this._onViewerCameraMatrix);
-        this._viewer.camera.off(this._onViewerCameraWorldAxis);
-        this._viewer.camera.perspective.off(this._onViewerCameraFOV);
+    getSelected() {
+        return this._selected;
+    }
 
-        this._scene.input.off(this._onInputMouseMove);
-        this._scene.canvas.canvas.removeEventListener("mouseup", this._onCanvasMouseUp);
-        this._scene.canvas.canvas.removeEventListener("mouseout", this._onCanvasMouseOut);
-        this._scene.destroy();
+    /** @private */
+    destroy() {
+        this._sectionPlane.off(this._onSectionPlanePos);
+        this._sectionPlane.off(this._onSectionPlaneDir);
+        this._mesh.destroy();
     }
 }
 
+/**
+ * @desc An interactive 3D overview for navigating the {@link SectionPlane}s created by its {@link SectionPlanesPlugin}.
+ *
+ * * Located at {@link SectionPlanesPlugin#overview}.
+ * * Renders the overview on a separate canvas at a corner of the {@link Viewer}'s {@link Scene} {@link Canvas}.
+ * * The overview shows a 3D plane object for each {@link SectionPlane} in the {@link Scene}.
+ * * Click a plane object in the overview to toggle the visibility of a 3D gizmo to edit the position and orientation of its {@link SectionPlane}.
+ *
+ * @private
+ */
+class Overview$1 {
+	/**
+	 * @private
+	 */
+	constructor(plugin, cfg) {
+		if (!cfg.onHoverEnterPlane || !cfg.onHoverLeavePlane || !cfg.onClickedNothing || !cfg.onClickedPlane) {
+			throw "Missing config(s): onHoverEnterPlane, onHoverLeavePlane, onClickedNothing || onClickedPlane";
+		}
+
+		/**
+		 * The {@link SectionPlanesPlugin} that owns this SectionPlanesOverview.
+		 *
+		 * @type {SectionPlanesPlugin}
+		 */
+		this.plugin = plugin;
+
+		this._viewer = plugin.viewer;
+
+		this._onHoverEnterPlane = cfg.onHoverEnterPlane;
+		this._onHoverLeavePlane = cfg.onHoverLeavePlane;
+		this._onClickedNothing = cfg.onClickedNothing;
+		this._onClickedPlane = cfg.onClickedPlane;
+		this._visible = true;
+
+		this._planes = {};
+
+		//--------------------------------------------------------------------------------------------------------------
+		// Init canvas
+		//--------------------------------------------------------------------------------------------------------------
+
+		this._canvas = cfg.overviewCanvas;
+
+		//--------------------------------------------------------------------------------------------------------------
+		// Init scene
+		//--------------------------------------------------------------------------------------------------------------
+
+		this._scene = new Scene(this._viewer, {
+			canvasId: this._canvas.id,
+			transparent: true
+		});
+		this._scene.clearLights();
+		new DirLight(this._scene, {
+			dir: [0.4, -0.4, 0.8],
+			color: [0.8, 1.0, 1.0],
+			intensity: 1.0,
+			space: "view"
+		});
+		new DirLight(this._scene, {
+			dir: [-0.8, -0.3, -0.4],
+			color: [0.8, 0.8, 0.8],
+			intensity: 1.0,
+			space: "view"
+		});
+		new DirLight(this._scene, {
+			dir: [0.8, -0.6, -0.8],
+			color: [1.0, 1.0, 1.0],
+			intensity: 1.0,
+			space: "view"
+		});
+
+		this._scene.camera;
+		this._scene.camera.perspective.fov = 70;
+
+		this._zUp = false;
+
+		//--------------------------------------------------------------------------------------------------------------
+		// Synchronize overview scene camera with viewer camera
+		//--------------------------------------------------------------------------------------------------------------
+
+		{
+			const camera = this._scene.camera;
+			const matrix = math.rotationMat4c(-90 * math.DEGTORAD, 1, 0, 0);
+			const eyeLookVec = math.vec3();
+			const eyeLookVecOverview = math.vec3();
+			const upOverview = math.vec3();
+
+			this._synchCamera = () => {
+				const eye = this._viewer.camera.eye;
+				const look = this._viewer.camera.look;
+				const up = this._viewer.camera.up;
+				math.mulVec3Scalar(math.normalizeVec3(math.subVec3(eye, look, eyeLookVec)), 7);
+				if (this._zUp) {
+					// +Z up
+					math.transformVec3(matrix, eyeLookVec, eyeLookVecOverview);
+					math.transformVec3(matrix, up, upOverview);
+					camera.look = [0, 0, 0];
+					camera.eye = math.transformVec3(matrix, eyeLookVec, eyeLookVecOverview);
+					camera.up = math.transformPoint3(matrix, up, upOverview);
+				} else {
+					// +Y up
+					camera.look = [0, 0, 0];
+					camera.eye = eyeLookVec;
+					camera.up = up;
+				}
+			};
+		}
+
+		this._onViewerCameraMatrix = this._viewer.camera.on("matrix", this._synchCamera);
+
+		this._onViewerCameraWorldAxis = this._viewer.camera.on("worldAxis", this._synchCamera);
+
+		this._onViewerCameraFOV = this._viewer.camera.perspective.on("fov", (fov) => {
+			this._scene.camera.perspective.fov = fov;
+		});
+
+		//--------------------------------------------------------------------------------------------------------------
+		// Bind overview canvas events
+		//--------------------------------------------------------------------------------------------------------------
+
+		{
+			var hoveredEntity = null;
+
+			this._onInputMouseMove = this._scene.input.on("mousemove", (coords) => {
+				const hit = this._scene.pick({
+					canvasPos: coords
+				});
+				if (hit) {
+					if (!hoveredEntity || hit.entity.id !== hoveredEntity.id) {
+						if (hoveredEntity) {
+							const plane = this._planes[hoveredEntity.id];
+							if (plane) {
+								this._onHoverLeavePlane(hoveredEntity.id);
+							}
+						}
+						hoveredEntity = hit.entity;
+						const plane = this._planes[hoveredEntity.id];
+						if (plane) {
+							this._onHoverEnterPlane(hoveredEntity.id);
+						}
+					}
+				} else {
+					if (hoveredEntity) {
+						this._onHoverLeavePlane(hoveredEntity.id);
+						hoveredEntity = null;
+					}
+				}
+			});
+
+			this._scene.canvas.canvas.addEventListener(
+				"mouseup",
+				(this._onCanvasMouseUp = () => {
+					if (hoveredEntity) {
+						const plane = this._planes[hoveredEntity.id];
+						if (plane) {
+							this._onClickedPlane(hoveredEntity.id);
+						}
+					} else {
+						this._onClickedNothing();
+					}
+				})
+			);
+
+			this._scene.canvas.canvas.addEventListener(
+				"mouseout",
+				(this._onCanvasMouseOut = () => {
+					if (hoveredEntity) {
+						this._onHoverLeavePlane(hoveredEntity.id);
+						hoveredEntity = null;
+					}
+				})
+			);
+		}
+
+		//--------------------------------------------------------------------------------------------------------------
+		// Configure overview
+		//--------------------------------------------------------------------------------------------------------------
+
+		this.setVisible(cfg.overviewVisible);
+	}
+
+	/** Called by SectionPlanesPlugin#createSectionPlane()
+	 * @private
+	 */
+	addSectionPlane(sectionPlane) {
+		this._planes[sectionPlane.id] = new Plane$1(this, this._scene, sectionPlane);
+	}
+
+	/**  @private
+	 */
+	setPlaneHighlighted(id, highlighted) {
+		const plane = this._planes[id];
+		if (plane) {
+			plane.setHighlighted(highlighted);
+		}
+	}
+
+	/**  @private
+	 */
+	setPlaneSelected(id, selected) {
+		const plane = this._planes[id];
+		if (plane) {
+			plane.setSelected(selected);
+		}
+	}
+
+	/** @private
+	 */
+	removeSectionPlane(sectionPlane) {
+		const plane = this._planes[sectionPlane.id];
+		if (plane) {
+			plane.destroy();
+			delete this._planes[sectionPlane.id];
+		}
+	}
+
+	/**
+	 * Sets if this SectionPlanesOverview is visible.
+	 *
+	 * @param {Boolean} visible Whether or not this SectionPlanesOverview is visible.
+	 */
+	setVisible(visible = true) {
+		this._visible = visible;
+		this._canvas.style.visibility = visible ? "visible" : "hidden";
+	}
+
+	/**
+	 * Gets if this SectionPlanesOverview is visible.
+	 *
+	 * @return {Boolean} True when this SectionPlanesOverview is visible.
+	 */
+	getVisible() {
+		return this._visible;
+	}
+
+	/**  @private
+	 */
+	destroy() {
+		this._viewer.camera.off(this._onViewerCameraMatrix);
+		this._viewer.camera.off(this._onViewerCameraWorldAxis);
+		this._viewer.camera.perspective.off(this._onViewerCameraFOV);
+
+		this._scene.input.off(this._onInputMouseMove);
+		this._scene.canvas.canvas.removeEventListener("mouseup", this._onCanvasMouseUp);
+		this._scene.canvas.canvas.removeEventListener("mouseout", this._onCanvasMouseOut);
+		this._scene.destroy();
+	}
+}
+
 const tempAABB$1 = math.AABB3();
 const tempVec3$1 = math.vec3();
 
@@ -121477,312 +123146,410 @@ const tempVec3$1 = math.vec3();
  * ````
  */
 class SectionPlanesPlugin extends Plugin {
+	/**
+	 * @constructor
+	 * @param {Viewer} viewer The Viewer.
+	 * @param {Object} cfg Plugin configuration.
+	 * @param {String} [cfg.id="SectionPlanes"] Optional ID for this plugin, so that we can find it within {@link Viewer#plugins}.
+	 * @param {String} [cfg.overviewCanvasId] ID of a canvas element to display the overview.
+	 * @param {String} [cfg.overviewVisible=true] Initial visibility of the overview canvas.
+	 */
+	constructor(viewer, cfg = {}) {
+		super("SectionPlanes", viewer);
 
-    /**
-     * @constructor
-     * @param {Viewer} viewer The Viewer.
-     * @param {Object} cfg Plugin configuration.
-     * @param {String} [cfg.id="SectionPlanes"] Optional ID for this plugin, so that we can find it within {@link Viewer#plugins}.
-     * @param {String} [cfg.overviewCanvasId] ID of a canvas element to display the overview.
-     * @param {String} [cfg.overviewVisible=true] Initial visibility of the overview canvas.
-     */
-    constructor(viewer, cfg = {}) {
-
-        super("SectionPlanes", viewer);
+		this._freeControls = [];
+		this._sectionPlanes = viewer.scene.sectionPlanes;
+		this._controls = {};
+		this._currentControl = null;
+		this._shownControlId = null;
 
-        this._freeControls = [];
-        this._sectionPlanes = viewer.scene.sectionPlanes;
-        this._controls = {};
-        this._shownControlId = null;
+		if (cfg.overviewCanvasId !== null && cfg.overviewCanvasId !== undefined) {
+			const overviewCanvas = document.getElementById(cfg.overviewCanvasId);
 
-        if (cfg.overviewCanvasId !== null && cfg.overviewCanvasId !== undefined) {
+			if (!overviewCanvas) {
+				this.warn("Can't find overview canvas: '" + cfg.overviewCanvasId + "' - will create plugin without overview");
+			} else {
+				this._overview = new Overview$1(this, {
+					overviewCanvas: overviewCanvas,
+					visible: cfg.overviewVisible,
 
-            const overviewCanvas = document.getElementById(cfg.overviewCanvasId);
+					onHoverEnterPlane: (id) => {
+						this._overview.setPlaneHighlighted(id, true);
+					},
 
-            if (!overviewCanvas) {
-                this.warn("Can't find overview canvas: '" + cfg.overviewCanvasId + "' - will create plugin without overview");
+					onHoverLeavePlane: (id) => {
+						this._overview.setPlaneHighlighted(id, false);
+					},
 
-            } else {
+					onClickedPlane: (id) => {
+						if (this.getShownControl() === id) {
+							this.hideControl();
+							return;
+						}
+						this.showControl(id);
+						const sectionPlane = this.sectionPlanes[id];
+						const sectionPlanePos = sectionPlane.pos;
+						tempAABB$1.set(this.viewer.scene.aabb);
+						math.getAABB3Center(tempAABB$1, tempVec3$1);
+						tempAABB$1[0] += sectionPlanePos[0] - tempVec3$1[0];
+						tempAABB$1[1] += sectionPlanePos[1] - tempVec3$1[1];
+						tempAABB$1[2] += sectionPlanePos[2] - tempVec3$1[2];
+						tempAABB$1[3] += sectionPlanePos[0] - tempVec3$1[0];
+						tempAABB$1[4] += sectionPlanePos[1] - tempVec3$1[1];
+						tempAABB$1[5] += sectionPlanePos[2] - tempVec3$1[2];
+						this.viewer.cameraFlight.flyTo({
+							aabb: tempAABB$1,
+							fitFOV: 65
+						});
+					},
 
-                this._overview = new Overview$1(this, {
-                    overviewCanvas: overviewCanvas,
-                    visible: cfg.overviewVisible,
+					onClickedNothing: () => {
+						this.hideControl();
+					}
+				});
+			}
+		}
 
-                    onHoverEnterPlane: ((id) => {
-                        this._overview.setPlaneHighlighted(id, true);
-                    }),
+		this._onSceneSectionPlaneCreated = viewer.scene.on("sectionPlaneCreated", (sectionPlane) => {
+			// SectionPlane created, either via SectionPlanesPlugin#createSectionPlane(), or by directly
+			// instantiating a SectionPlane independently of SectionPlanesPlugin, which can be done
+			// by BCFViewpointsPlugin#loadViewpoint().
 
-                    onHoverLeavePlane: ((id) => {
-                        this._overview.setPlaneHighlighted(id, false);
-                    }),
+			this._sectionPlaneCreated(sectionPlane);
+		});
+	}
 
-                    onClickedPlane: ((id) => {
-                        if (this.getShownControl() === id) {
-                            this.hideControl();
-                            return;
-                        }
-                        this.showControl(id);
-                        const sectionPlane = this.sectionPlanes[id];
-                        const sectionPlanePos = sectionPlane.pos;
-                        tempAABB$1.set(this.viewer.scene.aabb);
-                        math.getAABB3Center(tempAABB$1, tempVec3$1);
-                        tempAABB$1[0] += sectionPlanePos[0] - tempVec3$1[0];
-                        tempAABB$1[1] += sectionPlanePos[1] - tempVec3$1[1];
-                        tempAABB$1[2] += sectionPlanePos[2] - tempVec3$1[2];
-                        tempAABB$1[3] += sectionPlanePos[0] - tempVec3$1[0];
-                        tempAABB$1[4] += sectionPlanePos[1] - tempVec3$1[1];
-                        tempAABB$1[5] += sectionPlanePos[2] - tempVec3$1[2];
-                        this.viewer.cameraFlight.flyTo({
-                            aabb: tempAABB$1,
-                            fitFOV: 65
-                        });
-                    }),
+	/**
+	 * Sets if the overview canvas is visible.
+	 *
+	 * @param {Boolean} visible Whether or not the overview canvas is visible.
+	 */
+	setOverviewVisible(visible) {
+		if (this._overview) {
+			this._overview.setVisible(visible);
+		}
+	}
 
-                    onClickedNothing: (() => {
-                        this.hideControl();
-                    })
-                });
-            }
-        }
+	/**
+	 * Gets if the overview canvas is visible.
+	 *
+	 * @return {Boolean} True when the overview canvas is visible.
+	 */
+	getOverviewVisible() {
+		if (this._overview) {
+			return this._overview.getVisible();
+		}
+	}
 
-        this._onSceneSectionPlaneCreated = viewer.scene.on("sectionPlaneCreated", (sectionPlane) => {
+	/**
+	 * Returns a map of the {@link SectionPlane}s created by this SectionPlanesPlugin.
+	 *
+	 * @returns {{String:SectionPlane}} A map containing the {@link SectionPlane}s, each mapped to its {@link SectionPlane#id}.
+	 */
+	get sectionPlanes() {
+		return this._sectionPlanes;
+	}
 
-            // SectionPlane created, either via SectionPlanesPlugin#createSectionPlane(), or by directly
-            // instantiating a SectionPlane independently of SectionPlanesPlugin, which can be done
-            // by BCFViewpointsPlugin#loadViewpoint().
+	/**
+	 * Creates a {@link SectionPlane}.
+	 *
+	 * The {@link SectionPlane} will be registered by {@link SectionPlane#id} in {@link SectionPlanesPlugin#sectionPlanes}.
+	 *
+	 * @param {Object} params {@link SectionPlane} configuration.
+	 * @param {String} [params.id] Unique ID to assign to the {@link SectionPlane}. Must be unique among all components in the {@link Viewer}'s {@link Scene}. Auto-generated when omitted.
+	 * @param {Number[]} [params.pos=[0,0,0]] World-space position of the {@link SectionPlane}.
+	 * @param {Number[]} [params.dir=[0,0,-1]] World-space vector indicating the orientation of the {@link SectionPlane}.
+	 * @param {Boolean} [params.active=true] Whether the {@link SectionPlane} is initially active. Only clips while this is true.
+	 * @returns {SectionPlane} The new {@link SectionPlane}.
+	 */
+	createSectionPlane(params = {}) {
+		if (params.id !== undefined && params.id !== null && this.viewer.scene.components[params.id]) {
+			this.error("Viewer component with this ID already exists: " + params.id);
+			delete params.id;
+		}
 
-            this._sectionPlaneCreated(sectionPlane);
-        });
-    }
+		// Note that SectionPlane constructor fires "sectionPlaneCreated" on the Scene,
+		// which SectionPlanesPlugin handles and calls #_sectionPlaneCreated to create gizmo and add to overview canvas.
 
-    /**
-     * Sets if the overview canvas is visible.
-     *
-     * @param {Boolean} visible Whether or not the overview canvas is visible.
-     */
-    setOverviewVisible(visible) {
-        if (this._overview) {
-            this._overview.setVisible(visible);
-        }
-    }
+		const sectionPlane = new SectionPlane(this.viewer.scene, {
+			id: params.id,
+			pos: params.pos,
+			dir: params.dir,
+			active: true 
+		});
+		return sectionPlane;
+	}
 
-    /**
-     * Gets if the overview canvas is visible.
-     *
-     * @return {Boolean} True when the overview canvas is visible.
-     */
-    getOverviewVisible() {
-        if (this._overview) {
-            return this._overview.getVisible();
-        }
-    }
+	//剖切面创建后，创建一个控制器
+	_sectionPlaneCreated(sectionPlane) {
+		let newControl;
+		switch (this._sectionWay) {
+			case "plane":
+				newControl = new ClippingPlane(this, this._controlsConfig);
+				break;
+			case "box":
+				newControl = new ClippingBox(this, this._controlsConfig);
+				break;
+			default:
+				newControl = new Control(this);
+				break;
+		}
+		const control = this._freeControls.length > 0 ? this._freeControls.pop() : newControl;
+		control._setSectionPlane(sectionPlane);
+		control.setVisible(true);
+		this._currentControl = control;
+		this._controls[sectionPlane.id] = control;
+		if (this._overview) {
+			this._overview.addSectionPlane(sectionPlane);
+		}
+		sectionPlane.once("destroyed", () => {
+			this._sectionPlaneDestroyed(sectionPlane);
+		});
+	}
 
-    /**
-     * Returns a map of the {@link SectionPlane}s created by this SectionPlanesPlugin.
-     *
-     * @returns {{String:SectionPlane}} A map containing the {@link SectionPlane}s, each mapped to its {@link SectionPlane#id}.
-     */
-    get sectionPlanes() {
-        return this._sectionPlanes;
-    }
+	/**
+	 * 设置是否是触屏模式
+	 * @param {boolean} touch
+	 */
+	set isTouch(touch) {
+		this._isTouch = touch;
+		if (touch === true) this.sectionWay = "plane";
+		else this.sectionWay = "control";
+	}
 
-    /**
-     * Creates a {@link SectionPlane}.
-     *
-     * The {@link SectionPlane} will be registered by {@link SectionPlane#id} in {@link SectionPlanesPlugin#sectionPlanes}.
-     *
-     * @param {Object} params {@link SectionPlane} configuration.
-     * @param {String} [params.id] Unique ID to assign to the {@link SectionPlane}. Must be unique among all components in the {@link Viewer}'s {@link Scene}. Auto-generated when omitted.
-     * @param {Number[]} [params.pos=[0,0,0]] World-space position of the {@link SectionPlane}.
-     * @param {Number[]} [params.dir=[0,0,-1]] World-space vector indicating the orientation of the {@link SectionPlane}.
-     * @param {Boolean} [params.active=true] Whether the {@link SectionPlane} is initially active. Only clips while this is true.
-     * @returns {SectionPlane} The new {@link SectionPlane}.
-     */
-    createSectionPlane(params = {}) {
+	/**
+	 * 设置剖切对象样式
+	 * @param {any} cfg
+	 * @param {number} cfg.planeSize?
+	 * @param {number} cfg.controlSize?
+	 * @param {number} cfg.planeOpacity?
+	 * @param {number[]} cfg.controlFillColor?
+	 * @param {number[]} cfg.controlEdgeColor?
+	 */
+	set sectionConfigs(cfg) {
+		this._controlsConfig = cfg;
+	}
 
-        if (params.id !== undefined && params.id !== null && this.viewer.scene.components[params.id]) {
-            this.error("Viewer component with this ID already exists: " + params.id);
-            delete params.id;
-        }
+	/**
+	 * 设置剖切方式
+	 * @param {string} way
+	 */
+	set sectionWay(way) {
+		this._sectionWay = way;
+	}
 
-        // Note that SectionPlane constructor fires "sectionPlaneCreated" on the Scene,
-        // which SectionPlanesPlugin handles and calls #_sectionPlaneCreated to create gizmo and add to overview canvas.
+	/**
+	 * 设置剖切面方向
+	 * @param {number} direction
+	 */
+	set sectionDirection(direction) {
+		this.clear();
+		let dir;
+		switch (direction) {
+			case 0:
+				dir = [0, 0, -1];
+				break;
+			case 1:
+				dir = [0, -1, 0];
+				break;
+			case 2:
+				dir = [-1, 0, 0];
+				break;
+		}
+		this.createSectionPlane({
+			pos: this.viewer.camera.look,
+			dir: dir
+		});
+	}
 
-        const sectionPlane = new SectionPlane(this.viewer.scene, {
-            id: params.id,
-            pos: params.pos,
-            dir: params.dir,
-            active: true 
-        });
-        return sectionPlane;
-    }
+	/**
+	 * 设置剖切面位置
+	 * @param id
+	 * @param pos
+	 */
+	setControlPos(posRate) {
+		if (this._currentControl == null) return;
+		// if (this._currentControl.type != "plane") return;
+		this._currentControl.pos = posRate;
+	}
 
-    _sectionPlaneCreated(sectionPlane) {
-        const control = (this._freeControls.length > 0) ? this._freeControls.pop() : new Control(this);
-        control._setSectionPlane(sectionPlane);
-        control.setVisible(false);
-        this._controls[sectionPlane.id] = control;
-        if (this._overview) {
-            this._overview.addSectionPlane(sectionPlane);
-        }
-        sectionPlane.once("destroyed", () => {
-            this._sectionPlaneDestroyed(sectionPlane);
-        });
-    }
+	/**
+	 * Inverts the direction of {@link SectionPlane#dir} on every existing SectionPlane.
+	 *
+	 * Inverts all SectionPlanes, including those that were not created with SectionPlanesPlugin.
+	 */
+	flipSectionPlanes() {
+		const sectionPlanes = this.viewer.scene.sectionPlanes;
+		for (let id in sectionPlanes) {
+			const sectionPlane = sectionPlanes[id];
+			sectionPlane.flipDir();
+		}
+	}
 
-    /**
-     * Inverts the direction of {@link SectionPlane#dir} on every existing SectionPlane.
-     *
-     * Inverts all SectionPlanes, including those that were not created with SectionPlanesPlugin.
-     */
-    flipSectionPlanes() {
-        const sectionPlanes = this.viewer.scene.sectionPlanes;
-        for (let id in sectionPlanes) {
-            const sectionPlane = sectionPlanes[id];
-            sectionPlane.flipDir();
-        }
-    }
+	/**
+	 * Shows the 3D editing gizmo for a {@link SectionPlane}.
+	 *
+	 * @param {String} id ID of the {@link SectionPlane}.
+	 */
+	showControl(id) {
+		const control = this._controls[id];
+		if (!control) {
+			this.error("Control not found: " + id);
+			return;
+		}
+		this.hideControl();
+		control.setVisible(true);
+		if (this._overview) {
+			this._overview.setPlaneSelected(id, true);
+		}
+		this._shownControlId = id;
+	}
 
-    /**
-     * Shows the 3D editing gizmo for a {@link SectionPlane}.
-     *
-     * @param {String} id ID of the {@link SectionPlane}.
-     */
-    showControl(id) {
-        const control = this._controls[id];
-        if (!control) {
-            this.error("Control not found: " + id);
-            return;
-        }
-        this.hideControl();
-        control.setVisible(true);
-        if (this._overview) {
-            this._overview.setPlaneSelected(id, true);
-        }
-        this._shownControlId = id;
-    }
+	/**
+	 * 设置剖切对象的尺寸
+	 * @param {*} size
+	 */
+	setControlsSize(size) {
+		for (let id in this._controls) {
+			this._controls[id].controlSize = size;
+		}
+	}
 
-    /**
-     * Gets the ID of the {@link SectionPlane} that the 3D editing gizmo is shown for.
-     *
-     * Returns ````null```` when the editing gizmo is not shown.
-     *
-     * @returns {String} ID of the the {@link SectionPlane} that the 3D editing gizmo is shown for, if shown, else ````null````.
-     */
-    getShownControl() {
-        return this._shownControlId;
-    }
+	/**
+	 * 设置指定id剖切对象的尺寸
+	 * @param {*} id
+	 * @param {*} size
+	 * @returns
+	 */
+	setControlSizeByID(id, size) {
+		const control = this._controls[id];
+		if (!control) {
+			this.error("Control not found: " + id);
+			return;
+		}
+		this._controls[id].controlSize = size;
+	}
 
-    /**
-     * Hides the 3D {@link SectionPlane} editing gizmo if shown.
-     */
-    hideControl() {
-        for (var id in this._controls) {
-            if (this._controls.hasOwnProperty(id)) {
-                this._controls[id].setVisible(false);
-                if (this._overview) {
-                    this._overview.setPlaneSelected(id, false);
-                }
-            }
-        }
-        this._shownControlId = null;
-    }
+	/**
+	 * Gets the ID of the {@link SectionPlane} that the 3D editing gizmo is shown for.
+	 *
+	 * Returns ````null```` when the editing gizmo is not shown.
+	 *
+	 * @returns {String} ID of the the {@link SectionPlane} that the 3D editing gizmo is shown for, if shown, else ````null````.
+	 */
+	getShownControl() {
+		return this._shownControlId;
+	}
 
-    /**
-     * Destroys a {@link SectionPlane} created by this SectionPlanesPlugin.
-     *
-     * @param {String} id ID of the {@link SectionPlane}.
-     */
-    destroySectionPlane(id) {
-        var sectionPlane = this.viewer.scene.sectionPlanes[id];
-        if (!sectionPlane) {
-            this.error("SectionPlane not found: " + id);
-            return;
-        }
-        this._sectionPlaneDestroyed(sectionPlane);
-        sectionPlane.destroy();
+	/**
+	 * Hides the 3D {@link SectionPlane} editing gizmo if shown.
+	 */
+	hideControl() {
+		for (var id in this._controls) {
+			if (this._controls.hasOwnProperty(id)) {
+				this._controls[id].setVisible(false);
+				if (this._overview) {
+					this._overview.setPlaneSelected(id, false);
+				}
+			}
+		}
+		this._shownControlId = null;
+	}
 
-        if (id === this._shownControlId) {
-            this._shownControlId = null;
-        }
-    }
+	/**
+	 * Destroys a {@link SectionPlane} created by this SectionPlanesPlugin.
+	 *
+	 * @param {String} id ID of the {@link SectionPlane}.
+	 */
+	destroySectionPlane(id) {
+		var sectionPlane = this.viewer.scene.sectionPlanes[id];
+		if (!sectionPlane) {
+			this.error("SectionPlane not found: " + id);
+			return;
+		}
+		this._sectionPlaneDestroyed(sectionPlane);
+		sectionPlane.destroy();
 
-    _sectionPlaneDestroyed(sectionPlane) {
-        if (this._overview) {
-            this._overview.removeSectionPlane(sectionPlane);
-        }
-        const control = this._controls[sectionPlane.id];
-        if (!control) {
-            return;
-        }
-        control.setVisible(false);
-        control._setSectionPlane(null);
-        delete this._controls[sectionPlane.id];
-        this._freeControls.push(control);
-    }
+		if (id === this._shownControlId) {
+			this._shownControlId = null;
+		}
+	}
 
-    /**
-     * Destroys all {@link SectionPlane}s created by this SectionPlanesPlugin.
-     */
-    clear() {
-        const ids = Object.keys(this._sectionPlanes);
-        for (var i = 0, len = ids.length; i < len; i++) {
-            this.destroySectionPlane(ids[i]);
-        }
-    }
+	_sectionPlaneDestroyed(sectionPlane) {
+		if (this._overview) {
+			this._overview.removeSectionPlane(sectionPlane);
+		}
+		const control = this._controls[sectionPlane.id];
+		if (!control) {
+			return;
+		}
+		control.setVisible(false);
+		control._setSectionPlane(null);
+		delete this._controls[sectionPlane.id];
+		this._freeControls.push(control);
+	}
 
-    /**
-     * @private
-     */
-    send(name, value) {
-        switch (name) {
+	/**
+	 * Destroys all {@link SectionPlane}s created by this SectionPlanesPlugin.
+	 */
+	clear() {
+		const ids = Object.keys(this._sectionPlanes);
+		for (var i = 0, len = ids.length; i < len; i++) {
+			this.destroySectionPlane(ids[i]);
+		}
+	}
 
-            case "snapshotStarting": // Viewer#getSnapshot() about to take snapshot - hide controls
-                for (let id in this._controls) {
-                    if (this._controls.hasOwnProperty(id)) {
-                        this._controls[id].setCulled(true);
-                    }
-                }
-                break;
+	/**
+	 * @private
+	 */
+	send(name, value) {
+		switch (name) {
+			case "snapshotStarting": // Viewer#getSnapshot() about to take snapshot - hide controls
+				for (let id in this._controls) {
+					if (this._controls.hasOwnProperty(id)) {
+						this._controls[id].setCulled(true);
+					}
+				}
+				break;
 
-            case "snapshotFinished": // Viewer#getSnapshot() finished taking snapshot - show controls again
-                for (let id in this._controls) {
-                    if (this._controls.hasOwnProperty(id)) {
-                        this._controls[id].setCulled(false);
-                    }
-                }
-                break;
+			case "snapshotFinished": // Viewer#getSnapshot() finished taking snapshot - show controls again
+				for (let id in this._controls) {
+					if (this._controls.hasOwnProperty(id)) {
+						this._controls[id].setCulled(false);
+					}
+				}
+				break;
 
-            case "clearSectionPlanes":
-                this.clear();
-                break;
-        }
-    }
+			case "clearSectionPlanes":
+				this.clear();
+				break;
+		}
+	}
 
-    /**
-     * Destroys this SectionPlanesPlugin.
-     *
-     * Also destroys each {@link SectionPlane} created by this SectionPlanesPlugin.
-     *
-     * Does not destroy the canvas the SectionPlanesPlugin was configured with.
-     */
-    destroy() {
-        this.clear();
-        if (this._overview) {
-            this._overview.destroy();
-        }
-        this._destroyFreeControls();
-        super.destroy();
-    }
+	/**
+	 * Destroys this SectionPlanesPlugin.
+	 *
+	 * Also destroys each {@link SectionPlane} created by this SectionPlanesPlugin.
+	 *
+	 * Does not destroy the canvas the SectionPlanesPlugin was configured with.
+	 */
+	destroy() {
+		this.clear();
+		if (this._overview) {
+			this._overview.destroy();
+		}
+		this._destroyFreeControls();
+		super.destroy();
+	}
 
-    _destroyFreeControls() {
-        var control = this._freeControls.pop();
-        while (control) {
-            control._destroy();
-            control = this._freeControls.pop();
-        }
-        this.viewer.scene.off(this._onSceneSectionPlaneCreated);
-    }
+	_destroyFreeControls() {
+		var control = this._freeControls.pop();
+		while (control) {
+			control._destroy();
+			control = this._freeControls.pop();
+		}
+		this.viewer.scene.off(this._onSceneSectionPlaneCreated);
+	}
 }
 
 /**
@@ -123538,235 +125305,241 @@ class Plane {
  * @private
  */
 class Overview {
+	/**
+	 * @private
+	 */
+	constructor(plugin, cfg) {
+		if (!cfg.onHoverEnterPlane || !cfg.onHoverLeavePlane || !cfg.onClickedNothing || !cfg.onClickedPlane) {
+			throw "Missing config(s): onHoverEnterPlane, onHoverLeavePlane, onClickedNothing || onClickedPlane";
+		}
 
-    /**
-     * @private
-     */
-    constructor(plugin, cfg) {
-
-        if (!cfg.onHoverEnterPlane || !cfg.onHoverLeavePlane || !cfg.onClickedNothing || !cfg.onClickedPlane) {
-            throw "Missing config(s): onHoverEnterPlane, onHoverLeavePlane, onClickedNothing || onClickedPlane";
-        }
-
-        /**
-         * The {@link FaceAlignedSectionPlanesPlugin} that owns this SectionPlanesOverview.
-         *
-         * @type {FaceAlignedSectionPlanesPlugin}
-         */
-        this.plugin = plugin;
+		/**
+		 * The {@link FaceAlignedSectionPlanesPlugin} that owns this SectionPlanesOverview.
+		 *
+		 * @type {FaceAlignedSectionPlanesPlugin}
+		 */
+		this.plugin = plugin;
 
-        this._viewer = plugin.viewer;
+		this._viewer = plugin.viewer;
 
-        this._onHoverEnterPlane = cfg.onHoverEnterPlane;
-        this._onHoverLeavePlane = cfg.onHoverLeavePlane;
-        this._onClickedNothing = cfg.onClickedNothing;
-        this._onClickedPlane = cfg.onClickedPlane;
-        this._visible = true;
+		this._onHoverEnterPlane = cfg.onHoverEnterPlane;
+		this._onHoverLeavePlane = cfg.onHoverLeavePlane;
+		this._onClickedNothing = cfg.onClickedNothing;
+		this._onClickedPlane = cfg.onClickedPlane;
+		this._visible = true;
 
-        this._planes = {};
+		this._planes = {};
 
-        //--------------------------------------------------------------------------------------------------------------
-        // Init canvas
-        //--------------------------------------------------------------------------------------------------------------
+		//--------------------------------------------------------------------------------------------------------------
+		// Init canvas
+		//--------------------------------------------------------------------------------------------------------------
 
-        this._canvas = cfg.overviewCanvas;
+		this._canvas = cfg.overviewCanvas;
 
-        //--------------------------------------------------------------------------------------------------------------
-        // Init scene
-        //--------------------------------------------------------------------------------------------------------------
+		//--------------------------------------------------------------------------------------------------------------
+		// Init scene
+		//--------------------------------------------------------------------------------------------------------------
 
-        this._scene = new Scene(this._viewer, {
-            canvasId: this._canvas.id,
-            transparent: true
-        });
-        this._scene.clearLights();
-        new DirLight(this._scene, {
-            dir: [0.4, -0.4, 0.8],
-            color: [0.8, 1.0, 1.0],
-            intensity: 1.0,
-            space: "view"
-        });
-        new DirLight(this._scene, {
-            dir: [-0.8, -0.3, -0.4],
-            color: [0.8, 0.8, 0.8],
-            intensity: 1.0,
-            space: "view"
-        });
-        new DirLight(this._scene, {
-            dir: [0.8, -0.6, -0.8],
-            color: [1.0, 1.0, 1.0],
-            intensity: 1.0,
-            space: "view"
-        });
+		this._scene = new Scene(this._viewer, {
+			canvasId: this._canvas.id,
+			transparent: true
+		});
+		this._scene.clearLights();
+		new DirLight(this._scene, {
+			dir: [0.4, -0.4, 0.8],
+			color: [0.8, 1.0, 1.0],
+			intensity: 1.0,
+			space: "view"
+		});
+		new DirLight(this._scene, {
+			dir: [-0.8, -0.3, -0.4],
+			color: [0.8, 0.8, 0.8],
+			intensity: 1.0,
+			space: "view"
+		});
+		new DirLight(this._scene, {
+			dir: [0.8, -0.6, -0.8],
+			color: [1.0, 1.0, 1.0],
+			intensity: 1.0,
+			space: "view"
+		});
 
-        this._scene.camera;
-        this._scene.camera.perspective.fov = 70;
+		this._scene.camera;
+		this._scene.camera.perspective.fov = 70;
 
-        this._zUp = false;
+		this._zUp = false;
 
-        //--------------------------------------------------------------------------------------------------------------
-        // Synchronize overview scene camera with viewer camera
-        //--------------------------------------------------------------------------------------------------------------
+		//--------------------------------------------------------------------------------------------------------------
+		// Synchronize overview scene camera with viewer camera
+		//--------------------------------------------------------------------------------------------------------------
 
-        {
-            const camera = this._scene.camera;
-            const matrix = math.rotationMat4c(-90 * math.DEGTORAD, 1, 0, 0);
-            const eyeLookVec = math.vec3();
-            const eyeLookVecOverview = math.vec3();
-            const upOverview = math.vec3();
-
-            this._synchCamera = () => {
-                const eye = this._viewer.camera.eye;
-                const look = this._viewer.camera.look;
-                const up = this._viewer.camera.up;
-                math.mulVec3Scalar(math.normalizeVec3(math.subVec3(eye, look, eyeLookVec)), 7);
-                if (this._zUp) { // +Z up
-                    math.transformVec3(matrix, eyeLookVec, eyeLookVecOverview);
-                    math.transformVec3(matrix, up, upOverview);
-                    camera.look = [0, 0, 0];
-                    camera.eye = math.transformVec3(matrix, eyeLookVec, eyeLookVecOverview);
-                    camera.up = math.transformPoint3(matrix, up, upOverview);
-                } else { // +Y up
-                    camera.look = [0, 0, 0];
-                    camera.eye = eyeLookVec;
-                    camera.up = up;
-                }
-            };
-        }
+		{
+			const camera = this._scene.camera;
+			const matrix = math.rotationMat4c(-90 * math.DEGTORAD, 1, 0, 0);
+			const eyeLookVec = math.vec3();
+			const eyeLookVecOverview = math.vec3();
+			const upOverview = math.vec3();
+
+			this._synchCamera = () => {
+				const eye = this._viewer.camera.eye;
+				const look = this._viewer.camera.look;
+				const up = this._viewer.camera.up;
+				math.mulVec3Scalar(math.normalizeVec3(math.subVec3(eye, look, eyeLookVec)), 7);
+				if (this._zUp) {
+					// +Z up
+					math.transformVec3(matrix, eyeLookVec, eyeLookVecOverview);
+					math.transformVec3(matrix, up, upOverview);
+					camera.look = [0, 0, 0];
+					camera.eye = math.transformVec3(matrix, eyeLookVec, eyeLookVecOverview);
+					camera.up = math.transformPoint3(matrix, up, upOverview);
+				} else {
+					// +Y up
+					camera.look = [0, 0, 0];
+					camera.eye = eyeLookVec;
+					camera.up = up;
+				}
+			};
+		}
 
-        this._onViewerCameraMatrix = this._viewer.camera.on("matrix", this._synchCamera);
+		this._onViewerCameraMatrix = this._viewer.camera.on("matrix", this._synchCamera);
 
-        this._onViewerCameraWorldAxis = this._viewer.camera.on("worldAxis", this._synchCamera);
+		this._onViewerCameraWorldAxis = this._viewer.camera.on("worldAxis", this._synchCamera);
 
-        this._onViewerCameraFOV = this._viewer.camera.perspective.on("fov", (fov) => {
-            this._scene.camera.perspective.fov = fov;
-        });
+		this._onViewerCameraFOV = this._viewer.camera.perspective.on("fov", (fov) => {
+			this._scene.camera.perspective.fov = fov;
+		});
 
-        //--------------------------------------------------------------------------------------------------------------
-        // Bind overview canvas events
-        //--------------------------------------------------------------------------------------------------------------
+		//--------------------------------------------------------------------------------------------------------------
+		// Bind overview canvas events
+		//--------------------------------------------------------------------------------------------------------------
 
-        {
-            var hoveredEntity = null;
+		{
+			var hoveredEntity = null;
 
-            this._onInputMouseMove = this._scene.input.on("mousemove", (coords) => {
-                const hit = this._scene.pick({
-                    canvasPos: coords
-                });
-                if (hit) {
-                    if (!hoveredEntity || hit.entity.id !== hoveredEntity.id) {
-                        if (hoveredEntity) {
-                            const plane = this._planes[hoveredEntity.id];
-                            if (plane) {
-                                this._onHoverLeavePlane(hoveredEntity.id);
-                            }
-                        }
-                        hoveredEntity = hit.entity;
-                        const plane = this._planes[hoveredEntity.id];
-                        if (plane) {
-                            this._onHoverEnterPlane(hoveredEntity.id);
-                        }
-                    }
-                } else {
-                    if (hoveredEntity) {
-                        this._onHoverLeavePlane(hoveredEntity.id);
-                        hoveredEntity = null;
-                    }
-                }
-            });
+			this._onInputMouseMove = this._scene.input.on("mousemove", (coords) => {
+				const hit = this._scene.pick({
+					canvasPos: coords
+				});
+				if (hit) {
+					if (!hoveredEntity || hit.entity.id !== hoveredEntity.id) {
+						if (hoveredEntity) {
+							const plane = this._planes[hoveredEntity.id];
+							if (plane) {
+								this._onHoverLeavePlane(hoveredEntity.id);
+							}
+						}
+						hoveredEntity = hit.entity;
+						const plane = this._planes[hoveredEntity.id];
+						if (plane) {
+							this._onHoverEnterPlane(hoveredEntity.id);
+						}
+					}
+				} else {
+					if (hoveredEntity) {
+						this._onHoverLeavePlane(hoveredEntity.id);
+						hoveredEntity = null;
+					}
+				}
+			});
 
-            this._scene.canvas.canvas.addEventListener("mouseup", this._onCanvasMouseUp = () => {
-                if (hoveredEntity) {
-                    const plane = this._planes[hoveredEntity.id];
-                    if (plane) {
-                        this._onClickedPlane(hoveredEntity.id);
-                    }
-                } else {
-                    this._onClickedNothing();
-                }
-            });
+			this._scene.canvas.canvas.addEventListener(
+				"mouseup",
+				(this._onCanvasMouseUp = () => {
+					if (hoveredEntity) {
+						const plane = this._planes[hoveredEntity.id];
+						if (plane) {
+							this._onClickedPlane(hoveredEntity.id);
+						}
+					} else {
+						this._onClickedNothing();
+					}
+				})
+			);
 
-            this._scene.canvas.canvas.addEventListener("mouseout", this._onCanvasMouseOut = () => {
-                if (hoveredEntity) {
-                    this._onHoverLeavePlane(hoveredEntity.id);
-                    hoveredEntity = null;
-                }
-            });
-        }
+			this._scene.canvas.canvas.addEventListener(
+				"mouseout",
+				(this._onCanvasMouseOut = () => {
+					if (hoveredEntity) {
+						this._onHoverLeavePlane(hoveredEntity.id);
+						hoveredEntity = null;
+					}
+				})
+			);
+		}
 
-        //--------------------------------------------------------------------------------------------------------------
-        // Configure overview
-        //--------------------------------------------------------------------------------------------------------------
+		//--------------------------------------------------------------------------------------------------------------
+		// Configure overview
+		//--------------------------------------------------------------------------------------------------------------
 
-        this.setVisible(cfg.overviewVisible);
-    }
+		this.setVisible(cfg.overviewVisible);
+	}
 
-    /** Called by SectionPlanesPlugin#createSectionPlane()
-     * @private
-     */
-    addSectionPlane(sectionPlane) {
-        this._planes[sectionPlane.id] = new Plane(this, this._scene, sectionPlane);
-    }
+	/** Called by SectionPlanesPlugin#createSectionPlane()
+	 * @private
+	 */
+	addSectionPlane(sectionPlane) {
+		this._planes[sectionPlane.id] = new Plane(this, this._scene, sectionPlane);
+	}
 
-    /**  @private
-     */
-    setPlaneHighlighted(id, highlighted) {
-        const plane = this._planes[id];
-        if (plane) {
-            plane.setHighlighted(highlighted);
-        }
-    }
+	/**  @private
+	 */
+	setPlaneHighlighted(id, highlighted) {
+		const plane = this._planes[id];
+		if (plane) {
+			plane.setHighlighted(highlighted);
+		}
+	}
 
-    /**  @private
-     */
-    setPlaneSelected(id, selected) {
-        const plane = this._planes[id];
-        if (plane) {
-            plane.setSelected(selected);
-        }
-    }
+	/**  @private
+	 */
+	setPlaneSelected(id, selected) {
+		const plane = this._planes[id];
+		if (plane) {
+			plane.setSelected(selected);
+		}
+	}
 
-    /** @private
-     */
-    removeSectionPlane(sectionPlane) {
-        const plane = this._planes[sectionPlane.id];
-        if (plane) {
-            plane.destroy();
-            delete this._planes[sectionPlane.id];
-        }
-    }
+	/** @private
+	 */
+	removeSectionPlane(sectionPlane) {
+		const plane = this._planes[sectionPlane.id];
+		if (plane) {
+			plane.destroy();
+			delete this._planes[sectionPlane.id];
+		}
+	}
 
-    /**
-     * Sets if this SectionPlanesOverview is visible.
-     *
-     * @param {Boolean} visible Whether or not this SectionPlanesOverview is visible.
-     */
-    setVisible(visible = true) {
-        this._visible = visible;
-        this._canvas.style.visibility = visible ? "visible" : "hidden";
-    }
+	/**
+	 * Sets if this SectionPlanesOverview is visible.
+	 *
+	 * @param {Boolean} visible Whether or not this SectionPlanesOverview is visible.
+	 */
+	setVisible(visible = true) {
+		this._visible = visible;
+		this._canvas.style.visibility = visible ? "visible" : "hidden";
+	}
 
-    /**
-     * Gets if this SectionPlanesOverview is visible.
-     *
-     * @return {Boolean} True when this SectionPlanesOverview is visible.
-     */
-    getVisible() {
-        return this._visible;
-    }
+	/**
+	 * Gets if this SectionPlanesOverview is visible.
+	 *
+	 * @return {Boolean} True when this SectionPlanesOverview is visible.
+	 */
+	getVisible() {
+		return this._visible;
+	}
 
-    /**  @private
-     */
-    destroy() {
-        this._viewer.camera.off(this._onViewerCameraMatrix);
-        this._viewer.camera.off(this._onViewerCameraWorldAxis);
-        this._viewer.camera.perspective.off(this._onViewerCameraFOV);
+	/**  @private
+	 */
+	destroy() {
+		this._viewer.camera.off(this._onViewerCameraMatrix);
+		this._viewer.camera.off(this._onViewerCameraWorldAxis);
+		this._viewer.camera.perspective.off(this._onViewerCameraFOV);
 
-        this._scene.input.off(this._onInputMouseMove);
-        this._scene.canvas.canvas.removeEventListener("mouseup", this._onCanvasMouseUp);
-        this._scene.canvas.canvas.removeEventListener("mouseout", this._onCanvasMouseOut);
-        this._scene.destroy();
-    }
+		this._scene.input.off(this._onInputMouseMove);
+		this._scene.canvas.canvas.removeEventListener("mouseup", this._onCanvasMouseUp);
+		this._scene.canvas.canvas.removeEventListener("mouseout", this._onCanvasMouseOut);
+		this._scene.destroy();
+	}
 }
 
 const tempAABB = math.AABB3();