@xtctwins/tctwins-core 1.0.27 → 1.0.28

package/dist/tctwins-core.es.js

@@ -42162,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);
@@ -91343,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]);
 
 /**
@@ -91770,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;
         }
@@ -118022,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) {
@@ -118044,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);
@@ -119332,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.
@@ -119352,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
@@ -119411,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);
@@ -119424,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) {
@@ -120819,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) {
@@ -120887,7 +120929,6 @@ class Control {
 			canvas.addEventListener(
 				"touchstart",
 				(this._canvasMouseDownListener = (e) => {
-					console.log("222");
 					e.preventDefault();
 					if (!this._visible || !grabbed) return;
 
@@ -120938,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;
@@ -120989,221 +121030,1841 @@ 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) {
+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";
 
-        /**
-         * The ID of this SectionPlanesOverviewPlane.
-         *
-         * @type {String}
-         */
-        this.id = sectionPlane.id;
+		this._viewer = plugin.viewer;
+		this._scene = plugin.viewer.scene;
 
-        /**
-         * The {@link SectionPlane} represented by this SectionPlanesOverviewPlane.
-         *
-         * @type {SectionPlane}
-         */
-        this._sectionPlane = sectionPlane;
+		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._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
-        });
+		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
 
-        {
-            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();
+		this._ignoreNextSectionPlaneDirUpdate = false;
 
-            const update = () => {
+		this._createNodes();
+		this._bindEvents();
+	}
 
-                const origin = this._sectionPlane.scene.center;
+	/**
+	 * 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;
+				}
+			});
+		}
+	}
 
-                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);
+	/**
+	 * Gets the {@link SectionPlane} controlled by this Control.
+	 * @returns {SectionPlane} The SectionPlane.
+	 */
+	get sectionPlane() {
+		return this._sectionPlane;
+	}
 
-                math.normalizeVec3(negDir);
-                math.mulVec3Scalar(negDir, dist, pos2);
-                const quaternion = math.vec3PairToQuaternion(zeroVec, this._sectionPlane.dir, quat);
+	/**
+	 * 设置剖切面位置
+	 * @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;
+		}
 
-                pos3[0] = pos2[0] * 0.1;
-                pos3[1] = pos2[1] * 0.1;
-                pos3[2] = pos2[2] * 0.1;
+		this._sectionPlane.pos = newSectionPos;
+	}
 
-                this._mesh.quaternion = quaternion;
-                this._mesh.position = pos3;
-            };
+	get pos() {
+		return this._pos;
+	}
 
-            this._onSectionPlanePos = this._sectionPlane.on("pos", update);
-            this._onSectionPlaneDir = this._sectionPlane.on("dir", update);
+	/** @private */
+	_setPos(xyz) {
+		this._pos.set(xyz);
 
-            // update();
-        }
+		worldToRTCPos(this._pos, this._origin, this._rtcPos);
 
-        this._highlighted = false;
-        this._selected = false;
-    }
+		this._rootNode.origin = this._origin;
+		this._rootNode.position = this._rtcPos;
+	}
 
-    /**
-     * 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;
-    }
+	/** @private */
+	_setDir(xyz) {
+		this._baseDir.set(xyz);
+		this._rootNode.quaternion = math.vec3PairToQuaternion(zeroVec$2, xyz, quat$2);
+	}
 
-    /**
-     * Gets if this SectionPlanesOverviewPlane is highlighted.
-     *
-     * @type {Boolean}
-     * @private
-     */
-    getHighlighted() {
-        return this._highlighted;
-    }
+	_setSectionPlaneDir(dir) {
+		if (this._sectionPlane) {
+			this._ignoreNextSectionPlaneDirUpdate = true;
+			this._sectionPlane.dir = dir;
+		}
+	}
 
-    /**
-     * 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;
+	/**
+	 * 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;
+	}
 
-    /**
-     * Gets if this SectionPlanesOverviewPlane is selected.
-     *
-     * @type {Boolean}
-     * @private
-     */
-    getSelected() {
-        return this._selected;
-    }
+	/**
+	 * 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;
+				}
+			}
+		}
+	}
 
-    /** @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 {
 	/**
+	 * Builds the Entities that represent this Control.
 	 * @private
 	 */
-	constructor(plugin, cfg) {
-		if (!cfg.onHoverEnterPlane || !cfg.onHoverLeavePlane || !cfg.onClickedNothing || !cfg.onClickedPlane) {
-			throw "Missing config(s): onHoverEnterPlane, onHoverLeavePlane, onClickedNothing || onClickedPlane";
-		}
+	_createNodes() {
+		const NO_STATE_INHERIT = false;
+		const scene = this._viewer.scene;
 
-		/**
-		 * The {@link SectionPlanesPlugin} that owns this SectionPlanesOverview.
-		 *
-		 * @type {SectionPlanesPlugin}
-		 */
-		this.plugin = plugin;
+		this._rootNode = new Node$2(scene, {
+			position: [0, 0, 0],
+			scale: [5, 5, 5],
+			isObject: false
+		});
 
-		this._viewer = plugin.viewer;
+		const rootNode = this._rootNode;
 
-		this._onHoverEnterPlane = cfg.onHoverEnterPlane;
-		this._onHoverLeavePlane = cfg.onHoverLeavePlane;
-		this._onClickedNothing = cfg.onClickedNothing;
-		this._onClickedPlane = cfg.onClickedPlane;
-		this._visible = true;
+		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._planes = {};
+		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)
+		};
 
-		//--------------------------------------------------------------------------------------------------------------
-		// Init canvas
-		//--------------------------------------------------------------------------------------------------------------
+		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)
+		};
+	}
 
-		this._canvas = cfg.overviewCanvas;
+	_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]);
 
-		//--------------------------------------------------------------------------------------------------------------
-		// Init scene
-		//--------------------------------------------------------------------------------------------------------------
+		const canvas = this._viewer.scene.canvas.canvas;
+		const camera = this._viewer.camera;
+		const scene = this._viewer.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"
+		{
+			// 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") {
+						const worldSize = Math.tan(camera.perspective.fov * math.DEGTORAD) * dist;
+						const size = this._controlSize * worldSize;
+						rootNode.scale = [size, size, size];
+						lastDist = dist;
+					}
+				}
+
+				if (camera.projection === "ortho") {
+					const worldSize = 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 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 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 if this SectionPlanesOverviewPlane is highlighted.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    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;
+
+    }
+
+    /**
+     * Gets if this SectionPlanesOverviewPlane is selected.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    getSelected() {
+        return this._selected;
+    }
+
+    /** @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],
@@ -121485,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);
+	}
 }
 
 /**