OrbitControls: Support frame rate independent `autoRotate`. (#26472)

* #26471 Calculation logic idea

* #26471 Update OrbitControls rotation logic to use clock delta

* #26471 Account for large time deltas when user holds pointer or tab is hidden for a long time with autoRotate enabled

* #26471 Simpler implementation in which the clock delta is passed into the OrbitControls update function

* Update OrbitControls.js

Clean up.

* Update webgl2_volume_instancing.html

Clean up.

* Update OrbitControls.js

More clean up.

---------

Co-authored-by: Joel Goransson <[email protected]>
Co-authored-by: Michael Herzog <[email protected]>

examples/jsm/controls/OrbitControls.js

@@ -176,7 +176,7 @@ class OrbitControls extends EventDispatcher {
 
 			const twoPI = 2 * Math.PI;
 
-			return function update() {
+			return function update( deltaTime = null ) {
 
 				const position = scope.object.position;
 
@@ -190,7 +190,7 @@ class OrbitControls extends EventDispatcher {
 
 				if ( scope.autoRotate && state === STATE.NONE ) {
 
-					rotateLeft( getAutoRotationAngle() );
+					rotateLeft( getAutoRotationAngle( deltaTime ) );
 
 				}
 
@@ -469,9 +469,17 @@ class OrbitControls extends EventDispatcher {
 		const pointers = [];
 		const pointerPositions = {};
 
-		function getAutoRotationAngle() {
+		function getAutoRotationAngle( deltaTime ) {
 
-			return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+			if ( deltaTime !== null ) {
+
+				return ( 2 * Math.PI / 60 * scope.autoRotateSpeed ) * deltaTime;
+
+			} else {
+
+				return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+
+			}
 
 		}
 

examples/webgl2_volume_instancing.html

@@ -38,8 +38,7 @@
 
 			}
 
-			let renderer, scene, camera;
-			let controls;
+			let renderer, scene, camera, controls, clock;
 
 			init();
 			animate();
@@ -61,6 +60,8 @@
 				controls.autoRotateSpeed = - 1.0;
 				controls.enableDamping = true;
 
+				clock = new THREE.Clock();
+
 				// Material
 
 				const vertexShader = /* glsl */`
@@ -234,8 +235,9 @@
 			function animate() {
 
 				requestAnimationFrame( animate );
-
-				controls.update();
+			
+				const delta = clock.getDelta();
+				controls.update( delta );
 
 				renderer.render( scene, camera );