Created
June 13, 2025 22:53
-
-
Save neftaly/5e7bebda2ef4a613f6e95c82dbff5f42 to your computer and use it in GitHub Desktop.
wheel event handler for a 3d camera
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| addEventListener("wheel", (event) => { }) | |
| export const handleWheel = (event: PointerEvent, cameraConfig: Object) => (state) => { | |
| // TODO: Add support for Safari touchpad gesture events | |
| const { | |
| altKey, | |
| ctrlKey // `true` on trackpads when pinch-zooming (or ctrl key is pressed) | |
| } = event | |
| // Move camera (origin) when alt+wheeling | |
| if (altKey) { | |
| // Swap deltaX/deltaY if user is holding the ctrl key, | |
| // so that 1-directional mouse scrollwheels can be used to move both forward/back and left/right | |
| const [deltaX, deltaY] = ctrlKey | |
| ? [event.deltaY, event.deltaX] | |
| : [event.deltaX, event.deltaY] | |
| const { | |
| origin: [x, y, z] | |
| } = state | |
| const scaling = 50 | |
| const origin = [x - deltaX / scaling, y, z - deltaY / scaling] | |
| return { origin } | |
| } | |
| // Rotate camera (coords) | |
| const { | |
| coords: [r, theta, phi] | |
| } = state | |
| // Swap deltaY/deltaZ if user is pinching (or ctrl+wheeling) | |
| const [deltaY, deltaZ] = ctrlKey | |
| ? [event.deltaZ, event.deltaY] | |
| : [event.deltaY, event.deltaZ] | |
| return [ | |
| r + deltaY / (500 / r), // Dolly faster as we move out further | |
| theta - deltaZ / 100, | |
| phi + event.deltaX / 200 | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment