Jump to content

ArcRotateCamera animation


mattx264
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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.  
Link to comment
Share on other sites

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 () {
             
            });
 
        }
Link to comment
Share on other sites

  • 1 year later...

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?

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.

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