ArcRotateCamera animation

[mattx264]

Hi,

Is it way to add animation to camera. For example move forward 100px then rotate 90 deg to left.

 

THANK YOU FOR ANY TIP

[Wingnut]

Hi Mattx264!  Welcome to the forum!  Good to have you with us.

 

There are many ways to animate a babylon.js arcRotateCamera.  The two mains ways are...  with your own function, or with a babylon.js Animation object, using 'keys'. Be sure to take a look at our Animation Tutorial, which is part of our Playpen Series Tutorials.

 

And don't forget about the babylon.js API Documentation.  I set that link to the ArcRotateCamera.  Use the 'Classes' pull-down menu to look at any babylon.js class.

 

But, I am a really nice guy... so I built a demo just for you .    I also made a zipped version of it .  Inside the demo (in the html file), you will see that I used babylon's scene.registerBeforeRender method... to register a function called 'myAnimation',  It is a 2-stage animation function.  First, it flies-in the camera from 160 units out... to 60 units out (by subtracting value from the camera.radius).  Then it stops doing that, and begins subtracting radians from the camera.alpha (which I start at Math.PI/2 - about 1.57 radians - facing +z) and stops when the .alpha is < 0.

 

Experiment, experiment, experiment, friend.  Be patient with yourself, show us and tell us about your discoveries and ideas, and have good fun!

[mattx264]

Great! thank you very much

[davrous]

Hi,

 

 I've also explained how to animate the camera in this tutorial: http://blogs.msdn.com/b/davrous/archive/2014/02/19/coding4fun-tutorial-creating-a-3d-webgl-procedural-qrcode-maze-with-babylon-js.aspx - Step 6. 

 

Bye,

 

David

[mattx264]

ok,

Every think works great with free camera, but when i switched to ArcRotateCamera I'm getting error.
 

 

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, new BABYLON.Vector3(-0.5, 0.5, -1), scene);

..

..

.

 animateCameraPositionAndRotation(camera, camera.position,

                new BABYLON.Vector3(16, 150, 15),

                camera.rotation,

                new BABYLON.Vector3(1.4922565104551517, -3.1539869787074517, 0));

          

        });

////////////////////////////////////////////////////

 var animateCameraPositionAndRotation = function (freeCamera, fromPosition, toPosition,

                                                fromRotation, toRotation) {

 

            var animCamPosition = new BABYLON.Animation("animCam", "position", 30,

                                      BABYLON.Animation.ANIMATIONTYPE_VECTOR3,

                                      BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

 

            var keysPosition = [];

            keysPosition.push({

                frame: 0,

                value: fromPosition

            });

            keysPosition.push({

                frame: 100,

                value: toPosition

            });

 

            animCamPosition.setKeys(keysPosition);

 

            var animCamRotation = new BABYLON.Animation("animCam", "rotation", 30,

                                      BABYLON.Animation.ANIMATIONTYPE_VECTOR3,

                                      BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

 

            var keysRotation = [];

            keysRotation.push({

                frame: 0,

                value: fromRotation

            });

            keysRotation.push({

                frame: 100,

                value: toRotation

            });

 

            animCamRotation.setKeys(keysRotation);

            freeCamera.animations.push(animCamPosition);

            freeCamera.animations.push(animCamRotation);

 

            scene.beginAnimation(freeCamera, 0, 100, false, 1, function () {

                camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, BABYLON.Vector3.Zero(), scene);

            });

        };

 

/////////////////////

 

console error:

1. Uncaught TypeError: Cannot read property 'x' of undefined babylon.1.9.0.js:1
   1. BABYLON.Vector3.Lerpbabylon.1.9.0.js:1
   2. BABYLON.Animation.vector3InterpolateFunctionbabylon.1.9.0.js:24
   3. BABYLON.Animation._interpolatebabylon.1.9.0.js:24
   4. BABYLON.Animation.animatebabylon.1.9.0.js:24
   5. BABYLON._Animatable._animatebabylon.1.9.0.js:24
   6. BABYLON.Scene._animatebabylon.1.9.0.js:1
   7. BABYLON.Scene.renderbabylon.1.9.0.js:1
   8. (anonymous function)index.js:37
   9. BABYLON.Engine._renderLoopbabylon.1.9.0.js:1
   10. (anonymous function)
2.  

[GameMonetize]

this is because arcrotatecamera does not have a rotation property: it uses alpha and beta angles to determine position on a virtual 3d sphere

[mattx264]

Thank you @Deltakosh.

I wrote this function, may be it will help somebody.

 

 

var ArcAnimation = function (toAlpha, toBeta, toRadius,position) {

           

            var animCamAlpha = new BABYLON.Animation("animCam", "alpha", 30,

                                      BABYLON.Animation.ANIMATIONTYPE_FLOAT,

                                      BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

 

            var keysAlpha = [];

            keysAlpha.push({

                frame: 0,

                value: camera.alpha

            });

            keysAlpha.push({

                frame: 100,

                value: toAlpha

            });

            var animCamBeta = new BABYLON.Animation("animCam", "beta", 30,

                                     BABYLON.Animation.ANIMATIONTYPE_FLOAT,

                                     BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

 

            var keysBeta = [];

            keysBeta.push({

                frame: 0,

                value: camera.beta

            });

            keysBeta.push({

                frame: 100,

                value: toBeta

            });

            var animCamRadius = new BABYLON.Animation("animCam", "radius", 30,

                                    BABYLON.Animation.ANIMATIONTYPE_FLOAT,

                                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

 

            var keysRadius = [];

            keysRadius.push({

                frame: 0,

                value: camera.radius

            });

            keysRadius.push({

                frame: 100,

                value: toRadius

            });

            animCamAlpha.setKeys(keysAlpha);

            animCamBeta.setKeys(keysBeta);

            animCamRadius.setKeys(keysRadius);

            camera.animations.push(animCamAlpha);

            camera.animations.push(animCamBeta);

            camera.animations.push(animCamRadius);

            scene.beginAnimation(camera, 0, 100, false, 1, function () {

             

            });

 

        }

[ancientholiday]

matt,

 

I am confused

 

what is the actual numeric value of toRadius, toAlpha, and toBeta?  How can you tell Babylon what these values are?  How does the function know what the final value of toRadius, toAlpha, and toBeta are if they are not declared in the script? How do you define the end position?

[Wingnut]

Ancient... please meet me in your current thread...  http://www.html5gamedevs.com/topic/15895-animating-camera-parameters-with-key-frames/

 

See ya there.