Jump to content

Animating ArcRotateCamera setTarget


Recommended Posts

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!

Link to comment
Share on other sites

hi @promontis

welcome to BJS froum



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#6 // advance  

Link to comment
Share on other sites

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)


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.  :)

Link to comment
Share on other sites

@promontis try this:

	function animateCameraTo(targetX, targetY, targetZ, locationX, locationY, locationZ, speed, frameCount)
			var ease = new BABYLON.CubicEase();
			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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...