How to enable camera scroll and disable zoom using camera controls drei

Question

I use CameraControls of Drei Three JS to controls the transition. I already create useEffect to update the zoom, scroll, and rotate of the CameraControls but the zoom and rotate event still enable. How to disable it? I already try to switch using OrbitControls but the transisition doesn't work. Here's my code

function Rig({ position = new THREE.Vector3(0, 0, 2), focus = new THREE.Vector3(0, 0, 0) }) {
  const { controls, scene } = useThree()
  const [, params] = useRoute('/item/:id')
  const controlsRef = useRef()

  useEffect(() => {
    const active = scene.getObjectByName(params?.id)
    if (active) {
      active.parent.localToWorld(position.set(0, 0.5, 0.25))
      active.parent.localToWorld(focus.set(0, 0, 5))
    }
    controls?.setLookAt(...position.toArray(), ...focus.toArray(), true)
  }, [controls, scene, params?.id, focus, position])

  useEffect(() => {
    if (controlsRef.current) {
      // Ensure controls are initialized
      const cameraControls = controlsRef.current
      cameraControls.enableZoom = false
      cameraControls.enablePan = true
      cameraControls.enableRotate = false
      cameraControls.update() // Apply changes immediately
    }
  }, [controlsRef])

  return <CameraControls ref={controlsRef} makeDefault minPolarAngle={0} maxPolarAngle={Math.PI * 2} />
}

Answer 1

Try these settings, I tested that with official example on Drei, 0 is disabled.

useEffect(() => {
    if (cameraControlsRef.current) {
      const controls = cameraControlsRef.current;
  
      controls.mouseButtons.left = 0;
      controls.mouseButtons.middle = 4;
      controls.mouseButtons.right = 2;
      controls.mouseButtons.wheel = 0;
  
      controls.touches.one = 1;
      controls.touches.two = 2;
      controls.touches.three = 3;
    }
  }, []);

BTW You might also consider taking a look at the official documentation for this solution.

USER INPUT