Understanding Camera Zoom with OrbitControls in Three.js

Looking at your code and issue, I can see you're trying to track camera zoom changes when using OrbitControls. There's an important distinction to understand about how OrbitControls handles zoom.

The Issue with camera.zoom

When using OrbitControls with a PerspectiveCamera (which appears to be your case), OrbitControls doesn't actually modify the camera.zoom property. Instead, it adjusts the camera's position by changing its distance from the target point.

For PerspectiveCamera, OrbitControls modifies:

• The camera's position (moving it closer or further from the target)
• Not the camera's zoom property (which remains at 1)

This is why your camera.zoom value isn't changing even when you zoom with the mouse wheel.

Solution: Track Camera Position

Instead of trying to read the camera.zoom property, you should track the camera's position or distance from the target. Here's how you can do it:

JAVASCRIPTCopied
// Add this to your animation loop or wherever you need to check the zoom level
function getZoomLevel() {
  // Calculate distance from camera to target (orbit controls center)
  const distance = camera.position.distanceTo(controls.target);
  
  // You can return this directly or normalize it to a zoom-like scale
  return distance;
}

Alternative: Use OrbitControls Events

OrbitControls emits events when changes occur. You can listen for the 'change' event:

JAVASCRIPTCopied
controls.addEventListener('change', function() {
  // This will fire whenever the controls change the camera
  const currentDistance = camera.position.distanceTo(controls.target);
  console.log('Current zoom distance:', currentDistance);
});

For OrthographicCamera

If you were using an OrthographicCamera instead, OrbitControls would actually modify the camera.zoom property. In that case, your approach would work.

Accessing Controls Properties

You can also access some properties directly from the controls:

JAVASCRIPTCopied
// Get the minimum and maximum distance (zoom limits)
console.log('Min distance:', controls.minDistance);
console.log('Max distance:', controls.maxDistance);

// Get current distance
const currentDistance = camera.position.distanceTo(controls.target);
console.log('Current distance:', currentDistance);

Remember to call these after the controls have been updated in your render loop to get the most current values.

If you need more specific help with your implementation, I'd be happy to look at more of your code.