I have been trying to make an animation between two points for days now. mesh1 and mesh to. Move with ease from mesh 1 to mesh 2 on an arc. The closest PG I have come to as guide is This Playground
But it only rotates on its alpha axis. Please can anyone help me to move with easing from one point to another
This is exactly what I want but on arc.https://playground.babylonjs.com/#9NDR51#5
I need the camara to move from sphere1 to sphere2 on an arc radian
You can use an Animation on an ArcRotateCamera’s beta value to achieve that
combine that with alpha in an AnimationGroup to ease on an arc between two sets of alpha and beta (which can be tuned to points)
1 Like
Hi Mutani. Thanks for your responds.
But after the update, I still can’t see a curv or an arc on the movement. This is my scrip
const animFrameRate = 30; //per sec
const animTime = 5; //secs
const nbFrames = animTime * animFrameRate - 1;
const animationTarget = new BABYLON.Animation("animationTarget", "lockedTarget", animFrameRate, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
const targetKeys = [];
targetKeys.push({
frame: 0,
value: sphere0.position
});
targetKeys.push({
frame: nbFrames,
value: sphere1.position
});
const camBetaAnim = new BABYLON.Animation("introcambeta", "beta", 50, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE, true)
const betaAnimEasing = new BABYLON.SineEase();
betaAnimEasing.setEasingMode(BABYLON.SineEase.EASINGMODE_EASEINOUT)
camBetaAnim.setEasingFunction(betaAnimEasing)
var keysBeta = [];
keysBeta.push({
frame: 0,
value: Math.PI*2/3
});
keysBeta.push({
frame: 100,
value: Math.PI/3
});
keysBeta.push({
frame: 200,
value:Math.PI*2/3
});
//Adding keys to the animation object
animationTarget.setKeys(targetKeys);
camBetaAnim.setKeys(targetKeys);
camBetaAnim.setKeys(keysBeta);
arcCam.animations.push(camBetaAnim)
// Create the animation group
const animationGroup = new BABYLON.AnimationGroup("my group");
animationGroup.addTargetedAnimation(animationTarget, arcCam);
animationGroup.addTargetedAnimation(camBetaAnim, arcCam);
animationGroup.onAnimationGroupEndObservable.add(() => {
arcCam.attachControl(canvas, true);
})
animationGroup.play();
}
Am I missing something?
Playground https://playground.babylonjs.com/#9NDR51#5
Hi,
If I can allow myself just quickly, basically you are missing the position of the camera towards the target. Your cam anim simply changes the target so a translation to the new target is made, but the beta of the camera is not animated (as per @MutantPiggieGolem1 example). There’s also no ease to the anim. I didn’t bother making the clean version. Simply quickly modified your PG with a mix of the example provided to show that you’re gonna need two anims for the cam (one changing the target PLUS one changing the beta of the camera towards the target to simulate an arc move around the targets). Sorry for the rushed PG but I hope you will be able to figure it from there. Else, let us know and meanwhile, have a great day 
1 Like
const setAnim = () => {
const animFrameRate = 30; //per sec
const animTime = 5; //secs
const nbFrames = animTime * animFrameRate - 1;
const animationTarget = new BABYLON.Animation("animationTarget", "lockedTarget", animFrameRate, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
const targetKeys = [];
targetKeys.push({
frame: 0,
value: sphere0.position
});
targetKeys.push({
frame: nbFrames,
value: sphere0.position
});
targetKeys.push({
frame: nbFrames,
value: sphere1.position
});
console.log("testinn... ", nbFrames )
const camBetaAnim = new BABYLON.Animation("introcambeta", "beta", 50, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE, true)
const betaAnimEasing = new BABYLON.SineEase();
betaAnimEasing.setEasingMode(BABYLON.SineEase.EASINGMODE_EASEINOUT)
camBetaAnim.setEasingFunction(betaAnimEasing)
var keysBeta = [];
keysBeta.push({
frame: 0,
value: Math.PI*2/3
});
keysBeta.push({
frame: 149,
value: Math.PI/3
});
//keysBeta.push({
// frame: 200,
// value:Math.PI*2/3
//});
//Adding keys to the animation object
animationTarget.setKeys(targetKeys);
//camBetaAnim.setKeys(targetKeys);
camBetaAnim.setKeys(keysBeta);
arcCam.animations.push(camBetaAnim)
// Create the animation group
const animationGroup = new BABYLON.AnimationGroup("my group");
animationGroup.addTargetedAnimation(animationTarget, arcCam);
animationGroup.addTargetedAnimation(camBetaAnim, arcCam);
animationGroup.onAnimationGroupEndObservable.add(() => {
arcCam.attachControl(canvas, true);
})
scene.beginAnimation(arcCam, 0, 200, true);
animationGroup.play();
}
I’ve been trying but my script does not run simultaneously. Target is met before beta is executed.
Please help me
Lol. Was just looking back at my (very rushed version) and had the same. Also realized that you are also changing the y position of the target, so the beta alone won’t be enough, and neither the alpha, for a real arc transition. Quickly positioned both sphere at same Y and replaced through alpha for testing. there’s still a break point during transition. Likely coming from my rushed and clumsy maths 
Running anim simultaneously however can be achieved through ‘blending’. Not yet there…
hi Mawa
there is still no arc movement, please check again https://playground.babylonjs.com/#9NDR51#10
but y is leveled up, Switching to target is just a vertical parallel sequence
I want a movement like this https://media.discordapp.net/attachments/1096020612041949184/1113586876331348019/070548bbfec0ab16a67d3e40a9180ea2.png
Well, there is an arc movement but I see what you mean (I think). Problem is I do not have the Math skills for that so I’m gonna call in some people who can likely help with it. Problem is you are changing targets and (if I understand correctly) your targets already form an arc. And you want the camera to face the target performing an arc animation (orbital) translation to them? Hardcoded, something like this, is it?
Edit: cc @Evgeni_Popov, @PolygonalSun for expert advise.
Yes Mawa. Camera should take the view from one sphere to another. Problem is, you are switching arc to alpha. I need this done with beta as depicted from the image. I’ll be so happy to have some help with this
I know. I quickly made this for simplification only. As I said, it is beyond my skills (sry). But it should be clear to the experts that both the alpha and beta should animate. What I’m still not 100% sure of is how the camera should look at the targets with a different Y (beta) position? Say a target is at -2 and another is at +2 on the world y-axis, will the camera look from slightly above and below OR should it always face the target on the y-axis? Once this is made clear, as I said, I will happily let the experts answer your question 
No. The Y sphere must be of the same value to make an arc. Any other value you may have seen must have been for the purpose of testing
y1=2 y2=2
Hum, this gets me confused 
. So you want the camera to move vertically (above or under?) the first target (on the beta of the arcCam/Y-axis) and then look at the new target from behind?
Take off from targert 1 and land on target two.
Just like this playground https://playground.babylonjs.com/#9NDR51#5
But on an arc https://media.discordapp.net/attachments/1096020612041949184/1113586876331348019/070548bbfec0ab16a67d3e40a9180ea2.png
Ok, but then from this PG this is the ALPHA of the arcRotateCamera (not the beta) as can be seen in the shema shown here:
can this be done with beta?
No (and Yes). The point is the beta moves the camera up and down from the target, where the Alpha moves it left to right (or the other way round). You need to understand the arcRotateCamera is ‘Orbital’ and ‘orbital from a target’ as you can see in the doc. A good way to better understand what happens is also to use ‘the Inspector’ to see how the values change on the alpha and beta.
Now, in your case, if your targets are positioned differently on just the X and Z axis in the world space (and never on the Y axis), achieving an arcRotate translation should be done through the alpha (in my opinion)… UNLESS… unless you want to perform half a revolution and end-up showing the new target from the other side. In any case, you would still need to choose whether the camera is moving updwards or downwards from the target. And actually, it’s the same for the alpha, you need to determine a threeshold to have the camera move to positive or negative values if you don’t want to keep with the defaults (based on Math.PI (+the tiny-mini for the breakpoint).
Please check out this hardcoded hack that kinda does the job
const targetKeys = [];
targetKeys.push({
frame: 0,
value: sphere0.position//new BABYLON.Vector3(1, 2, 3)
});
targetKeys.push({
frame: 100,
value: new BABYLON.Vector3(-1, 4, 3)//sphere04.position
});
targetKeys.push({
frame: 200,
value: new BABYLON.Vector3(-2, 6.4, 3)//sphere03.position
});
targetKeys.push({
frame: 300,
value: new BABYLON.Vector3(-5, 6, 3)//sphere02.position
});
targetKeys.push({
frame: 400,
value: new BABYLON.Vector3(-7, 3, 3)//sphere01.position
});
targetKeys.push({
frame: 500,
value: sphere1.position // new BABYLON.Vector3(-8, 2, 6);
});
what would you think/advise?
May I ask you to put it in your PG. I’m not sure anymore which parts to keep from the original and later attempts and I fear we are having some problems focusing on the real thing. Might be partly my fault. English is also not my language and as I said, my Math skills obviously aren’t the best Thx for your patience,
Here @mawa