From 9074b9e37f65f45df00c26a389ba9b14b836375d Mon Sep 17 00:00:00 2001 From: Issung Date: Fri, 21 Jul 2023 22:54:03 +1000 Subject: [PATCH 1/7] #26471 Calculation logic idea --- examples/jsm/controls/OrbitControls.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/examples/jsm/controls/OrbitControls.js b/examples/jsm/controls/OrbitControls.js index dc3b42b56af608..5fac5be51db3f7 100644 --- a/examples/jsm/controls/OrbitControls.js +++ b/examples/jsm/controls/OrbitControls.js @@ -8,7 +8,8 @@ import { Vector3, Plane, Ray, - MathUtils + MathUtils, + Clock, } from 'three'; // OrbitControls performs orbiting, dollying (zooming), and panning. @@ -23,6 +24,7 @@ const _startEvent = { type: 'start' }; const _endEvent = { type: 'end' }; const _ray = new Ray(); const _plane = new Plane(); +const _clock = new Clock(); const TILT_LIMIT = Math.cos( 70 * MathUtils.DEG2RAD ); class OrbitControls extends EventDispatcher { @@ -470,9 +472,13 @@ class OrbitControls extends EventDispatcher { const pointerPositions = {}; function getAutoRotationAngle() { - + // New + return (2 * Math.PI / 60 * scope.autoRotateSpeed) * _clock.getDelta(); + // (2 * Math.PI / 60 * 2) * 0.0166 = 0.0034906555555555556 + + // Original return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; - + // 2 * 3.14159 / 60 / 60 * 2 == 0.0034906555555555556 } function getZoomScale() { From da15606481792fdbec36a7e47206374ae6407d6c Mon Sep 17 00:00:00 2001 From: Issung Date: Fri, 21 Jul 2023 22:55:59 +1000 Subject: [PATCH 2/7] #26471 Update OrbitControls rotation logic to use clock delta --- examples/jsm/controls/OrbitControls.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/examples/jsm/controls/OrbitControls.js b/examples/jsm/controls/OrbitControls.js index 5fac5be51db3f7..9a3b0cbd24e00b 100644 --- a/examples/jsm/controls/OrbitControls.js +++ b/examples/jsm/controls/OrbitControls.js @@ -472,13 +472,7 @@ class OrbitControls extends EventDispatcher { const pointerPositions = {}; function getAutoRotationAngle() { - // New return (2 * Math.PI / 60 * scope.autoRotateSpeed) * _clock.getDelta(); - // (2 * Math.PI / 60 * 2) * 0.0166 = 0.0034906555555555556 - - // Original - return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; - // 2 * 3.14159 / 60 / 60 * 2 == 0.0034906555555555556 } function getZoomScale() { From 1ab45582419a6884e49b2e4fbccf10cd78b026eb Mon Sep 17 00:00:00 2001 From: Joel Goransson Date: Sun, 23 Jul 2023 15:03:00 +1000 Subject: [PATCH 3/7] #26471 Account for large time deltas when user holds pointer or tab is hidden for a long time with autoRotate enabled --- examples/jsm/controls/OrbitControls.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/examples/jsm/controls/OrbitControls.js b/examples/jsm/controls/OrbitControls.js index 9a3b0cbd24e00b..8c439f50d2756c 100644 --- a/examples/jsm/controls/OrbitControls.js +++ b/examples/jsm/controls/OrbitControls.js @@ -1024,6 +1024,10 @@ class OrbitControls extends EventDispatcher { state = STATE.NONE; + // It is possible user held down pointer for a long time, meaning the clock delta can be massive, + // call getDelta() to reset the delta so that getAutoRotationAngle() gets a normal value. + _clock.getDelta(); + } function onMouseDown( event ) { @@ -1177,6 +1181,16 @@ class OrbitControls extends EventDispatcher { } + function onVisibilityChanged( event ) { + + // If tab has just become un-hidden the clock delta can be very large, call getDelta() to + // reset the delta so that getAutoRotationAngle() gets a normal value. + if (!event.target.hidden) { + _clock.getDelta(); + } + + } + function onTouchStart( event ) { trackPointer( event ); @@ -1370,13 +1384,14 @@ class OrbitControls extends EventDispatcher { } // - scope.domElement.addEventListener( 'contextmenu', onContextMenu ); scope.domElement.addEventListener( 'pointerdown', onPointerDown ); scope.domElement.addEventListener( 'pointercancel', onPointerUp ); scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } ); + scope.domElement.ownerDocument.addEventListener( 'visibilitychange', onVisibilityChanged ); + // force an update at start this.update(); From c483a04d76d19523bc3a5192c6cbf0f3d607b9f4 Mon Sep 17 00:00:00 2001 From: Joel Goransson Date: Thu, 3 Aug 2023 19:34:24 +1000 Subject: [PATCH 4/7] #26471 Simpler implementation in which the clock delta is passed into the OrbitControls update function --- examples/jsm/controls/OrbitControls.js | 33 ++++++++------------------ examples/webgl2_volume_instancing.html | 8 +++++-- 2 files changed, 16 insertions(+), 25 deletions(-) diff --git a/examples/jsm/controls/OrbitControls.js b/examples/jsm/controls/OrbitControls.js index 8c439f50d2756c..ebb653b0248b93 100644 --- a/examples/jsm/controls/OrbitControls.js +++ b/examples/jsm/controls/OrbitControls.js @@ -8,8 +8,7 @@ import { Vector3, Plane, Ray, - MathUtils, - Clock, + MathUtils } from 'three'; // OrbitControls performs orbiting, dollying (zooming), and panning. @@ -24,7 +23,6 @@ const _startEvent = { type: 'start' }; const _endEvent = { type: 'end' }; const _ray = new Ray(); const _plane = new Plane(); -const _clock = new Clock(); const TILT_LIMIT = Math.cos( 70 * MathUtils.DEG2RAD ); class OrbitControls extends EventDispatcher { @@ -178,7 +176,7 @@ class OrbitControls extends EventDispatcher { const twoPI = 2 * Math.PI; - return function update() { + return function update(deltaSeconds = undefined) { const position = scope.object.position; @@ -192,7 +190,7 @@ class OrbitControls extends EventDispatcher { if ( scope.autoRotate && state === STATE.NONE ) { - rotateLeft( getAutoRotationAngle() ); + rotateLeft( getAutoRotationAngle(deltaSeconds) ); } @@ -471,8 +469,12 @@ class OrbitControls extends EventDispatcher { const pointers = []; const pointerPositions = {}; - function getAutoRotationAngle() { - return (2 * Math.PI / 60 * scope.autoRotateSpeed) * _clock.getDelta(); + function getAutoRotationAngle(deltaSeconds = undefined) { + + if (deltaSeconds) + return (2 * Math.PI / 60 * scope.autoRotateSpeed) * deltaSeconds; + else + return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; } function getZoomScale() { @@ -1024,10 +1026,6 @@ class OrbitControls extends EventDispatcher { state = STATE.NONE; - // It is possible user held down pointer for a long time, meaning the clock delta can be massive, - // call getDelta() to reset the delta so that getAutoRotationAngle() gets a normal value. - _clock.getDelta(); - } function onMouseDown( event ) { @@ -1181,16 +1179,6 @@ class OrbitControls extends EventDispatcher { } - function onVisibilityChanged( event ) { - - // If tab has just become un-hidden the clock delta can be very large, call getDelta() to - // reset the delta so that getAutoRotationAngle() gets a normal value. - if (!event.target.hidden) { - _clock.getDelta(); - } - - } - function onTouchStart( event ) { trackPointer( event ); @@ -1384,14 +1372,13 @@ class OrbitControls extends EventDispatcher { } // + scope.domElement.addEventListener( 'contextmenu', onContextMenu ); scope.domElement.addEventListener( 'pointerdown', onPointerDown ); scope.domElement.addEventListener( 'pointercancel', onPointerUp ); scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } ); - scope.domElement.ownerDocument.addEventListener( 'visibilitychange', onVisibilityChanged ); - // force an update at start this.update(); diff --git a/examples/webgl2_volume_instancing.html b/examples/webgl2_volume_instancing.html index d0c5fc3498373f..83aed03fb9befb 100644 --- a/examples/webgl2_volume_instancing.html +++ b/examples/webgl2_volume_instancing.html @@ -40,6 +40,7 @@ let renderer, scene, camera; let controls; + let clock; init(); animate(); @@ -61,6 +62,8 @@ controls.autoRotateSpeed = - 1.0; controls.enableDamping = true; + clock = new THREE.Clock(); + // Material const vertexShader = /* glsl */` @@ -234,8 +237,9 @@ function animate() { requestAnimationFrame( animate ); - - controls.update(); + + let delta = clock.getDelta(); + controls.update(delta); renderer.render( scene, camera ); From f6d885835c4aef8c2126c6e4421b7eecc5c19747 Mon Sep 17 00:00:00 2001 From: Michael Herzog Date: Thu, 3 Aug 2023 12:23:32 +0200 Subject: [PATCH 5/7] Update OrbitControls.js Clean up. --- examples/jsm/controls/OrbitControls.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/examples/jsm/controls/OrbitControls.js b/examples/jsm/controls/OrbitControls.js index ebb653b0248b93..18b4832b13a79c 100644 --- a/examples/jsm/controls/OrbitControls.js +++ b/examples/jsm/controls/OrbitControls.js @@ -176,7 +176,7 @@ class OrbitControls extends EventDispatcher { const twoPI = 2 * Math.PI; - return function update(deltaSeconds = undefined) { + 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(deltaSeconds) ); + rotateLeft( getAutoRotationAngle( deltaTime ) ); } @@ -469,12 +469,18 @@ class OrbitControls extends EventDispatcher { const pointers = []; const pointerPositions = {}; - function getAutoRotationAngle(deltaSeconds = undefined) { + function getAutoRotationAngle( deltaTime ) { + + if ( deltaSeconds !== null ) { + + return ( 2 * Math.PI / 60 * scope.autoRotateSpeed ) * deltaTime; + + } else { - if (deltaSeconds) - return (2 * Math.PI / 60 * scope.autoRotateSpeed) * deltaSeconds; - else return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; + + } + } function getZoomScale() { From 1fb9197f93822b8fa974b8458b8d2f40593f0aa6 Mon Sep 17 00:00:00 2001 From: Michael Herzog Date: Thu, 3 Aug 2023 12:24:23 +0200 Subject: [PATCH 6/7] Update webgl2_volume_instancing.html Clean up. --- examples/webgl2_volume_instancing.html | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/examples/webgl2_volume_instancing.html b/examples/webgl2_volume_instancing.html index 83aed03fb9befb..faa90f0a39666b 100644 --- a/examples/webgl2_volume_instancing.html +++ b/examples/webgl2_volume_instancing.html @@ -38,9 +38,7 @@ } - let renderer, scene, camera; - let controls; - let clock; + let renderer, scene, camera, controls, clock; init(); animate(); @@ -238,8 +236,8 @@ requestAnimationFrame( animate ); - let delta = clock.getDelta(); - controls.update(delta); + const delta = clock.getDelta(); + controls.update( delta ); renderer.render( scene, camera ); From 92c8da99cb5a031de3f9ad478256b14dae3640ef Mon Sep 17 00:00:00 2001 From: Michael Herzog Date: Thu, 3 Aug 2023 12:27:26 +0200 Subject: [PATCH 7/7] Update OrbitControls.js More clean up. --- examples/jsm/controls/OrbitControls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/jsm/controls/OrbitControls.js b/examples/jsm/controls/OrbitControls.js index 18b4832b13a79c..3103649c925f0f 100644 --- a/examples/jsm/controls/OrbitControls.js +++ b/examples/jsm/controls/OrbitControls.js @@ -471,7 +471,7 @@ class OrbitControls extends EventDispatcher { function getAutoRotationAngle( deltaTime ) { - if ( deltaSeconds !== null ) { + if ( deltaTime !== null ) { return ( 2 * Math.PI / 60 * scope.autoRotateSpeed ) * deltaTime;