ArcRotateCamera: reset to initial position

Questions
1

Hello everyone,
long time no see :slight_smile:

I am using a fixed ArcRotateCamera for my card game that is precisely adjusted to show the cards in my (virtual) hand and the play mate.

Free moving camera is impressive but is not serving the gameplay, so I froze it.

Now that I have some free time, I am thinking to do subtle camera animations, like framing and zooming on the cards in my hand when I just receive them at the beginning of a round, then replace the camera, also at the end of the round farming and zooming on the point panel, etc.

So, I attached the camera to the mouse and move the camera around to find the best possible position, rotation, zoom* with the idea to use these parameters in camera animations afterwards:

  • when I move the mouse while left button pressed, I think it binds alpha and beta to the mouse: when I finished, I can properly reset the camera to its initial values (.alpha, .beta, .rotation)
  • when I move the mouse while right button pressed, it looks like .position.x and position.y are bound, but afterwards I cannot find a proper way to reset the camera to its initial position… I tried to clone the position vector and then to use it in a .setPosition but it doesn’t work properly, or is working only one time…

I guess there something trivial that I don’t understand (again :frowning: ) and would welcome some help :slight_smile:

Here is the playground https://www.babylonjs-playground.com/#1DMQK9#1

The replace is no more working after the second right pressed move action.

*also, side question about the zoom: is there a way to setup the sensitivity of my mouse wheele ? It is way to sensitive time being to be usable for me…

THANKS!

image
image1465Ă—911 170 KB

2

Hello! Your game looks very nice :smiley:

There are methods to quickly store and restore a camera: storeState (TargetCamera | Babylon.js Documentation (babylonjs.com)) and restoreState ( TargetCamera | Babylon.js Documentation (babylonjs.com)). Here are they in action: reset camera | Babylon.js Playground (babylonjs-playground.com)

1 Like
3

Hi carol,

Thanks for your nice answer !

I am still surprised by the power that babylon is enabling in the browser :slight_smile:

These storeState and restoreState will help to retrieve a proper state when I mess around with my mouse, but what I would like is to find the different “key states” of my camera, for instance 3:

  1. camera pointing at the cards in my hand
  2. camera pointing at the cards and the play mate, like the screenshot
  3. camera pointing at the score panel

And for each of these states having their specific “absolute” values to be able to animate these values from one state to another to have the camera fluidly moving accordingly.

In this new playground https://www.babylonjs-playground.com/#1DMQK9#3, I try to animate the reset of the camera state: it works if I just moved it with left clicks, but fails as soon as I move it around with right clicks… there I am missing something… dunno if I have to store and then animate the .target ? Or if this is something to do with rebuildAnglesAndRadius() that I would have to call in the render loop ?

4

Left click moves the camera target, so you have to animate it too indeed

5

thanks, based on your answer I finally understood that to mimmic the camera move I have with a right click which looks like “a translation”, I have to animate both position and target :slight_smile:

1 Like