OrbitControls: Add `cursorStyle` property. (#32981)

examples/jsm/controls/OrbitControls.js

@@ -391,6 +391,8 @@ class OrbitControls extends Controls {
 		 */
 		this.zoom0 = this.object.zoom;
 
+		this._cursorStyle = 'auto';
+
 		// the target DOM element for key events
 		this._domElementKeyEvents = null;
 
@@ -462,6 +464,34 @@ class OrbitControls extends Controls {
 
 	}
 
+	/**
+	 * Defines the visual representation of the cursor.
+	 *
+	 * @type {('auto'|'grab')}
+	 * @default 'auto'
+	 */
+	set cursorStyle( type ) {
+
+		this._cursorStyle = type;
+
+		if ( type === 'grab' ) {
+
+			this.domElement.style.cursor = 'grab';
+
+		} else {
+
+			this.domElement.style.cursor = 'auto';
+
+		}
+
+	}
+
+	get cursorStyle() {
+
+		return this._cursorStyle;
+
+	}
+
 	connect( element ) {
 
 		super.connect( element );
@@ -1542,6 +1572,12 @@ function onPointerDown( event ) {
 
 	}
 
+	if ( this._cursorStyle === 'grab' ) {
+
+		this.domElement.style.cursor = 'grabbing';
+
+	}
+
 }
 
 function onPointerMove( event ) {
@@ -1577,6 +1613,12 @@ function onPointerUp( event ) {
 
 			this.state = _STATE.NONE;
 
+			if ( this._cursorStyle === 'grab' ) {
+
+				this.domElement.style.cursor = 'grab';
+
+			}
+
 			break;
 
 		case 1:

examples/misc_controls_orbit.html

@@ -72,6 +72,8 @@
 				controls.minDistance = 100;
 				controls.maxDistance = 500;
 
+				controls.cursorStyle = 'grab';
+
 				controls.maxPolarAngle = Math.PI / 2;
 
 				// world