Jump to content

Smooth transition between Universal and ArcRotate cameras possible?


Recommended Posts

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.

        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.selectedID  = pickResult.pickedMesh.metadata.entityID;
                this.orbitCamera.position = this.scene.activeCamera.position;

                this.currentTarget = new BABYLON.Vector3(pickResult.pickedMesh.x,pickResult.pickedMesh.y,pickResult.pickedMesh.z);
                this.scene.activeCamera = this.orbitCamera;


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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...