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

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/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.

reactjsthree.jsreact-three-fiberreact-three-dreiorbitcontrols


Solution 1:[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 negative value. If you want to zoom out, further, positive value.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anye

Related Questions