Resolving Camera Rotation Issues with Custom Zoom in Three.js

The issue you're experiencing is likely due to the conflict between your custom zoom implementation and the TrackballControls' internal state management. When you manually modify the camera position without properly updating the TrackballControls' internal state, it can lead to unexpected behavior in rotation.

Solution Approaches

Option 1: Use ArcballControls Instead

Based on the documentation, ArcballControls might be a better fit for your needs as it provides:

• Intuitive camera movements with a virtual trackball
• Built-in support for cursor-centered zoom
• Advanced navigation functionality
• Touch support

JAVASCRIPTCopied
// Replace TrackballControls with ArcballControls
import { ArcballControls } from 'three/examples/jsm/controls/ArcballControls.js';

// Initialize ArcballControls
const arcballControls = new ArcballControls(camera, renderer.domElement, scene);
arcballControls.enableZoom = true;
arcballControls.cursorZoom = true; // Enable cursor-centered zoom
arcballControls.enableRotate = true;
arcballControls.enablePan = true;
arcballControls.enableAnimations = true;
arcballControls.dampingFactor = 0.2;

// Set target to bounding sphere center
arcballControls.target.copy(boundingSphere.center);

Option 2: Modify Your Current Implementation

If you prefer to keep using TrackballControls, you need to ensure that the controls' internal state is properly updated:

JAVASCRIPTCopied
window.addEventListener('wheel', function(e) {
    e.preventDefault();
    
    // Calculate NDC coordinates of the cursor
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (e.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    
    const direction = raycaster.ray.direction.clone();
    const zoomSpeed = 100;
    const zoomDirection = e.deltaY < 0 ? 1 : -1;
    const zoomAmount = zoomSpeed * zoomDirection;
    
    // Store the original distance to target
    const originalDistance = camera.position.distanceTo(trackballControls.target);
    
    // Move the camera along the ray direction
    camera.position.addScaledVector(direction, zoomAmount);
    
    // Apply distance limits
    const minDistance = 100;
    const maxDistance = 10000;
    const newDistance = camera.position.distanceTo(trackballControls.target);
    
    if (newDistance < minDistance || newDistance > maxDistance) {
        // Calculate the direction vector from target to camera
        const directionToCamera = camera.position.clone().sub(trackballControls.target).normalize();
        
        // Set the camera position at the appropriate distance
        const clampedDistance = Math.max(minDistance, Math.min(maxDistance, newDistance));
        camera.position.copy(trackballControls.target).add(directionToCamera.multiplyScalar(clampedDistance));
    }
    
    // Important: Update the camera's lookAt to maintain orientation
    camera.lookAt(trackballControls.target);
    
    // Update camera matrices
    camera.updateMatrixWorld();
    camera.updateProjectionMatrix();
    
    // Reset TrackballControls state to match the new camera position
    trackballControls.update();
});

Option 3: Let TrackballControls Handle Zoom with Modifications

Instead of completely replacing the zoom functionality, you could extend TrackballControls to support cursor-centered zoom:

JAVASCRIPTCopied
// Extend TrackballControls to add cursor-centered zoom
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';

class CursorTrackballControls extends TrackballControls {
    constructor(camera, domElement) {
        super(camera, domElement);
        
        this.cursorZoom = true;
        this.mouse = new THREE.Vector2();
        this.raycaster = new THREE.Raycaster();
        
        // Override the dolly method
        const originalDolly = this.dolly.bind(this);
        this.dolly = (dollyScale) => {
            if (this.cursorZoom) {
                this.performCursorZoom(dollyScale);
            } else {
                originalDolly(dollyScale);
            }
        };
    }
    
    performCursorZoom(dollyScale) {
        // Calculate ray from cursor
        this.raycaster.setFromCamera(this.mouse, this.object);
        const direction = this.raycaster.ray.direction.clone();
        
        // Calculate zoom amount
        const zoomAmount = (dollyScale - 1) * 100;
        
        // Move camera along ray direction
        this.object.position.addScaledVector(direction, zoomAmount);
        
        // Update internal state
        this.update();
    }
    
    // Add method to update mouse position
    updateMousePosition(x, y) {
        this.mouse.x = x;
        this.mouse.y = y;
    }
}

// Usage
const controls = new CursorTrackballControls(camera, renderer.domElement);
controls.noZoom = false;
controls.cursorZoom = true;

// Update mouse position on mouse move
window.addEventListener('mousemove', (e) => {
    const x = (e.clientX / window.innerWidth) * 2 - 1;
    const y = -(e.clientY / window.innerHeight) * 2 + 1;
    controls.updateMousePosition(x, y);
});

Recommendation

I recommend trying Option 1 (ArcballControls) first, as it's specifically designed to handle cursor-centered zoom and provides a more intuitive camera control experience. The cursorZoom property in ArcballControls is exactly what you're trying to implement manually.

If you need to stick with TrackballControls, Option 3 provides a cleaner approach by extending the controls rather than fighting against them with a separate implementation.