Multiple camera transitions and smooth rigging

Questions
1

Hi there,

I’m currently working on a project to create a smaller but similarly fun world to https://www.kodeclubs.com/. Two battles I’m combating right now are related to camera controls and movement. I’ve decided to use an ArcRotateCamera as it seems the best to manage targeted objects. In the Kode example the character remains in 3rd-person view then clicking on the navigation at the bottom-center it pulls out to a birds-eye or worldview.

First, I’m having trouble deciding how best to replicate the 3rd-person camera (from behind the character). There are a few examples scattered throughout Babylons forum but none are as fluid. Second, once I determine the 3rd person camera solve I need to make it possible to transition to worldview seamlessly.

My current solution would involve tweening the camera’s alpha, delta, position and rotations to the right coordinates while removing the input controls.

I’m wondering how a seasoned Babylon developer might solve this?

Thanks!

David

1 Like
2

I like this approach. Can you maybe reproduce a simple version of it in the Playground so @PirateJC or @PolygonalSun can share their thoughts?

3

Hey @dbase, so the way I see it, if you’re trying to move the camera in and out smoothly, one approach might be to use a lerp for handling location changes.

var nextCameraPosition;
var nextCameraTarget;
...
function setCameraMove(position, target) {
     nextCameraPosition = position;
     nextCameraTarget = wherever you want the camera to look once it stops moving
     camera.detachControl();
}
...
scene.onBeforeRenderObservable.add(() => {
     let deltaX = Math.abs(nextCameraPosition.x - camera.position.x);
     let deltaY = Math.abs(nextCameraPosition.y - camera.position.y);
     let deltaZ = Math.abs(nextCameraPosition.z - camera.position.z);

     if (deltaX > 0.01 || deltaY > 0.01 || deltaZ > 0.01) {
          camera.setPosition(BABYLON.Vector3.Lerp(camera.position, nextCameraPosition, 0.02));
          // For the best results, it's recommended to move the target at the same rate as the position
          camera.setTarget(BABYLON.Vector3.Lerp(camera.target, nextCameraTarget, 0.02));
     }
     else if (camera.target !== nextCameraTarget) {
          // They'll be off by a bit because of how floats work so this fixes that discrepancy
          camera.position = nextCameraPosition;
          camera.target = nextCameraTarget;
          camera.attachControl(canvas, true);
     }
});

Now, this is kind of a down and dirty way to do it but what this does is allow you to assign the desired move location and move it bit-by-bit with each frame. Check out this demo for an example of this: Chessboard Demo | Babylon.js Playground (babylonjs.com).

I’m not sure if this is what you’re looking for so any additional info or a PG would be great for clarification.

3 Likes
4

Oh man it seems like my notifications never notified me and I never got a reply to this. Thanks for providing the solution, we ended up coming up with basically the same solutions :slight_smile:

3 Likes