ArcballControls: Allow setting the gizmos radius factor (#22721)

* ArcballControls: Allow setting the gizmos radius factor

* Add ArcballControls.radiusFactor to the docs

* Add ArcballControls.setTbRadius

docs/examples/en/controls/ArcballControls.html

@@ -191,6 +191,11 @@
 			Maximum angular velocity allowed on rotation animation start.
 		</p>
 
+		<h3>[property:Float radiusFactor]</h3>
+		<p>
+			The size of the gizmo relative to the screen width and height. Default is 0.67.
+		</p>
+
 
 		<h2>Methods</h2>
 
@@ -234,6 +239,11 @@
 			Set the visible property of gizmos.
 		</p>
 
+		<h3>[method:null setTbRadius] ( [param:Float value] )</h3>
+		<p>
+			Update the `radiusFactor` value, redraw the gizmo and send a `changeEvent` to visualise the changes.
+		</p>
+
 		<h3>[method:Boolean setMouseAction] ( [param:String operation], mouse, key )</h3>
 		<p>
 			Set a new mouse action by specifying the operation to be performed and a mouse/key combination. In case of conflict, replaces the existing one.<br><br>

examples/js/controls/ArcballControls.js

@@ -1594,7 +1594,6 @@
 
 			this.calculateTbRadius = camera => {
 
-				const factor = 0.67;
 				const distance = camera.position.distanceTo( this._gizmos.position );
 
 				if ( camera.type == 'PerspectiveCamera' ) {
@@ -1603,11 +1602,11 @@
 
 					const halfFovH = Math.atan( camera.aspect * Math.tan( halfFovV ) ); //horizontal fov/2 in radians
 
-					return Math.tan( Math.min( halfFovV, halfFovH ) ) * distance * factor;
+					return Math.tan( Math.min( halfFovV, halfFovH ) ) * distance * this.radiusFactor;
 
 				} else if ( camera.type == 'OrthographicCamera' ) {
 
-					return Math.min( camera.top, camera.right ) * factor;
+					return Math.min( camera.top, camera.right ) * this.radiusFactor;
 
 				}
 
@@ -2684,6 +2683,7 @@
 			this.domElement = domElement;
 			this.scene = scene;
 			this.target = new THREE.Vector3( 0, 0, 0 );
+			this.radiusFactor = 0.67;
 			this.mouseActions = [];
 			this._mouseOp = null; //global vectors and matrices that are used in some operations to avoid creating new objects every time (e.g. every time cursor moves)
 
@@ -2932,6 +2932,33 @@
 			this.dispatchEvent( _changeEvent );
 
 		}
+
+		
+		/**
+   * Set gizmos radius factor and redraws gizmos
+   * @param {Float} value Value of radius factor
+   */
+		setTbRadius( value ) {
+
+			this.radiusFactor = value;
+			this._tbRadius = this.calculateTbRadius( this.camera );
+
+			const curve = new EllipseCurve( 0, 0, this._tbRadius, this._tbRadius );
+			const points = curve.getPoints( this._curvePts );
+			const curveGeometry = new BufferGeometry().setFromPoints( points );
+
+
+			for ( const gizmo in this._gizmos.children ) {
+
+				this._gizmos.children[ gizmo ].geometry = curveGeometry;
+
+			}
+
+			this.dispatchEvent( _changeEvent );
+
+		}
+
+
 		/**
    * Creates the rotation gizmos matching trackball center and radius
    * @param {Vector3} tbCenter The trackball center

examples/jsm/controls/ArcballControls.js

@@ -82,6 +82,7 @@ class ArcballControls extends EventDispatcher {
 		this.domElement = domElement;
 		this.scene = scene;
 		this.target = new Vector3( 0, 0, 0 );
+		this.radiusFactor = 0.67;
 
 		this.mouseActions = [];
 		this._mouseOp = null;
@@ -1976,18 +1977,17 @@ class ArcballControls extends EventDispatcher {
 	 */
 	calculateTbRadius = ( camera ) => {
 
-		const factor = 0.67;
 		const distance = camera.position.distanceTo( this._gizmos.position );
 
 		if ( camera.type == 'PerspectiveCamera' ) {
 
 			const halfFovV = MathUtils.DEG2RAD * camera.fov * 0.5; //vertical fov/2 in radians
 			const halfFovH = Math.atan( ( camera.aspect ) * Math.tan( halfFovV ) ); //horizontal fov/2 in radians
-			return Math.tan( Math.min( halfFovV, halfFovH ) ) * distance * factor;
+			return Math.tan( Math.min( halfFovV, halfFovH ) ) * distance * this.radiusFactor;
 
 		} else if ( camera.type == 'OrthographicCamera' ) {
 
-			return Math.min( camera.top, camera.right ) * factor;
+			return Math.min( camera.top, camera.right ) * this.radiusFactor;
 
 		}
 
@@ -2243,6 +2243,30 @@ class ArcballControls extends EventDispatcher {
 
 	}
 
+	/**
+	 * Set gizmos radius factor and redraws gizmos
+	 * @param {Float} value Value of radius factor
+	 */
+	setTbRadius( value ) {
+
+		this.radiusFactor = value;
+		this._tbRadius = this.calculateTbRadius( this.camera );
+
+		const curve = new EllipseCurve( 0, 0, this._tbRadius, this._tbRadius );
+		const points = curve.getPoints( this._curvePts );
+		const curveGeometry = new BufferGeometry().setFromPoints( points );
+
+
+		for ( const gizmo in this._gizmos.children ) {
+
+			this._gizmos.children[ gizmo ].geometry = curveGeometry;
+
+		}
+
+		this.dispatchEvent( _changeEvent );
+
+	}
+
 	/**
 	 * Creates the rotation gizmos matching trackball center and radius
 	 * @param {Vector3} tbCenter The trackball center