TransformControls: Added hideX, hideY and hideZ property for explicit

arodic · arodic · commit 7a5a5f0c8a45 · 2018-08-20T19:27:27.000+02:00
axis hiding.
diff --git a/examples/js/controls/TransformControls.js b/examples/js/controls/TransformControls.js
@@ -31,6 +31,9 @@ THREE.TransformControls = function ( camera, domElement ) {
 	defineProperty( "space", "world" );
 	defineProperty( "size", 1 );
 	defineProperty( "dragging", false );
+	defineProperty( "showX", true );
+	defineProperty( "showY", true );
+	defineProperty( "showZ", true );
 
 	var changeEvent = { type: "change" };
 	var mouseDownEvent = { type: "mouseDown" };
@@ -1193,6 +1196,7 @@ THREE.TransformControlsGizmo = function () {
 				var PLANE_HIDE_TRESHOLD = 0.2;
 				var AXIS_FLIP_TRESHOLD = -0.4;
 
+
 				if ( handle.name === 'X' || handle.name === 'XYZX' ) {
 					if ( Math.abs( alignVector.copy( unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) {
 						handle.scale.set( 1e-10, 1e-10, 1e-10 );
@@ -1307,6 +1311,14 @@ THREE.TransformControlsGizmo = function () {
 
 			}
 
+			// Hide disabled axes
+			for ( var a in handle.name ) {
+				handle.visible = handle.visible && ( handle.name.indexOf( "X" ) === -1 || this.showX );
+				handle.visible = handle.visible && ( handle.name.indexOf( "Y" ) === -1 || this.showY );
+				handle.visible = handle.visible && ( handle.name.indexOf( "Z" ) === -1 || this.showZ );
+				handle.visible = handle.visible && ( handle.name.indexOf( "E" ) === -1 || ( this.showX && this.showY && this.showZ ) );
+			}
+
 			// highlight selected axis
 
 			handle.material._opacity = handle.material._opacity || handle.material.opacity;
diff --git a/examples/misc_controls_transform.html b/examples/misc_controls_transform.html
@@ -29,12 +29,15 @@
 	<body>
 
 		<div id="info">
-		<a href="javascript:control.setMode( 'translate' );">"W" translate</a> |
-		<a href="javascript:control.setMode( 'rotate' );">"E" rotate</a> |
-		<a href="javascript:control.setMode( 'scale' );">"R" scale</a> |
-		<a href="javascript:control.setSize( control.size + 0.1 );">"+" increase size</a> |
-		<a href="javascript:control.setSize( Math.max( control.size - 0.1, 0.1 ) );">"-" decrease size</a><br />
-		Press "Q" to toggle world/local space, keep "Ctrl" down to snap to grid
+			<a href="javascript:control.setMode( 'translate' );">"W" translate</a> |
+			<a href="javascript:control.setMode( 'rotate' );">"E" rotate</a> |
+			<a href="javascript:control.setMode( 'scale' );">"R" scale</a> |
+			<a href="javascript:control.setSize( control.size + 0.1 );">"+" increase size</a> |
+			<a href="javascript:control.setSize( Math.max( control.size - 0.1, 0.1 ) );">"-" decrease size</a><br />
+			<a href="javascript:control.setSpace( control.space === 'local' ? 'world' : 'local' );">"Q" toggle world/local space</a> | Hold "Ctrl" down to snap to grid<br />
+			<a href="javascript:control.showX = !control.showX">"X" toggle X</a> |
+			<a href="javascript:control.showY = !control.showY">"Y" toggle Y</a> |
+			<a href="javascript:control.showZ = !control.showZ">"Z" toggle Z</a><br />
 		</div>
 
 		<script src="../build/three.js"></script>
@@ -119,6 +122,18 @@
 							control.setSize( Math.max( control.size - 0.1, 0.1 ) );
 							break;
 
+						case 88: // X
+							control.showX = !control.showX;
+							break;
+
+						case 89: // Y
+							control.showY = !control.showY;
+							break;
+
+						case 90: // Z
+							control.showZ = !control.showZ;
+							break;
+
 					}
 
 				});
