Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OrbitControls: Support frame rate independent autoRotate. #26472

Merged
merged 8 commits into from
Aug 5, 2023
Merged

OrbitControls: Support frame rate independent autoRotate. #26472

Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9074b9e
#26471 Calculation logic idea
Issung Jul 21, 2023
da15606
#26471 Update OrbitControls rotation logic to use clock delta
Issung Jul 21, 2023
1ab4558
#26471 Account for large time deltas when user holds pointer or tab i…
Jul 23, 2023
e6c8d78
Merge branch 'dev' into #26471-orbitcontrols-framerate-independent
Aug 3, 2023
c483a04
#26471 Simpler implementation in which the clock delta is passed into…
Aug 3, 2023
f6d8858
Update OrbitControls.js
Mugen87 Aug 3, 2023
1fb9197
Update webgl2_volume_instancing.html
Mugen87 Aug 3, 2023
92c8da9
Update OrbitControls.js
Mugen87 Aug 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions examples/jsm/controls/OrbitControls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import {
Vector3,
Plane,
Ray,
MathUtils
MathUtils,
Clock,
} from 'three';

// OrbitControls performs orbiting, dollying (zooming), and panning.
Expand All @@ -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 {
Expand Down Expand Up @@ -470,9 +472,7 @@ class OrbitControls extends EventDispatcher {
const pointerPositions = {};

function getAutoRotationAngle() {

return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;

return (2 * Math.PI / 60 * scope.autoRotateSpeed) * _clock.getDelta();
Copy link
Collaborator

@Mugen87 Mugen87 Jul 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem with using THREE.Clock is that when users switch to another tab and then come back to the application after a while, you end up with a huge time delta value that leads to a visible jump. Compare the PRs version with prod to see this effect:

https://raw.githack.com/Issung/three.js/%2326471-orbitcontrols-framerate-independent/examples/webgl2_volume_instancing.html
https://threejs.org/examples/webgl2_volume_instancing

This issue can only be solved with another time class implementation like #17912.

The controls now also produce large time delta values when users enable - disable - enable auto rotation.

}

function getZoomScale() {
Expand Down