Is it possible to disable the zooming of CameraControls (React-Three-drei)?

Questions
, ,
1

Hi.

I’m pretty new with react three library and I’m trying to replicate this tutorial( React Three Fiber tutorial - Scroll Animations (youtube.com)) with my own model.

In this tutorial, the author is using OrbitControl and be able to disable the zooming function. On my case, since my model was quite complicated I tried using CameraControl to work around with camera animations and model movements as well instead of model movements only. I was wondering if I can disable the zooming of camera control. Any help or suggestion would be highly appreciated.

Note:

  • I want to disable the zooming so I can use React-Three-drei useScroll feature. The feature wont work if CameraControl zooming is working.
2

This is a little bit tricky… you can’t do that logically like in OrbitControls by

enableZoom={false}

Try set:

 <CameraControls dollySpeed={0} />
3

Hi @Lukasz_D_Mastalerz,

Thank you for this response.

Yeah this was a little bit tricky as I just tried your suggestion and the zooming stops. However, the zooming feature was still there as I noticed the scroll bar of the canvas is not going down as
I expected.

Actually, my first choice for my project was OrbitControl. However, I want the “truck” , “dolly” and “rotate” props of CameraControl. These features are not working or included in the OrbitControl. Can you send me a link, demo or documentation where I can use a workaround like the three features in OrbitControl?

4

I don’t generally use CameraControls, so I’m not too sure if you can separate it. It seems to me that zoom and dolly are connected… However, looking at the documentation, I would try this approach (or some configurations of them):

minZoom={0}
maxZoom={0}
minDistance={0.5}
maxDistance={2.5}
5

I think something like this

import { CameraControls } from '@react-three/drei'
export const Kamera = () => {
  const ACTION = {
    NONE: 0,
    ROTATE: 1,
    TRUCK: 2,
    OFFSET: 4,
    DOLLY: 8,
    ZOOM: 16,
    TOUCH_ROTATE: 32,
    TOUCH_TRUCK: 64,
    TOUCH_OFFSET: 128,
    TOUCH_DOLLY: 256,
    TOUCH_ZOOM: 512,
    TOUCH_DOLLY_TRUCK: 1024,
    TOUCH_DOLLY_OFFSET: 2048,
    TOUCH_DOLLY_ROTATE: 4096,
    TOUCH_ZOOM_TRUCK: 8192,
    TOUCH_ZOOM_OFFSET: 16384,
    TOUCH_ZOOM_ROTATE: 32768
  }

  return (
    <CameraControls
      mouseButtons={{ left: ACTION.ROTATE, middle: ACTION.NONE, right: ACTION.NONE, wheel: ACTION.NONE }}
      touches={{ one: ACTION.TOUCH_ROTATE, two: ACTION.NONE, three: ACTION.NONE }}
    />
  )
}
1 Like