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

Zoom to Region

HomeGrownCoder opened this issue · comments

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

I was interested in implementing a "zoom to region" feature similar to that in Blender where you can click and drag on the screen and create a 2d rectangle in screen space. After releasing the mouse the camera would then zoom/dolly to fit that region of the screen. 

I feel like the functionality is really close to allow this, I was considering using the FitToBox or FitToSphere method, but I am unsure of the best way to find the size of the bounding box based off of the screen locations of the rectangle. I've tried projecting the mouse coordinates into world space using the x/y locations with z values of 0/1 to get world space coordinates but that didn't seem to work right.

Describe the solution you'd like

Binding that allows for a click draw mode to draw a rectangle on screen and have the camera zoom/dolly to that region in space.

Describe alternatives you've considered

No response

Additional context

Here's a video of the feature in blender.

ZoomToRegion.mp4

I think this has been solved with the example code.
Let me close this issue.

Thank you for taking the time to create the example. It is very helpful.

If I'm understanding correctly, in your example you are fitting the camera to a rectangle defined in world space. In my implementation I'm trying to create this rectangle based on the user drawing a rectangle in screen space.

Maybe this is really obvious, but what would you say is the best way to calculate the model space coordinates based on the screen space rectangle? I find that when I project the coordinates of the screen space rectangle into world space I sometimes get unexpected results.

Thank you again for your assistance.

I think you can use the math in the example code.
Even if the rect is in screen space, that should have 4 projected corners in vector3 in world coordinates.

And sorry I can't answer app-specific questions.
If you really wish, please consider becoming a patron for this project via github sponsors.