ArcballControls: Arcball optional focus (#29871)

* ArcballControls: Add `enableFocus` option to control focus behavior

* Update examples to reflect ArcballControls changes

* lint-fix

* Update ArcballControls.html

* Update ArcballControls.html

* Update ArcballControls.html

* Update ArcballControls.html

* Update ArcballControls.html

* Update ArcballControls.html

* Update misc_controls_arcball.html

---------

Co-authored-by: Michael Herzog <michael.herzog@human-interactive.org>

docs/examples/en/controls/ArcballControls.html

@@ -132,6 +132,11 @@
 			Set to true to enable animations for rotation (damping) and focus operation. Default is true.
 		</p>
 
+		<h3>[property:Boolean enableFocus]</h3>
+		<p>
+			Enable or disable camera focusing on double-tap (or click) operations. Default is true.
+		</p>
+
 		<h3>[property:Boolean enableGrid]</h3>
 		<p>
 			When set to true, a grid will appear when panning operation is being performed (desktop interaction only). Default is false.

docs/examples/ko/controls/ArcballControls.html

@@ -132,6 +132,11 @@
 		true로 설정하여 회전 (감쇠)과 초점 맞추기 동작을 위한 애니메이션을 활성화합니다.기본값은 true입니다.
 	</p>
 
+	<h3>[property:Boolean enableFocus]</h3>
+	<p>
+		더블 탭(또는 클릭) 시 카메라 초점을 맞추는 기능을 활성화하려면 true로 설정합니다. 기본값은 true입니다.
+	</p>
+
 	<h3>[property:Boolean enableGrid]</h3>
 	<p>
 		true로 설정하면 패닝 동작을 할 때 모드가 나타날 것입니다 (데스크톱 상호 작용할 때만).기본값은 false입니다.

docs/examples/zh/controls/ArcballControls.html

@@ -123,6 +123,11 @@
 		设置为 true 以启用旋转（阻尼）和聚焦操作的动画。默认为 true。
 	</p>
 
+	<h3>[property:Boolean enableFocus]</h3>
+	<p>
+		设置为 true 以在双击（或点击）时启用相机聚焦功能。默认值为 true。
+	</p>
+
 	<h3>[property:Boolean enableGrid]</h3>
 	<p>
 		设置为 true 时，执行平移操作时将出现网格（仅限桌面交互）。默认为 false。

examples/jsm/controls/ArcballControls.js

@@ -204,6 +204,7 @@ class ArcballControls extends Controls {
 		this.enableRotate = true;
 		this.enableZoom = true;
 		this.enableGizmos = true;
+		this.enableFocus = true;
 
 		this.minDistance = 0;
 		this.maxDistance = Infinity;
@@ -697,7 +698,7 @@ class ArcballControls extends Controls {
 
 	onDoubleTap( event ) {
 
-		if ( this.enabled && this.enablePan && this.scene != null ) {
+		if ( this.enabled && this.enablePan && this.enableFocus && this.scene != null ) {
 
 			this.dispatchEvent( _startEvent );
 
@@ -2036,29 +2037,32 @@ class ArcballControls extends Controls {
 		let state;
 		if ( this.object.isOrthographicCamera ) {
 
-			state = JSON.stringify( { arcballState: {
+			state = JSON.stringify( {
+				arcballState: {
+					cameraFar: this.object.far,
+					cameraMatrix: this.object.matrix,
+					cameraNear: this.object.near,
+					cameraUp: this.object.up,
+					cameraZoom: this.object.zoom,
+					gizmoMatrix: this._gizmos.matrix
 
-				cameraFar: this.object.far,
-				cameraMatrix: this.object.matrix,
-				cameraNear: this.object.near,
-				cameraUp: this.object.up,
-				cameraZoom: this.object.zoom,
-				gizmoMatrix: this._gizmos.matrix
-
-			} } );
+				}
+			} );
 
 		} else if ( this.object.isPerspectiveCamera ) {
 
-			state = JSON.stringify( { arcballState: {
-				cameraFar: this.object.far,
-				cameraFov: this.object.fov,
-				cameraMatrix: this.object.matrix,
-				cameraNear: this.object.near,
-				cameraUp: this.object.up,
-				cameraZoom: this.object.zoom,
-				gizmoMatrix: this._gizmos.matrix
+			state = JSON.stringify( {
+				arcballState: {
+					cameraFar: this.object.far,
+					cameraFov: this.object.fov,
+					cameraMatrix: this.object.matrix,
+					cameraNear: this.object.near,
+					cameraUp: this.object.up,
+					cameraZoom: this.object.zoom,
+					gizmoMatrix: this._gizmos.matrix
 
-			} } );
+				}
+			} );
 
 		}
 
@@ -2233,7 +2237,7 @@ class ArcballControls extends Controls {
 	 * @param {Matrix4} camera Transformation to be applied to the camera
 	 * @param {Matrix4} gizmos Transformation to be applied to gizmos
 	 */
-	 setTransformationMatrices( camera = null, gizmos = null ) {
+	setTransformationMatrices( camera = null, gizmos = null ) {
 
 		if ( camera != null ) {
 
@@ -2620,7 +2624,7 @@ class ArcballControls extends Controls {
 				this.applyTransformMatrix( this.scale( newDistance / distance, this._gizmos.position ) );
 				this.updateMatrixState();
 
-			 }
+			}
 
 			//check fov
 			if ( this.object.fov < this.minFov || this.object.fov > this.maxFov ) {

examples/misc_controls_arcball.html

@@ -59,6 +59,7 @@
 				populateGui: function () {
 
 					folderOptions.add( controls, 'enabled' ).name( 'Enable controls' );
+					folderOptions.add( controls, 'enableFocus' ).name( 'Enable focus' );
 					folderOptions.add( controls, 'enableGrid' ).name( 'Enable Grid' );
 					folderOptions.add( controls, 'enableRotate' ).name( 'Enable rotate' );
 					folderOptions.add( controls, 'enablePan' ).name( 'Enable pan' );