New camera position with the animation (transition) to the click of a button

Greeting,
I want to make a new camera position with the animation (transition) to the click of a button.
I am currently studying babylon.js and I use an animation document:
https://doc.babylonjs.com/babylon101/animations
Where am I wrong?
Can you explain me if someone knows? I want to learn where I’m wrong?
This is my example of Babylon:
https://playground.babylonjs.com/#AJADK6#9
Wherever the camera is located, pressing the button should change the position of the camera with the animation (transition).

I also tried with quick animation:
b14.onclick = function () {
BABYLON.Animation.CreateAndStartAnimation (‘animationcamera’, camera, ‘new BABYLON.Vector3 (-400, 15, 5)’, 30, 120, 1.0, 1.5);
}
but it does not work…
Thank you

1 Like

Hi AA!

https://playground.babylonjs.com/#AJADK6#10

Let’s see. Line 72 needed to be a property name-string. You had it set as a vector3 in quotes.

Line 74 - changed to vector3 type. You had it set vector2.

Line 75 - set to loopmode CONSTANT… just because I like it to hold position at end of animation. NOTE: The animation is still STARTed when it ends… so activating an animation.stop() in the callback function… might be wise. There MIGHT BE a .disposeOnEnd or .stopOnEnd Boolean property on animations. Not sure.

Line 82 - camera.position.clone() for beginning animation position.

Line 83 & 93 disabled… because I don’t know what they do… yet. :slight_smile:

Line 86… added a “middle frame”… just because the animation docs demo for outTangent and inTangent… had a middle frame. :slight_smile:

Line 102 - turned OFF loopmode and added a onAnimationEnd callback func.

Line 111 - 114… I guess we need that highly-annoying little function, again. It keeps the camera from working properly… at scene RUN, though. Junk. I don’t know when/how that function suddenly started being “needed”, but it has to go. Core/we need a different way to do that. Comments welcome.

This is related to the issue that @timetocode worked-around in another cam-animation thread.

AND… I changed some keyframe target values… just for fun.

Now it works… almost. Needs some tweaks. Hope this helps. Party on!

2 Likes

Thanks for the reply Wingnut …

Line 63 - var itEnded = function(test) { console.log(“animation ended:”, test); }
I see this is in the babylonjs document tutorial, but I do not know what it is?

I also tried the position and it did not work so I left as in the previous example.

I tried with vector2 and vecto3, but it did not work …

Thanks for this information, can later be used in further work. Has camera.position.clone () been given the current camera position?

102 - scene.beginAnimation(camera, 0, 100, false, 1, itEnded);
onAnimationEnd()???

I do not know how to fix the problem, that the camera rotates before clicking on the button and after clicking on the button ??? I’m trying on a previous example but something is wrong …
Can anyone help in the comments ???

1 Like

My pleasure. You are welcome.

itEnded() is a function with a name that I made-up.

onAnimationEnd is NOT a function NAME, but it COULD be called a function TYPE, I suppose.

Better-stated… onAnimationEnd is a description of what the 6th parameter “slot” is used-for.

So, “onAnimationEnd” is a parameter name and not a function name.

scene.beginAnimation(target, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent);
[ the above names are called parameter names ]

I put the FUNCTION named ‘itEnded’ into the ‘onAnimationEnd’ parameter slot. (the 6th parameter). You can put ANY function name into the onAnimationEnd parameter slot. That function will be called… when the animation ends.

itEnded() needed to be ‘declared’ earlier in the code. That is why itEnded() is declared BEFORE the animation section begins. After it is declared, it can be used in this line…

scene.beginAnimation(camera, 0, 100, false, 1, itEnded);

Above, I put the FUNCTION name itEnded into the onAnimationEnd PARAMETER slot. The 6th slot.

It is easy to get parameter-slot names, and function names… confused. That confusion will disappear… after more experience with BabylonJS.

Again, the term onAnimationEnd is NOT a function name. It is a parameter name. See more comments in #12 playground below.


Yes. It ‘returns’ a COPY-OF (or clone-of) the current camera position - a vector3 value.

PERHAPS you could use camera.position instead. THEN… you would be using a REFERENCE-TO camera.position… and not a COPY-OF camera.position.

MOST times/situations… we can use a REFERENCE-TO. Other times… we will need to use a COPY-OF. More experience == more knowledge.


There ya go. I added the global (wide-scope) variable ‘freelook’ in line 5. It starts TRUE.

It is set FALSE in line 111, just before the animation begins.

It is set TRUE again in line 69, when the animation ends.

Now, camera works properly before animation, and after animation. Lots of work, yes? nod.

I wish to find a better way than camera.rebuildAnglesAndRadius().

I will try to keep searching. I hope others will help. Be well.

2 Likes

Thanks for the detailed answer and found solution … :slight_smile:
I think I realized … I was trying to put freelook in different places with the same logic, but not at all in the right place …
Only what is not clear from where freelook appeared, what it is used for, can not find any document, a tutorial that describes it … hmm
I’m still studying the code to see where I’m wrong …
They could easily go to the next step :slight_smile:

1 Like

‘freelook’ is not a property name or method name on any JS/BJS object/class.

It is a variable name… made-up/invented by @timetocode. You may change it to any name you wish. It is first declared as a Boolean data-type… set to true or false. Often, these types of variables are called “flags”.

We are using it as a messenger flag. “Flags” are usually raised (true) or lowered (false).

Look at lines 123-129 in #12 PG.

Line 129… runs EVERY FRAME. It runs forceRebuild() every frame.

But, in line 124 - if (!freelook) … which is same-as if (freelook == false) which is same as… IF WE ARE CURRENTLY ANIMATING… then… you know… execute that camera.rebuildAnglesAndRadius() thing.

ELSE… exit (fall-thru) forceRebuild()… without doing anything at all.

Can you see that… @timetocode needed ANY Boolean flag… to signal WHEN animation is running, and when not. He created it himself, and named it “appropriately” (apropos) (named it well, considering its usage purpose). Another apropos name for it… might be… notAnimating.

  • When freelook is true, no animation is active. Signal forceRebuild() to NOT call camera.rebuildAnglesAndRadius() every frame.

  • When freelook is false, there IS an animation active. Signal forceRebuild() to call camera.rebuildAnglesAndRadius() every frame.

forceRebuild() is also a MADE-UP method/function name. You won’t find ANY of these things in BJS docs/tutorials, because they are JavaScript things.

Teaching JS is not within the scope of the BJS forum/docs. Flag-variables and function names… are a JS thing… learned in JS tutorials/docs.

I hope I’ve been helpful. I’m not a good JS teacher/helper. I need to learn more about JS, but I am lazy.

Be patient with yourself. Programming languages are not an over-night lesson. They are big and powerful, and have many little “pockets” that can be explored. :slight_smile:

2 Likes