ArcRotateCamera from point A to point B smoothly

[darcome]

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!

[Temechon]

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

[darcome]

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?

[darcome]

Sorry, I saw now that I made a mistake...

 

It works!

 

Not as I expected, but it works! I have to work on the parameters

[Wingnut]

Oh man, ya beat me to it.  Good job!  I made a playground of it... if you or others want to play.

http://playground.babylonjs.com/#14EFVR

betaKeys, betaAnim ... *shrug*  Why can't these darned computers figure out what we meant to type, eh? 

 

Be well, darcome!  Good eyes.

[FireFist]

Found a cool way to animate the position using TweenJS http://www.createjs.com/tweenjs.

createjs.Tween.get(camera).to({ alpha: Math.PI, radius: 20 }, 1000);