yomotsu / camera-controls

A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

Home Page:https://yomotsu.github.io/camera-controls/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Click to zoom

mydudechris opened this issue · comments

Is your feature request related to a problem? Please describe.

Love this library; great work. We started looking at it because we have an app that uses an Orthographic camera as the primary view to create a 2D experience. The thing that caught our attention is DollyToCursor. We're hoping to use this library but were wondering if there's a way to do a click to dolly, while also respecting the cursor position. I was looking at the Orthographic demo and see that you have a .dolly method, but the buttons don't do anything. I also tried using that in my code, changed the values, no luck.

Describe the solution you'd like

  • In our app dragging while holding the left mouse button, or pointer in the case of a stylus, disables the controls and performs a drawing function
  • When a user holds down the Z key, or the OPT+Z key, we'd like to trigger a dolly in and out that looks something like this:
const zoomSpeed: number = .25; 

function z(): void {
    camera.zoom /= 1 - zoomSpeed;  
}

function zoomOut(): void {
    camera.zoom *= 1 - zoomSpeed;
}

Describe alternatives you've considered

We have a functioning "zoom" in our app but getting it to follow the cursor position with an orthographic camera is a pain. We're a fan of the tools you've implemented for controlling the camera and are hoping we can get something that allows a user to trigger the "dolly"

Additional context

No response

Looking at the documentation more and it seems like the .dolly methods might be what I'm looking for, however, when I look at examples, only those with a perspective camera work. I thought the mousewheel was dollying, but based on the orthographic example, it does the same as the zoom buttons, which tells me that it performs a zoom, not a dolly. Is it possible to click to zoom or click to dolly with this library?

only those with a perspective camera work

That is actually intended. Orthographic does not have perspective, which is the vanishing point.
Thus, the view doesn't change, even if the camera moves forward/backward (which is a dolly move).
Use zoom instead if you use Orthographic.
FYI: https://github.com/yomotsu/camera-controls#dolly-vs-zoom

Is it possible to click to zoom or click

I think it's possible but in user-land.

Thanks for responding. Is there a way to access the zoom to cursor position that the mouse wheel uses with a click event?

It's technically possible.
Not an official way though...

const mouseX = - 1; // - 1(left) to 1(right)
const mouseY = - 1; // - 1(bottom) to 1(top)
const zoomDelta = 1;
cameraControls._zoomInternal( zoomDelta, mouseX, mouseY );
cameraControls._isUserControllingZoom = true;

Closing due to lack of feedback.