solved ArcRotationCamera animate to new target

[gexzor]

So I have a ArcRotationCamera that is fixed on a target sphere. When I click a different sphere, I would like to animate the camera to move to and zoom in on the new target. Unfortunately I haven't been able figure out how to smoothly animate ArcRotateCamera switching to a new target like that, so my solution so far has been to switch to a FreeCamera, which I can then animate to the new target, and afterwards switch back to the ArcRotateCamera on the new position. Unfortunately the perspective is bugging out and is very janky to say the least.

Basically the camera should turn towards the targeted sphere like the box does in this example: https://www.babylonjs-playground.com/#UMQ4UR#2
It seems like something that should be so simple to do, but I've been stumbling around this problem for a couple of days, and this is the best I've come up with so far: http://www.babylonjs-playground.com/#WG9OY#28

Anyone who knows a proper way to solve this problem?

[Arte]

Hi @gexzor

Similar topic

 

[Arte]

Google is my best friend - "babylon js animate ArcRotateCamera"

or Best of t.............

http://www.html5gamedevs.com/search/?&q=animate ArcRotateCamera 

[Wingnut]

https://www.babylonjs-playground.com/indexstable#WG9OY#32

Invisible camTargGizmo is camera.lockedTarget.  Then we animate the gizmo to the new location, and camera comes along for the ride.

Work ok?  It has some jitter/spazzing problems if you stack-up the animations... by doing fast-picking.  I think it can be beat with animation blending, or by stopping/removing all animations (maybe located in camTargGizmo.animations)... before createAndStart calls.  You COULD set all sphere.isPickable = false... while an animation is running.  Then turn them ON again, in onAnimationEnd().  *shrug*

I temp-disabled some stuff that needs re-activating.  Sorry.   

A little faster, and with some ease-in/out, you say?  Okay.  https://www.babylonjs-playground.com/indexstable#WG9OY#33

Remember the handy... highlight many lines... hit control /   toggles activation/de-activation of large chunks of code.   I love control slash... it's my friend.

When on a single line, control / toggles activation/de-activation, even if line is not high-lit, and even if cursor is currently in the middle of that line.  Coooool.

(Don't try controlled slashing in real life, though.  It's still frowned-upon by police) 

[gexzor]

16 hours ago, Wingnut said:

Invisible camTargGizmo is camera.lockedTarget.  Then we animate the gizmo to the new location, and camera comes along for the ride.

That's neat solution, and it seems to work perfectly. Thanks

Too bad that It takes these extra steps to achieve this however. Seems like given that "target" should be able to be animated itself and be the end of it.

[Wingnut]

Hi again, Gexzor.  Actually, we CAN animate ONLY camera.target or camera.lockedTarget, and it's my fault for not finding the best solution.  Sorry.

https://www.babylonjs-playground.com/indexstable#WG9OY#36

See line 13:  camera.lockedTarget = camera.target;

Then see line 86 animator:
var lookAt = BABYLON.Animation.CreateAndStartAnimation("lookat", camera, "lockedTarget", 60, 120, camera.lockedTarget, sphere.getAbsolutePosition(), 2, ease);

Animating the camera.lockedTarget works just fine (without a camTargGizmo).   The camera itself moves-with the animated .lockedTarget.

Also, NOT using line 13, and animating camera.target works, too, but it ONLY moves the camera.target.  Camera itself stays in same position.

Again, my apologies for not giving the best solution, and thanks for your wise this should be easier comment.  I was a bit hurried and didn't do enough thinking/experimenting.  Be well.