OrbitControls: Add zoom to cursor #26165

gkjohnson · 2023-05-29T12:47:50Z

Description

Another effort to get map-like zoom to cursor working with OrbitControls. Some of the other efforts were not sufficient from what I could tell. I tried a few different approaches and seemed to be suffering from numeric precision issues before I landed on this one.

Damping is not required.
Mouse scroll and mouse cursor position dolly works correctly.
Touch-zoom to cursor does not work. I would like to consider this future work.

A question:

If panning is disabled should zoom to cursor be implicitly disabled? I'm fine with leaving this as is and letting the user set the desired behavior.

In Progress:

"Jump" when reaching the max distance
~~Handle initially unset or 0 distance to target~~
~~Simplify zoom cases with non camera objects~~
~~Fix non-cursor zooming with ortho cameras~~

cc @WestLangley @Mugen87

gkjohnson · 2023-05-29T12:52:22Z

examples/jsm/controls/OrbitControls.js

+						// get the ray and translation plane to compute target
+						const ray = new Ray();
+						ray.origin.copy( scope.object.position );
+						ray.direction.set( 0, 0, - 1 ).transformDirection( scope.object.matrix );
+
+						const plane = new Plane();
+						plane.setFromNormalAndCoplanarPoint( scope.object.up, scope.target );
+
+						ray.intersectPlane( plane, scope.target );


The general approach is to move the camera such that the point under the cursor is visually consistent after zooming and the target is moved to accommodate this camera position movement.

However - when using non-screenspace panning and trying to zoom to cursor when the camera is looking parallel to the plane this portion of code fails because we're using the camera ray and plane to determine where to place the target. Any recommendations? Should we just disable zoom to cursor when the dot product of the plane normal and ray is under some threshold? Then we can recommend that users limit the angles in these cases.

I think we should make it so that when you're parallel and zoom "towards the sky", we pick an arbitrary distance away and use that as if we had collided with the terrain, then use the same code. I.e. dolly the camera in that direction

Unfortunately this won't work since the camera always has to face the target point. This means the camera will move up into the sky and then arc down towards the view point since the target has to stay on that plane - which isn't necessarily what someone would expect.

Zoom to cursor with map controls only really makes sense when limiting the camera control angles, imo, but we should have some approach that doesn't break here. Perhaps the arcing is okay in this case.

btw,

since the camera always has to face the target point

how can you possibly maintain both target and the point under cursor constraints? one of them will fail as soon as you move persp. camera in any way other than rotating around the axis formed by those 2 points.

gkjohnson · 2023-05-29T12:54:34Z

https://raw.githack.com/gkjohnson/three.js/zoom-to-mouse/examples/misc_controls_map.html

examples/jsm/controls/OrbitControls.js

andredsm · 2023-05-30T17:04:09Z

examples/jsm/controls/OrbitControls.js

+
+		function clampDistance( dist ) {
+
+			return Math.max( scope.minDistance, Math.min( scope.maxDistance, dist ) );


I think you could reuse the clamp function available in MathUtils

gkjohnson · 2023-05-31T01:38:30Z

cc @WestLangley @Mugen87 - I think this is ready for review. I have questions on the following:

If panning is disabled should zoom to cursor be implicitly disabled? I'm fine with leaving this as is and letting the user set the desired behavior.

And this comment: #26165 (comment)

…sing a stale ray with pinch

Mugen87 · 2023-05-31T08:00:45Z

If panning is disabled should zoom to cursor be implicitly disabled?

No, I wouldn't do that.

And this comment: #26165 (comment)

TBH, I'm not sure what to recommend here. Do whatever you think is best at the moment. We can still change it at a later point if necessary.

gkjohnson · 2023-06-05T11:52:37Z

TBH, I'm not sure what to recommend here. Do whatever you think is best at the moment. We can still change it at a later point if necessary.

Okay I've just updated the controls so we don't move the camera target if zooming to cursor when the camera is 20 degrees above the horizon. This means the camera can rotate a bit during zoom (only in that corner case) but at least the target position doesn't immediately scale out of control. It's best for users to limit the altitude angle when zoomToCursor and screenSpacePanning are enabled, anyway.

Imo this is ready to merge unless someone catches something new!

examples/jsm/controls/OrbitControls.js

nickyvanurk · 2023-06-29T10:13:36Z

I was expecting this feature to be released in r154, any update?

Mugen87 · 2023-07-10T10:28:55Z

Let's merge this to give this implementation a chance in prod!

alessiocancian · 2023-09-14T10:18:23Z

I'm testing this feature and I was experiencing weird behaviors with zoom limits, was able to fix it by setting screenSpacePanning to false, maybe it should be the default value when zoomToCursor is enabled, or should at least be mentioned in the docs that for most of the use cases (I believe) it may be the correct value.

gkjohnson · 2023-09-14T10:29:45Z

I'm testing this feature and I was experiencing weird behaviors with zoom limits

If you don't show or specify what "weird behaviors" are then nothing can be done...

alessiocancian · 2023-09-14T11:49:32Z

If you don't show or specify what "weird behaviors" are then nothing can be done...

Yes sorry, I don't think it's really a bug but the intended behavior with screenSpacePanning enabled... the problem is that if I try to zoom horizontally I get stuck when reaching the center because distance is 0, so I need to rotate around it to explore the other side.
This was weird for me because my scene is like an open space to explore, so I didn't understand why the zoom was getting stuck, and I was able to figure it out only after checking the code of this PR and logging the distance.
When disabling screenSpacePanning the distance doesn't go to 0 when reaching the center so I can zoom to the end of the model at the opposite side.

So maybe it should be mentioned that when using zoomToCursor if the scene is like an open space screenSpacePanning should be set to false.

makc · 2023-09-14T12:55:49Z

because distance is 0,

wait, are you saying it does not respect controls.minDistance @alessiocancian

alessiocancian · 2023-09-14T13:14:56Z

because distance is 0,

wait, are you saying it does not respect controls.minDistance @alessiocancian

No it does respect it, that's why I get stuck. By stuck I mean that I cannot zoom in anymore, but I can still zoom out.
I tried with a negative min distance but that didn't work either, that may be a bug of this feature but I thought it wasn't supported by OrbitControls.

gkjohnson · 2023-09-14T16:01:34Z

This is how OrbitControls has always worked so this shouldn't be surprising. When you zoom in within the minDistance of the target point scrolling slows and stops. If you want different behavior you can modify the target point distance based on where a user is zooming or suggest a new enhancement and submit a PR yourself.

WestLangley · 2023-11-30T00:30:08Z

examples/jsm/controls/OrbitControls.js

+					} else if ( scope.object.isOrthographicCamera ) {
+
+						// adjust the ortho camera position based on zoom changes
+						const mouseBefore = new Vector3( mouse.x, mouse.y, 0 );


@gkjohnson I think mouseBefore should have been instantiated once inside the closure.

Likewise, mouseAfter.

Oops! You're right. That would be a good change.

@gkjohnson Something like this.

mouseBefore.set( mouse.x, mouse.y, 0 ).unproject( scope.object ); ... mouseAfter.set( mouse.x, mouse.y, 0 ).unproject( scope.object ); ... scope.object.updateWorldMatrix( false, false ); // if you say it is needed

I think this is a good change but this PR is already merged and I have other priorities at the moment. I'm happy to review a PR from anyone else to get it in, though.

I do not understand the code block, so it will not be me.

gkjohnson added 4 commits May 29, 2023 17:47

Add initial support for zoom to cursor

3b8fb5f

simplify implementation, remove ortho special case

76085e2

Handle mouse dolly

cda2535

Support planar movement, add gui option

2b35825

gkjohnson commented May 29, 2023

View reviewed changes

examples/jsm/controls/OrbitControls.js Outdated Show resolved Hide resolved

snowzurfer reviewed May 29, 2023

View reviewed changes

examples/jsm/controls/OrbitControls.js Outdated Show resolved Hide resolved

gkjohnson added 8 commits May 30, 2023 07:57

Use relative positioning

66cadf8

Fix ortho camera zooming

c61bbc6

auto disable zoom to cursor

2daffb3

Handle incorrect camera case differently

002782f

Use cached objects

24c1c4f

Fix corner case where camera starts at target position

30a1a65

Use a common clamp function

41c1860

Fix copy paste error

1bbd423

andredsm reviewed May 30, 2023

View reviewed changes

gkjohnson marked this pull request as ready for review May 31, 2023 01:35

Add a flag for when to perform the zoom to cursor behavior to avoid u…

7606f6d

…sing a stale ray with pinch

Mugen87 approved these changes Jun 1, 2023

View reviewed changes

Mugen87 added this to the r154 milestone Jun 1, 2023

gkjohnson added 3 commits June 5, 2023 20:42

Limit target movement at steep angles

3440b8b

Add constant for tilt amount

a1585b2

Update comment

0ad5724

This comment was marked as off-topic.

Sign in to view

jakubbartel reviewed Jun 6, 2023

View reviewed changes

examples/jsm/controls/OrbitControls.js Outdated Show resolved Hide resolved

Fix relative cursor position

d681911

mrdoob modified the milestones: r154, r155 Jun 29, 2023

Mugen87 merged commit 98e4fc8 into mrdoob:dev Jul 10, 2023

This was referenced Jul 10, 2023

Added zooming to cursor position in OrbitControls #24983

Closed

Docs: Improve OrbitControls page. #26404

Merged

gkjohnson deleted the zoom-to-mouse branch July 10, 2023 15:21

This was referenced Jul 13, 2023

r155 three-types/three-ts-types#537

Closed

OrbitControls: Add zoom to cursor three-types/three-ts-types#541

Merged

CodyJasonBennett mentioned this pull request Sep 13, 2023

OrbitControls.zoomToCursor missing pmndrs/three-stdlib#285

Closed

gkjohnson mentioned this pull request Nov 3, 2023

OrbitControls: zoomToCursor weird behavior after certain rotations. #27110

Open

mrdoob mentioned this pull request Nov 28, 2023

OrbitControls.js: add zooming with mouse follow #23254

Closed

WestLangley reviewed Nov 30, 2023

View reviewed changes

WestLangley mentioned this pull request Nov 30, 2023

OrbitControls update event always fired if using an Orthographic Camera #27280

Closed

sciecode mentioned this pull request Dec 15, 2023

OrbitControls: zoom-to-cursor on touch events #27384

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

OrbitControls: Add zoom to cursor #26165

OrbitControls: Add zoom to cursor #26165

gkjohnson commented May 29, 2023 •

edited by Mugen87

Loading

gkjohnson May 29, 2023

snowzurfer May 29, 2023

gkjohnson May 29, 2023 •

edited

Loading

makc Jul 11, 2023

gkjohnson commented May 29, 2023 •

edited

Loading

andredsm May 30, 2023

gkjohnson commented May 31, 2023

Mugen87 commented May 31, 2023

gkjohnson commented Jun 5, 2023 •

edited

Loading

This comment was marked as off-topic.

nickyvanurk commented Jun 29, 2023

Mugen87 commented Jul 10, 2023

alessiocancian commented Sep 14, 2023

gkjohnson commented Sep 14, 2023

alessiocancian commented Sep 14, 2023 •

edited

Loading

makc commented Sep 14, 2023

alessiocancian commented Sep 14, 2023

gkjohnson commented Sep 14, 2023

WestLangley Nov 30, 2023

gkjohnson Nov 30, 2023

WestLangley Mar 16, 2024

gkjohnson Mar 16, 2024

WestLangley Mar 16, 2024


		function clampDistance( dist ) {

		return Math.max( scope.minDistance, Math.min( scope.maxDistance, dist ) );

OrbitControls: Add zoom to cursor #26165

OrbitControls: Add zoom to cursor #26165

Conversation

gkjohnson commented May 29, 2023 • edited by Mugen87 Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gkjohnson May 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gkjohnson commented May 29, 2023 • edited Loading

Choose a reason for hiding this comment

gkjohnson commented May 31, 2023

Mugen87 commented May 31, 2023

gkjohnson commented Jun 5, 2023 • edited Loading

This comment was marked as off-topic.

nickyvanurk commented Jun 29, 2023

Mugen87 commented Jul 10, 2023

alessiocancian commented Sep 14, 2023

gkjohnson commented Sep 14, 2023

alessiocancian commented Sep 14, 2023 • edited Loading

makc commented Sep 14, 2023

alessiocancian commented Sep 14, 2023

gkjohnson commented Sep 14, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gkjohnson commented May 29, 2023 •

edited by Mugen87

Loading

gkjohnson May 29, 2023 •

edited

Loading

gkjohnson commented May 29, 2023 •

edited

Loading

gkjohnson commented Jun 5, 2023 •

edited

Loading

alessiocancian commented Sep 14, 2023 •

edited

Loading