Animated Camera Control

I’m new to BabylonJS and interested in building a UI to animate a camera target along a spline, setting the camera orientation and distance relative to the target at key points along the spline and interpolating in between. I need a window showing the camera view as the target flys along the spline. One I’ve achieved this, I’d like to be able to set the velocity and acceleration of the camera target, and export the camera positions over a serial port or websocket.

I’ve done some research and looked at examples and realise there’s a lot I don’t know how to do!

I think I can do the first step and create a spline path and a ground plane for reference. I’m then unclear how to deal with the remaining tasks:

  • Animate a target mesh along the spline path
  • Pitch/Roll/Yaw the camera about the target at keypoints on the spline path
  • Control the vel and acceleration of the target along the spline path
  • Set the distance from the camera sensor to target
  • Output the camera position data as a function of time

I’d welcome some pointers as to how to go about this. I’d also be happy to pay for some freelance work to speed up my efforts!



This thread might help Animate camera along curved path and also @PirateJC could be a great source of info to get started :slight_smile:

1 Like

An alternative method Building a Track for a Carriage to Follow | Babylon.js Documentation. See rollercoaster example at end.


How did I not think about this one? You are the best @JohnK


Hi JohnK - I looked at the rollercoaster example, but I don’t know how to add roll to the yaw/pitch only ArcRotate camera. Based on a three.js spline editor example, I should be able to figure out how to implement an editable spline, but how do I store the camera yaw/pitch/roll and distance from target at each spline point (keyframe)?

Not sure if it would work but try to vary the upVector ArcRotateCamera | Babylon.js Documentation

1 Like

Thanks Sebavan - I’ll look into this.

I found an interesting suggestion to use a box as the camera, then attach a camera to the box. Will this help with giving me roll control over the camera?

I’m completely new to 3d programming, and it’s a bit of a steep climb getting my head around the 3d programming concepts, which I guess are 2nd nature to 3d game engine programmers!

I’m imaging a 3d spline with keypoints visible. Clicking on a keypoint moves a camera wireframe to the keypoint (the two connected by a line), and shows an XYZ gizmo (so the spline point can be dragged about), and rotation circles (so the camera can be rotated about the keypoint). I suspect I could just about manage to draw a spline and place keypoints on it and show XYZ and YPR gizmos. What I’ve got no idea about is what properties/methods of the camera, or camera parent box mesh to work with to give me the rotation behaviour!

Further thoughts - I can probably hack my way through 1-3, but could do with some pointers to 4 onwards:

  1. Setup a straight path segment with a start and end point
  2. Centre a target box on the start point and set it’s orientation
  3. Centre a target box on the end point and set it’s orientation
  4. Somehow interpolate the target box orientation between the start and end point as it travels along the line
  5. Draw a line from the target box normal/binormal to a camera parent box normal/binormal
  6. Attach a camera to the camera parent box
  7. Animate the target box along the line from start point to end point

Would it not be just a slerp between start and end rotation ?

Would lerp still work when I extend to multiple keypoints? I’m looking for smooth target motion along the path.

Eventually I want to be able to specify acceleration and velocity profiling to the target animation along the path. Is lerp the right approach from the get go with this in mind?

slerp will unfortunately only interpolate linearly between rotations. In your case you definitely wants something more complex to create your own animation curve.

I’m wondering if lerp linear Yaw/Pitch/Roll interpolation between spline keypoints will be ok as the non linear animation easing will take care of velocity control ?

I’m making progress - dumped the target mesh and empty camera parent mesh and now animating a transform node along the target path, with the camera as child. I’m managing the interpolation of the transform node manually in the animation loop. I should probably check out the ready made functions as they may save me time, but it’s a fine balance between learning sometning new and using what I already know!

1 Like

@sebavan @johnk @PirateJC

I’d appreciate your thoughts as to whether it’s best to use BJS animation features, or code from scratch in the render loop. In a nutshell, I’m building editable 3d spline paths, with a coord system moving along the path, and camera pointing to the coord system. The GUI needs to allow the user to scrub through the animation, edit 3d spline keypoints with gizmos, and change the vel/acc of the coord system along the path.