Animate camera following a path with curves

Questions
,
1

Hello,
in some projects I developed recently I used a camera that animates along a path triggered by the scroll event, like this project i made → The Bit Hall

The path is linear, it goes from point A to B, from B to C, ecc… and the transformation that applies on the camera are: change of position (X or Z), change of rotation (Y - to turn around).

I would like to add in the next project also a path that has some curves, so that it doesn’t have to zigzag, but can have a smoother road.

What I do to achieve the result right now is:

  • create an empty div tag with a height in pixels, that acts as scroller
  • use the library GSAP to create a timeline that starts and end with the #scroller and that animates the values of position and rotation of the camera according to the moment of the timeline

I’m stuck on understanding how to insert the curve inside my path animation.
I’m open to change method for the animation, so to stop relying on GSAP, but still I can’t find a way.
https://www.babylonjs-playground.com/#1AU0M4#124 → this playground shows how to use the catmull curves, but it feels unworkable to me to set every single Vector, especially because my animation is long and complex.

I also looked up how to export the camera animation from blender, which seems the most convenient way, but i can’t make it work.

Do you have any ideas on the best approach or some suggestions?

Thank you!

2

These might be worth a look.

3

Thank you for the reference!!
I saw that documentation part before, but it seems really mathematical and I don’t think i would be able to recreate all the path and curves in this way, especially because my path is inside a big .glb model.

That’s why I thought that exporting an animation and curve directly from blender could be the best approach, but maybe it’s not doable.

4

Ok, i’ve made some progress.
Following this tutorial, I created an empty mesh that follows the path of a bezier curve in blender → Blender 2.8 - Follow Path Constraint & Baking Animation for glTF exports - YouTube
Then I exported it as glb and imported in my scene.
The animation was inside the animationGroups array, so I took it and linked it to the camera.

    let animationGroup = this.scene.animationGroups[0];
    let animationGroupTarget = animationGroup.targetedAnimations;

    let newAnimationGroup = new AnimationGroup("cameraAnimationGroup");
    newAnimationGroup.addTargetedAnimation(animationGroupTarget[0].animation, this.camera);
    newAnimationGroup.addTargetedAnimation(animationGroupTarget[1].animation, this.camera);
    newAnimationGroup.addTargetedAnimation(animationGroupTarget[2].animation, this.camera);

    this.scene.animationGroups[1].play();

In this moment the camera is following the complex curve I made on Blender.
What I need to do now, is to make it play the animation when scrolling.
I’ll update this question with another comment if I found a solution, cause maybe it can be useful for somebody

5

You may try to use YUKA library, it simplifies math calculations for different steering behaviors.
Example - Yuka | Steering Behaviors | Follow Path

Github: GitHub - eldinor/yuka-babylonjs-examples: Yuka Game AI + 3D rendering with Babylon.js

More examples: Yuka | Examples with Babylon.js

1 Like
6

You can listen to the wheel event and then play a determined number of frames: Available Mesh BrainStem | Babylon.js Playground (babylonjs.com)

3 Likes
7

@carolhmj thank you for the answer!
Now it works great, except for a problem: THE AXIS.
When I export a file from Blender, I invert the camera position X and the rotationQuaternion.y and it binds correctly to the expected path.
But, when i’m exporting the model and the baked animation from Cinema 4d it gets messed up and it seems I can’t find a way to invert the axis correctly. I tried all the possible combination.
Have you ever encountered this problem?
Otherwise i’ll try to make a playground that emulates that behavior.

Thank you!!

8

Hmmm these kinds of problems are common as there isn’t a standard coordinate system, but seeing a playground would be better :slight_smile:

9

Hey, thank you for the answer.
I did two scenes, one in Blender → https://playground.babylonjs.com/#PZ7FK4#2
And one in Cinema 4d → Babylon.js Playground
The first one links correctly the camera to the path, after having changed this properties:

camera.position.x = -camera.position.x;
camera.rotationQuaternion.y = -camera.rotationQuaternion.y;

While the second one if I give the same parameters, it follows the curve but it faces backward instead of foreword. (the blue sphere are on the left instead of the right).
I tried to change all the x, y, z position / rotationQuaternion of that camera, but I can’t find a way to make if work like in the first scene (the one in Blender).

Thank you for any kind of help :sunny:

10

Is this the same scene? They look sort of different to me (doesn’t help).
I would say the same as @carolhmj, clearly a coordinate issue between left and right handed system.
Did you try make an .obj export from .c4d. Here you are using an export format to .glb I suspect it may be does not handle the camera/animationGroup conversion coordinates system or otherwise conflicts on import.
I’m also getting errors when trying to work the PG because everything is built on the mesh import and anims are not ready. Can you may be do just a simpler version of the PG without the animation for a debug on just the initial camera position and rotation?

1 Like
11

Hello!
Unfortunately I don’t have Cinema 4d, so I don’t have control of that part.
As soon as the person working on that is back, I’ll try to prepare the material in order to debug it better.
In the meanwhile, thank you :slight_smile:

1 Like