Jump to content

ArcRotateCamera from point A to point B smoothly


darcome
 Share

Recommended Posts

Hello everyone!

 

I know there is a function .setPosition but I want to know this...

 

Let's make my camera is at Vector3(0, 0, 100). The user move the camera wherever he wants. With a button I want the camera go back to Vector3(0, 0, 100), but not in a frame, but smoothly... how can i do it?

Or, even better, how can I move the camera to a specific point calculating the fastest route and assigning a velocity?

 

For me the problem is that the route is not a line, but a curve and I don't know how to calculate it. Or maybe in BabylonJS there are other ways to accomplish it!

 

I hope I've been clear :)

 

Thanks in advance for any help you'll provide!

Link to comment
Share on other sites

Hey, 

 

You have to create Animations to do it smoothly, linked to your camera parameters. For a FreeCamera, it's position and rotation, and for a ArcRotateCamera it's radius and target.

Here what you can do with a freeCamera : 

animateCamera : function(cam, pos, rot) {        var position = new BABYLON.Animation("camPos",            "position", 60,            BABYLON.Animation.ANIMATIONTYPE_VECTOR3,            BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);        var rotation = new BABYLON.Animation("camRot",            "rotation", 60,            BABYLON.Animation.ANIMATIONTYPE_VECTOR3,            BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);        var keys = [            {frame:0, value:cam.position},            {frame:100, value:pos}        ];        var keys2 = [            {frame:0, value:cam.rotation},            {frame:100, value:rot}        ];        position.setKeys(keys);        rotation.setKeys(keys2);        cam.animations.push(position);        cam.animations.push(rotation);        this.scene.beginAnimation(cam, 0, 100, false, 1);    }

And for an arc rotate camera : 

_moveCamera : function(dir, callback) {        var startPos = this.scene.activeCamera.target.z;        var startRadius = this.scene.activeCamera.radius;        var endPos, endRadius;        switch (dir) {            case "left":                endPos = 0;                endRadius = this.startRadius;                break;            case "right":                endPos = 100;                endRadius = this.endRadius;                break;        }        var translate = new BABYLON.Animation(            "camTranslate",            "target.z",            60,            BABYLON.Animation.ANIMATIONTYPE_FLOAT,            BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);        var radius = new BABYLON.Animation(            "camAlpha",            "radius",            60,            BABYLON.Animation.ANIMATIONTYPE_FLOAT,            BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);        var keys = [{frame:0, value:startPos}, {frame:100, value:endPos}];        var keys2 = [{frame:0, value:startRadius}, {frame:100, value:endRadius}];        translate.setKeys(keys);        radius.setKeys(keys2);        this.scene.activeCamera.animations.push(translate);        this.scene.activeCamera.animations.push(radius);        this.scene.beginAnimation(this.scene.activeCamera, 0, 100, false, 5.0, callback);    }

Good luck !

 

Cheers

Link to comment
Share on other sites

I tried with the following code:

function ResetCamera (){	var alphaAnim 	= new BABYLON.Animation ("alphaAnim", "alpha", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);	var betaAnim 	= new BABYLON.Animation ("betaAnim", "beta", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);			var alphaKeys 	= [{frame: 0, value: scene.activeCamera.alpha}, {frame: 100, value: 0}];	var betaKeys 	= [{frame: 0, value: scene.activeCamera.beta},  {frame: 100, value: 0}];				alphaAnim.setKeys 	(alphaKeys);	betaAnim.setKeys 	(betaKeys);				scene.activeCamera.animations.push (alphaAnim);	scene.activeCamera.animations.push (betaKeys);	scene.beginAnimation (scene.activeCamera, 0, 100, false);}

But the camera is not moving and in the Firefox console, I read the following error:

TypeError: e.animate is not a function babylon.js:11

What can it be?

Link to comment
Share on other sites

  • 2 years later...

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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