Model-viewer: Support for panning the camera via keyboard, mouse and touch input

[cdata]

This is a feature of OrbitControls that we left out of SmoothControls when we implemented it in #288 .

We might implement panning any number of ways, but we should strive to do it such that it helps the user maintain focus on the object in frame.

Here is an example of one possible way to "curve" the camera as it pans out farther and farther so that it never looks fully away from the object in focus:

[elalish]

This is a major can of worms in terms of 3D UX, and probably one of the biggest things that makes CAD packages hard to navigate. I would advise against adding this to the default controls unless we have a clear idea of what we're trying to solve with it. #453 would give devs the ability to do it themselves if they need to. Do we have a known pain point we'd like to solve with panning?

[cdata]

It's a good thing our job is to make hard things look easy 😅

At the surface of things there are a few facts to consider:

• Three.js' OrbitControls supports panning, so we lost that behavior when we switched to a different control implementation
• Some users have asked us for panning support (in other channels, unfortunately)
• It is an option for us to only enable this behavior as an opt-in via user configuration

You are right that #453 is highly relevant here. One could make the case that with #453 in place, panning is a matter of coordinating a change between camera-orbit and camera-target (or whatever we call it) over time.

The argument for this feature is that we should make it easy for users by implementing a reasonable, built-in strategy for coordinating this change over time, which includes support for multiple input modes (keyboard, mouse, touch).

[elalish]

Okay, and here is my argument against:

1) Why do you need to pan? Generally because you're highly zoomed in on a non-spherical model. Is this a use case we expect? Currently zoom is pretty limited by default.

2) Panning means moving an invisible target point in 3D space using 2D input. This is what makes panning so counter-intuitive: after a pan, the effect of subsequent viewer rotations are surprising.

3) The most common reaction I've seen to panning is that a user does it accidentally, then tries helplessly to undo it so that the model rotates around its center again. If you add panning you'll probably also have to add a recenter button, which further complicates the UX. If close inspection is important, I've found it helpful to add something like double-click to move the camera target to the ray-cast hit, but it can be hard to discover. We could consider a pan that slides along the surface of the object, but I could see that leading to all kinds of strange edges cases.

[cdata]

All fair points @elalish . I agree that standard, linear panning (for example, as is implemented by OrbitControls) is not desirable and exhibits some of the issues you are describing.

To answer your first question, I would say this is definitely a use case we expect. I have personally experienced the desire to move the camera laterally when viewing several models.

The images I included in the original issue begin to describe how panning can be made coherent with orbiting around a fixed target. It's by no means a mandated design, but it stands as a strawperson that avoids the issue described in your second point.

As far as your third point is concerned, I think it would be totally fine for us to set the quality bar at, "the user does not do it by accident, or if they do, they intuitively understand how to fix the mistake." I don't necessarily agree that we would require a recenter button, but it's not out of the question. Let's explore all of the possibilities!

Double-click to adjust the camera target is definitely a cool idea that we have discussed before, although it might qualify as a distinct feature.

I want us to keep an open, experimental mindset here. One of our goals as a project is to tackle these hard UX problems so that others don't have to.

[cdata]

BTW, if it helps:

These features do not have a required order, and are subject to change as we learn new things.

If we wanted to implement the double-click camera target adjustment first, we could totally try that out and see if it satisfies most panning use cases.

At any rate, I think we should implement adjustable camera-target first as I suspect it will inform a lot of these more complex features.

[cdata]

I filed #512 to capture the camera target adjustment idea.

[elalish]

Sounds good; might be nice to have a little brainstorming session sometime about panning and some related zoom questions.

[hybridherbst]

Two things come to my mind (as UX designer) here:

1. A lot of viewers have at least basic two-finger panning up/down which helps with exploring models that change height on rotation (e.g. very flat or very high ones).

2. Note that the above reasoning of "after a pan, the effect of subsequent viewer rotations are surprising" is only correct for the "basic" way of "shift some center around". There _are_ ways to pan models and smartly adjust the focus point, e.g. raycasting onto the model to get a new focus point, raycasting through the model to get a even better rotation center, and "keeping" that center point if no raycast hits anymore (e.g. user pans in a way that it would leave the model).

[aviggiano]

Hi. Sorry for the thread resurrection, but do you have any idea on when this might be implemented? This is a recurring feature request among our clients.

[elalish]

@aviggiano It's not on the short list because we don't have a good design (I find panning in the 3D apps I've tried to be pretty counter-intuitive for most lay users). If you have a favorite you'd like to point us to, please give us some links to consider. Meanwhile, if you want to implement pan yourself, you now can by changing the cameraTarget based on input events.

[2manyDisplays]

@elalish
I think the implementation on sketchfab.com is quite intuitive and works very well. On the desktop it is right-click and on mobile is using two fingers. I know it's probably not that easy, but It would be awesome if you could implement this feature in the future. Without it, as a User I can't really inspect every detail on an object.

Actually I have a hard time finding an example how panning on right-click could be implemented by myself. Do you mean that the cameraTarget can be changed by using buttons? Or is there an input event I can use when right-click is pressed and cycle through a list of cameraTargets?

[elalish]

Okay, well at the very least it's probably time I put an example of of this on modelviewer.dev. If everyone likes the implementation, then I might put it as an option in our API.

[dhruvadhia1]

Most certainly agree on this feature being implemented at least as an API option. Two finger pan option and double click to recenter can be a go for now. But looking forward to whatever you have planned for now.

[mindey]

I guess, the ideal behavior in most cases would be:

• zooming in to the point that mouse is pointing, rather than central point.
• rotating around central point as long as zoomed out (i.e., auto-recenter when zoomed out)
• rotating around the current point, when zoomed in (i.e., when object's edges are outside the field view)

[elalish]

@mindey Yes, that seems like a decent UX, though I probably wouldn't call it panning. Again, just because there are so many possible ways to do this, I'm not going to build it into model-viewer by default, but I hope you can see that it's not too hard to implement this behavior with script by modifying our example: https://modelviewer.dev/examples/stagingandcameras/#panning