OrbitControls - Zoom to cursor

Related problem

Is your feature request related to a problem? Please describe. We’re working on a Sigma style editor for electrical engineering and PCB design. Navigating within a design by zooming is a big part of our application. The current zoom controls always force the user to pan and then to zoom. This is a sub-optimal experience

Solution

Describe the solution you’d like

Zoom to cursor allows you to zoom a screen to the current position of the cursor. The movement is a combination of pan and zoom. The cursor stays during the entire operation at the same position and the scene zooms in around the objects of the cursor. The behaviour is the same as it is implemented in Google Maps web interface in 3D view or Apple’s macOS Maps app in 3D view for zooming IN and OUT.

Describe alternatives you’ve considered

We have hacked the zoom to cursor in the OrthographicCamera and are looking to have a better version that also supports the PerspectiveCamera in the main repo. You can find the solution in https://github.com/buildwithflux/three-orbitcontrols/blame/master/OrbitControls.js when looking. for the commit Zoom to cursor.

API spec proposal

There are different ideas on how the API interface for this functionality could look like.

Proposal 1

zoomToCursor: Bool - Requires enableZoom to be set to true as a prerequisite. When true, changes the zoom mode from the center of the scene to zooming to the cursor.

Proposal 2 - preferred

zoomMode: Enum { .center, .cursor } - Defines the zoom mode of the enableZoom flag. .center behaves like existing zoom functionality while .cursor allows for zooming to the cursor. Default: .center.

Personal opinion: I prefer proposal 2, as it will play nice with the “Zoom to objects” proposal and other future zoom functionality as well. Maintaining multiple booleans where the behavior is not clear defined is always messy.

Tasks

• Implement zoom to cursor in OrthographicCamera, initial implementation can be used as a starting point.
• Define with maintainers of this project how zoom to cursor in the PerspectiveCamera should behave.
• Implement zoom to cursor in PerspectiveCamera
• Add documentation: https://threejs.org/docs/#examples/en/controls/OrbitControls

References Google Maps 3D view with zoom to cursor

Implementation plan

We aim to implement this feature ourselves. We’re filing a GitHub issue to be able to communicate about the implementation details with the projects core maintainers.

[looeee]

@philippb you can also check out yomotsu/camera-controls which has zoom to cursor.

[philippb]

@Mugen87 Thanks, I didn’t see that. How do you think we can help best getting this to a state that is where i can be merged in? The linked PR has been open for 2 years. We’re happy to help getting this over the finish line or just to make a clean version from scratch. Your guidance is appreciated.