My camera ACT LIKE it is detached from canvas

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?

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


How about the onAnimationEnd callback?


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. :slight_smile: Cooool.


Thanks timetocode on the right answer. Logunov next time I try to describe the problem in more detail. Wingnut my guru :slight_smile:
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)
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. :slight_smile:

I/we have gone off-topic, somewhat. Our main topic is solved. We are on Javascript Functions subject right now. :slight_smile: But, I wrote these inefficient animation functions… so I felt responsibility for helping clean-up. :slight_smile:

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