Hey, can someone help me figure WHY lines 203/204 (which seem necessary for camera animations) are making my camera ACT LIKE it is detached from canvas? Is there a better way?
https://www.babylonjs-playground.com/#3U658N#13
Hi, @aldin_abdagic, Can you specify unexpected behaviour a little more clear? I think some peoples, like me, can not understand what do you mean when talking about acting like detached from canvas.
Can you provide expected behaviour from more simple playground?
Itās hard to help you with current provided data.
1 Like
hehe. Aldin was shy to post, and I told him exactly what to use as a playground, and what to say. heh.
Pretty clear. Not a complicated playground. Remark-out lines 203/204, and the camera starts acting-attached (it pans, tilts, etc - with mouse). Otherwise, camera pan/tilt is frozen/broken.
Remark-out line 207 if you want no initial animation.
Lines 159-169 are two animation funcsā¦ one animates camera, the other, camera target.
Lines 171-201 are the button handlers.
Problem is, the camera animationsā¦ NEED lines 203/204. BUTā¦ we also need the arcCam to āact attachedā (pan and tilt properly) after ANY animation completesā¦ and/or before any animation starts.
SOā¦ lines 203/204 are making the arcCamā¦ fail to pan/tilt/orbit (with mouse). Understand? I hope so. Sorry for cluttered playground, but, itās not so cluttered, really. 
2 Likes
Works for me, TTC! Thank you!
Weāll wait for Aldin to commentā¦ and/or mark your answer as āsolutionāā¦ and/or ask more questions, and/or anything else. Cooool.
2 Likes
Thanks timetocode on the right answer. Logunov next time I try to describe the problem in more detail. Wingnut my guru
Since Iām still learning babylon, would I ask you if I can get some babylon.js document, tutorial or ā¦, which would describe the camera animation? Iād like to learn it and figure out how it works.
I do not understand all the best of line 157 // camera movers ā¦
Also if there was a shorter and more unified way to show the same animation?
Thank you
1 Like
Hi AA, thx for the kind words. There is no camera animation tutorial. There is a general/mesh animation tutorial/how-toā¦ which applies to cameras/lights, too. Although not talked-about very much, notice lines 165 and 172 of #18 playground.
BABYLON.Animation.CreateAndStartAnimation is a VERY powerful animation tool. Study it, as wanted. But, more importantly, learn how to use it. Itās handy. It has a sweet feature that I call āAutomatic ValueType Sensingā. No need to tell this animation methodā¦ if you want to animate a vec3 or a float or a quaternion value. It automatically āsensesā the correct animated-value dataType. Nice.
The target-position animator func (line 161), and the cam-position animator func (line 168) COULD be combined into ONE funcā¦ with two createAndStartAnimation calls inside. Also, the newPos parameter would need to be replaced with TWO parametersā¦ camPos and targPos.
Thatās SOME āunifiedā.
Now, ready for more āunifiedā? We have 7 buttons and 7 setCamera handlers for those buttons.
EACH of those handlersā¦ contains two Babylon.Vector3ās. One is for the target position, the other for the camera position. Start by storing these vector3 valuesā¦ in TWO arraysā¦
var targetPositions = [new BABYLON.Vector3(blah, blah, blah), new Baby.. ];
(7 BJS vector3 in that arrayā¦ one targetPosition for each button)
andā¦
var cameraPositions = [new BABYLON.Vector3(blah, blah, blah), new Bab... ];
(7 BJS vector3 in that arrayā¦ one cameraPosition for each button)
THENā¦ you could combine ALL the funcs from lines 180 - 207ā¦ into being ONE functionā¦
var setCamera = function (targPos, camPos) {
animateCameraTargetToPosition(camera, speed, frameCount, targPos);
animateCameraToPosition(camera, speed, frameCount, camPos);
// if you DID combine the two animator functions, then perhaps ONLY...
animateCamera(camera, speed, frameCount, targPos, camPos);
}
Now, when a button is pressed, you callā¦
setCamera(targetPositions[button_number], cameraPositions[same_number]);
Easy. One call, one unified function does all 7 animationsā¦ all dependent-upon which values from the arraysā¦ are used in the parameters. (which button was pressed ā¦ 0-6)
Arrays always start with index ZERO. So, start your button numbers with 0, too. User pushes top buttonā¦ then you might call: setCamera(targetPositions[0], cameraPositions[0]);
Now youāre rolling. Study your Javascript. Play with functions and parameters. By using parameters like targetPositions[num] and cameraPositions[num], we can make a ācentralizedā setCamera functionā¦ which is more generic and re-usable.
The functions in lines 180-207ā¦ are all nearly identical. But, there are 7 programmer-set vector3ās for target positions, and 7 vector3ās for camera positions. After you move those valuesā¦ into two arraysā¦ then combining the 7 functionsā¦ becomes possible. Party on! I hope I havenāt said anything incorrect.
I/we have gone off-topic, somewhat. Our main topic is solved. We are on Javascript Functions subject right now. But, I wrote these inefficient animation functionsā¦ so I felt responsibility for helping clean-up.
Perhaps you want @timetocode to explain his freelook flags in the animation funcs? Notice it is set to falseā¦ FIRST THING in the 2-animation sequence, and then set to trueā¦ LAST THING in the 2-func sequence.
A callback function == run-this-func-when-done. It is the LAST allowed parameter of CreateAndStartAnimation function. It can be a function name, or an actual function itself, and it is optional (not required, but real useful). See Babylon.js Documentation. There, the callback function is named onAnimationEnd.
1 Like
Thanks wingnut for the great explanation. Perfect as always.
I must definitely learn more about animation and make your own examples. If I find a problem, I contact you ā¦
At the moment, Iām not quite as good at it, I have to read a lot ā¦
Of course any explanation is welcome (freelook) because it will cover my learning ā¦
1 Like