What is the best way to add a tilt effect to an animated free camera based on mouse movement?

Questions
,
1

Hello all,

We are working on a 3D scene for a client which features an animated camera on a track. In the final website, the user will be able to click and drag to move the scene back and forth. However, in our team, we was thinking with more ways to add interactivity and something we have done before is add a 3D tilt effect so that when you move the mouse the scene/camera tilts slightly to emphasis the 3D-ness.

I have achieved an effect like this before using an ArcRotateCamera and adding/subtracting to the alpha & beta values of the camera based on mouse position.

However, in this scene, our 3D team have provided a camera animated on a track via an animation group. This animation group also points the camera to the correct position for each part (the cubes in the playground). I was thinking I could cast it as a ArcRotateCam (if thats possible) but think it would mess up the camera pointing.

I was also thinking instead of tilting the camera, tilt the scene to achieve the same effect, the only thing with that is I’d want it to rotate around each of the camera targets, so if the user slides along the scene, the pivot also switches.

Any idea on achieving this functionality would be greatly appreciated thanks!

1 Like
2

@PolygonalSun would be the best of us to answer this one :slight_smile:

3

Hey @callumdotexe,

So, I’m having a bit of difficulty picturing exactly what you mean by 3d tilt but I’m assuming that you mean to rotate the camera with respect to the user’s input (if I’m misunderstanding, please let me know). Anyway, it looks like, the animation is tied to a TransformNode of the same name as your camera. Since that animation belongs to that node and your actual camera is a child of that node, you could still move the camera (within the local space of the TransformNode) and it should still be able to move along the same path.

I could also see an approach where you instead, use an ArcRotateCamera and animate the camera’s target so that the camera will continue to move but will also rotate around its target along the “track”. The ArcRotateCamera should move automatically with any changes to its target’s position because it has to maintain its current alpha/beta/radius. I’m not sure if this information helps but that’s what comes to mind with an initial inspection of the PG.

4

Could the flyCamera not be useful here?

doc :

The flyCamera can have an inclination (roll)

5

Maybe just addInPlace rotation and position to simulate the tilt effect?

Change the values to tilt more or less.

https://playground.babylonjs.com/#A1DQG8#3

6

Thanks for your response. This looks pretty good, I will put some time aside to adding it to the project and see what the team thinks.

7

Yeah, you’re right I think. So imagine the camera pointing at one of the cubes and then when the user moves their mouse around the screen, the camera rotates around the cube slightly.

I will do some more testing with your suggestions in mind and see what works best.

Thanks for the comments.