Hi everyone,
I’m implementing zoom buttons in my Three.js canvas, similar to the + and - buttons in Google Maps. However, I’m encountering an issue specifically with the perspective camera during zoom-in.
When the user zooms in beyond a certain point, the camera reverses its direction, which causes a disorienting experience. I’m currently using camera.translateZ() and adjusting the camera’s position based on its world direction, but I haven’t found a way to stop the camera from flipping when it reaches a zoom limit.
Has anyone else run into this problem or knows how to prevent the camera from reversing its direction during zoom? Any suggestions or advice would be greatly appreciated!
Below is my current code for handling the zoom-in functionality:
setZoomIn(() => (canvasType: cameraType) => {
setControlsDisabled(true);
if (canvasType === "perspective") {
const direction = new THREE.Vector3();
camera.getWorldDirection(direction);
const distance = camera.position.length();
if (distance - zoomFactor > MIN_ZOOM_DISTANCE) {
const translation = direction.multiplyScalar(zoomFactor);
const newPosition = new THREE.Vector3().addVectors(camera.position, translation);
camera.lookAt(newPosition);
camera.position.copy(newPosition);
camera.updateProjectionMatrix();
invalidate();
} else {
return;
}
} else {
let newZoomLevel = camera.zoom * 1.1;
newZoomLevel = Math.min(newZoomLevel, 800);
camera.zoom = newZoomLevel;
camera.updateProjectionMatrix();
setZoom(newZoomLevel);
invalidate();
}
setKey(nanoid());
setControlsDisabled(false);
});