Jump to content

Animate a camera on a network rails based on two points.


Recommended Posts

I want to animate a camera between two points. Think of it like a camera on rails. A bit more tricky is that the rails are interconnected. e.g.  Point: A moves to B  moves to C moves to A moves to D etc. Therefore, any combination could work.

In my local example, I have an event that will trigger this switch. For this example lets just use a click or interval to iterate.

How can I reset/append the keyframes of an animation? Typically my logic will either not run or replay the same animation.



I hope, this animation, I made will help communicate the interaction. Note that this is the camera moving, not the meshes.  At some point, the meshes may slightly move relative to the camera; however, that's for next iteration.




Link to comment
Share on other sites

Thanks for the quick answer. I'll give this another shot after work.  From the blending tuts and your explanation, If I understand correctly, Do I need to just create a new animation and blend ? If so couldn't I just move the animation into the click event?  http://www.babylonjs-playground.com/#2BLI9T#84  

Or I need to stopAnimation(prevCamera), create a new camera, add animation to that camera, push keys frame to new camera, and scene.beginDirectAnimation. 

Link to comment
Share on other sites

@Deltakosh For the life of me, I cannot figure this out. http://www.babylonjs-playground.com/#2BLI9T#107.  I'm missing something fundamental.  I've created a function that will return keys based on the current position of the camera and a static final destination of the camera. on Click Event the fpsbtn, I create a new animation, set blend, create new keys, set key, reset animations, stop previous animations, and begin new animation. This code is based on the blending playground demo. Unfortunately this code creates a blink of the mesh sphere; moreover, it doesn't seem to transition the camera at all.  >_< Could I please get more help?

Link to comment
Share on other sites

@Deltakosh I've updated the playground link slightly here http://www.babylonjs-playground.com/#2BLI9T#109   @Pryme8 , I'll read the camera boom prototype tonight.  It looks like I can learn a lot from that.  At a glance the camera boom prototypes may not solve my problems because there will be a potential infinite* amount of paths because on click animations could be cancelled mid keyframe and sent to a new destination point.  I feel like my playground example has the logic but misses syntax on how to blend these animations with their destination points.

Link to comment
Share on other sites

@Pryme8 With your Camera Boom demos, I tried to clear the path with just setting to empty array and adding new paths.  Onclick, the animation wont cancel or run the second set of paths. Any ideas on what I'm doing wrong? Demo: http://www.babylonjs-playground.com/#AGOCE#14. @Deltakosh Is there anyway to this Camera Boom-esq interaction with only Animation w/bending? 

Link to comment
Share on other sites

@Pryme8 Given my playground example how could I do the animation blending so that on click it actually does the blend? 

http://www.babylonjs-playground.com/#2BLI9T#112.  Sans the messyness of the names of objects and props, I feel like my logic is sound.  I read the blending docs and gave it my best but I just don't get it.

Link to comment
Share on other sites

So off the top of my head on my phone

camera.position = camera.position.add((camera.position.clone().add(targetvec)).scale(0.5)).scale(dampenamount))


thats like over kill on stringing but yeah that's the idea, put that in a beforeregister function that skips if the cameras position is the same as the current target.


not really ideal but very simple and will give you an idea of how to do a better one.


its kinda similar to finding a forward vector and just moving a mesh along it.

Link to comment
Share on other sites


I just discovered that mesh.lookAt() or camera.lookAt() are crashing the playground so no rotation on this one cause im too tired... and want to go to bed...

BUT on your local the lookAt should work just fine... this is really rough and cut geter done in like 10 mins but you can tailor it for it to have inertia calculations  to make the camera accelerate and decelerate to target ect, then do the like wise to rotation in radians then just multiply the radians by pi.

***PINGING @Deltakosh why is lookAt broken? I used it on a project on 2.4 not less then 24 hours ago and tried on this playground for him to first do it to the camera which was crashing the playground, and then to a blank mesh that the camera was parented to and same result.

Link to comment
Share on other sites

If you have two points A,B that are seprated by space :
take half that space

---------------------- scale it down to what ever range you want
---------------------- * 0.02 =  '-'; (something low its going be dependent on your IO speed)
set Point A's to its position minus that new step and repeat till within a range then snap to the position.

that would be what i call a raw lerp, no delta calculation (I mean there effectively is because of the IO but yeah... but no but yeah this is a lazy mans lerp)

Your just finding your mid point cutting it down and then applying it finding a mid point cutting it down applying it...
This will work from your model you presented because you dont need curving or waypoints, so a boom system like i first showed you would be over kill.

BUUUUT if you were to use it, you could do a myriad of things if you had a little more understanding of the script, maybe ill make a more legit version and post it here sometime this week if I can get my other priorities done, otherwise we may never have a new CYOS and ill piss off a bunch of clients as well... so yeah umm give me a little bit of time, till them boot up a simple canvas element figure out how to set up a stable subtread IO proccess and start messing with vectors in a 2d environment run some tests get better at liner algebra (not talking smack just real advice i do simple experiments all the time).

Link to comment
Share on other sites

@Pryme8 Bleh... through my poor research seems like BABYLON.Vector3.Lerp() is a static method of the Animation class; might we use that than the complicated math?


For advanced keyframe animation, you can also define the functions used to interpolate (transition) between keys. By default these functions are the following:

BABYLON.Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) {
  return BABYLON.Vector3.Lerp(startValue, endValue, gradient);

But the more I look into it, it just seems like granularity is unnecessary? It appears that the basic interpolation + blending is good and free( @Deltakosh could maybe shed light on this?)  I checked out the rollercoaster example and the problem again is that the track path is created at runtime prior to the animations start.  The paths need are generated off of current camera position (dynamic)  and an end camera position (static).

/** Pseudo Code **/

// On click of (B) go from BABYLON.Vector3(0,0,0) to BABYLON.Vector3(0,0,-10);  ( A-> B)

// Animation completes//

// On click of (C) go from BABYLON.Vector3(0,0,-10); to BABYLON.Vector3(0,10,0); (B -> C)

// Animation cancels; animation is incomplete; Animation changes trajectory from new Event.

// On click of (A) go from current.camera.position to BABYLON.Vector3(0,0,0) (currentPos -> A)


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