How do I dolly or zoom using React three fiber or threejs?

Question

I have a react-three-fiber app and I'm using OrbitControls as my camera controls.

I want to use buttons on screen to manually zoom in/zoom out but I can't get my code to work.

I want these buttons to work the same way as how the middle mouse button works with OrbitControls. Does anyone how to make this work using React?

I tried changing the camera position using the useThree() hook but it was not working as I wanted.

Thanks.

Answer 1

When you use the middle scroll wheel with OrbitControls, all it's doing is multiplying the camera position by a certain value. So, if you wanted to do this manually, then you could use the following function:

function zoom(constant){
    camera.position.x = camera.position.x * constant;
    camera.position.y = camera.position.y * constant;
    camera.position.z = camera.position.z * constant;
}

If you want to zoom in, closer, then you pass a value less than one value. If you want to zoom out, further, you pass a value greater than one value.