Smooth transition between Universal and ArcRotate cameras possible?

[Zephos]

Hi everyone,

I am new to Babylon.js and have searched for hours for a solution to this but haven't succeeded. Basically I have two cameras, a Universal and an ArcRotate, and when you click on an object to select it I would like to switch from Universal to ArcRotate smoothly so you can begin orbiting the object. While I can switch cameras just fine, that transition has been unpredictable and I never know from what direction or distance I will be looking at the object. Same goes for the opposite transition that that happens when you click the object again to deselect it.

This is the function that gets executed as an Observer on scene.onPointerObservalble for POINTERDOWN event types.

mouseClick(pointerEvent){
        let pickResult = pointerEvent.pickInfo;

        if(pickResult.hit) {
            if(pickResult.pickedMesh.metadata.entityID == this.selectedID){
                this.selectedID = "";

                this.universalCamera.position = this.scene.activeCamera.position;

                this.scene.activeCamera = this.universalCamera;
                this.scene.activeCamera.attachControl(this.canvas,false);

            }
            else{
                this.selectedID  = pickResult.pickedMesh.metadata.entityID;
                this.gameManager.ApplyUserAction("selectObject",{"entityID":pickResult.pickedMesh.metadata.entityID});
                
                this.orbitCamera.position = this.scene.activeCamera.position;
                this.orbitCamera.setTarget(pickResult.pickedMesh);

                this.currentTarget = new BABYLON.Vector3(pickResult.pickedMesh.x,pickResult.pickedMesh.y,pickResult.pickedMesh.z);
                this.scene.activeCamera = this.orbitCamera;
                this.scene.activeCamera.attachControl(this.canvas,false,true,true);
            }

        }
    }

As you can see I am trying to sync the cameras up to have the same position before switching them, but that does not take into account rotations, which is why the transition is not smooth.

Is there anyway I can simply center the selected object smoothly to switch to the ArcRotateCamera with some kind of animation, and then when deselected move and rotate the UniversalCamera to have the same view as the ArcRotateCamera before switching?

 

Thanks in advance.

[Guest]

Hello! you should create a repro in the Playground to get more precise help. But here are some thoughts:

- Try using this.orbitCamera.setPosition()

- Call his.orbitCamera.setTarget before setPosition