Animating ArcRotateCamera setTarget

[promontis]

Hi there!

 

I'm currently trying to animate the ArcRotateCamera setTarget method. I have several meshes and when selecting one of the meshes I set the camera's target to that mesh.

When I don't animate the setTarget it slightly 'jumps' to a new position in order to better look at the target, which is fine. However, I would like the camera to smoothly do this in an animation.

I've tried animating the alpha, beta and radius, while copying parts of the code from https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/babylon.arcRotateCamera.ts, namely the rebuildAnglesAndRadius, but I don't get the same values. 

Thus, when I set the target after the animation, it still slightly (albeit less then previous) jumps. I do need to set the target in order for future camera movements (by either mouse or keys) to continu looking at the target.

 

Should I extend the ArcRotateCamera and build some custom logic in there? I think the problem lies within the subtractToRef call and not being able to properly update the _computationVector from outside the class (in my own code).

Could you point me in the right correct? Thnx!

[NasimiAsl]

hi @promontis

welcome to BJS froum

http://www.babylonjs-playground.com/#5VM87K#1

http://www.babylonjs-playground.com/#5VM87K

i use my tools

just need replace this 

 camera._target.x = ev.source.position.x ;

with this

 

var wx = new wind();
wx.fun = function (i, par) { camera._target.x = i;};

 wx.go( ev.source.position.x);

 

manage between frame by steps :

http://www.babylonjs-playground.com/#5VM87K#2

http://www.babylonjs-playground.com/#5VM87K#3

http://www.babylonjs-playground.com/#5VM87K#6 // advance  

[Wingnut]

Hiya P (and Naz)...

  Umm... darn, I had a playground somewhere here... but I lost it.  I'll keep looking.

But I think... you want to animate the Vector3 value in camera.target.  It is a position.

Here's a LERP playground... linear interpolation (which is the same system that BJS animation uses to make animations)

http://playground.babylonjs.com/#UMQ4UR#2

and another... https://www.babylonjs-playground.com/#JEHHJ2

Not exactly what you were looking-for, but close.  I'll keep looking.  Check back often, please.

Here's another "thing" which has two hot-looking functions at lines 174 and 180.

I hope I am on-subject. 

[babbleon]

@promontis try this:

	function animateCameraTo(targetX, targetY, targetZ, locationX, locationY, locationZ, speed, frameCount)
		{
			var ease = new BABYLON.CubicEase();
			ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
			activCam = scene.activeCamera;
			cameraTarget = new BABYLON.Vector3(targetX + (Math.random() * (0.001 - 0.002) + 0.002), targetY, targetZ);
			cameraPosition = new BABYLON.Vector3(locationX, locationY, locationZ);
			BABYLON.Animation.CreateAndStartAnimation('at4', activCam, 'position', speed, frameCount, activCam.position, cameraPosition, 0, ease);
			BABYLON.Animation.CreateAndStartAnimation('at5', activCam, 'target', speed, frameCount, activCam.target, cameraTarget, 0, ease);
		};

I added the + random as the cam didn't move if the target was the same (I think that was the reason).

This was adapted from one of @Wingnut's demo above.