Skip to content

OrbitControls - Zoom to cursor #22522

@philippb

Description

@philippb

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

References
Google Maps 3D view with zoom to cursor
Screen Shot 2021-09-10 at 12 36 22 PM

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.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions