Zoom via Button?

Questions
1

Hey there, how can i set the zoomlevel of an ArcRotateCamera via function?
I am using React and BabylonJs and need to find the proper Way to tell the camera that it should zoom in / out in my case via buttons…

Cheers and thanks!

2

its just a property of the camera “camera.radius = somenumber”

so when you create your babylon scene and camera , the camera variable scope needs to be visible to some block of code that adjusts the radius , however you choose to do that.

3

what shaderbytes said. If you are using react-babylonjs just update the prop via a button and it will flow to the camera:

const MyCamera = ({radius}) => {
  // ... or setState(), etc
  // ... or use state management like zustand instead of passing prop to component
  return (
    <arcRotateCamera radius={radius} .../>
  )
}
3 Likes
4

Hi There,
thanks for the replys! and if it is not an ArcRotateCamera but a Camera i guess i need to move the cameras location torwards the point where i am looking to?
Is there any way to do that in a smooth motion?

i currently do it like this:

const zoomIn = () => {
    if (camera.camera) {
      const forwardDirection = camera.camera.getForwardRay(1).direction
      camera.camera.position = camera.camera.position.add(forwardDirection)
    }
  }

there are two problems:

  • it always moves the camera by 1 (which should be more when further away, and less when closer to the object i am looking at)
  • it is not a smooth motion (wich would be a nice to have…)

Cheers and thanks!

5

I am not too much into react, but the smooth camera motion was solved here:

If I understand your first problem correctly, you want to change 1 to distance between camera and mesh? Then you could simply use:

BABYLON.Vector3.Distance(camera.position, mesh.absolutePosition)

Regarding ArcRotate- and “other”-Cameras you might want to have a look at this, how position and rotation is set when you switch camera:

1 Like