How to Fly to a model

[David E]

I want to create a flight animation to move to (and later follow) the movement of a model.  The Sandcastle demo sets the camera position to jump directly to the desired location, but I'm unable to map that into a CameraFlightPath to create a smoother fly-to effect.  

The closest I can get to it is below (bold is what I changed from the Sandcastle model demo).  The animation in this case starts out fine, but towards the end 'jumps' to a different view and ends up pointing off axis from the model.  If I also try applying the transform to the direction, then I get invalid array length errors.  

thanks,

- David

require(['Cesium'], function(Cesium) {

    "use strict";

    var flyToModel = false;

    var viewer = new Cesium.Viewer('cesiumContainer');

    var scene = viewer.scene;

    var ellipsoid = scene.primitives.centralBody.ellipsoid;

    

    function createModel(url, height) {

        height = Cesium.defaultValue(height, 0.0);

        var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-123.0744619, 44.0503706, height)));

        

        scene.primitives.removeAll(); // Remove previous model

        var model = scene.primitives.add(Cesium.Model.fromGltf({

            url : url,

            modelMatrix : modelMatrix

        }));

        

        model.readyToRender.addEventListener(function(model) {

            // Play and loop all animations at half-spead

            model.activeAnimations.addAll({

                speedup : 0.5,

                loop : Cesium.ModelAnimationLoop.REPEAT

            });

            var worldBoundingSphere = model.computeWorldBoundingSphere();

            var center = worldBoundingSphere.center;

            var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

            var camera;

            

           if (flyToModel == false) {

                // Zoom to model

                camera = scene.camera;

                camera.transform = transform;

           } else {             

               camera = new Cesium.Camera(scene.context);

           }

            

           

           camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;

           var controller = scene.screenSpaceCameraController;

           controller.ellipsoid = Cesium.Ellipsoid.UNIT_SPHERE;

           controller.enableTilt = false;

           var r = 1.25 * Math.max(worldBoundingSphere.radius, camera.frustum.near);

           controller.minimumZoomDistance = r * 0.25;

           camera.lookAt(new Cesium.Cartesian3(r, r, r), Cesium.Cartesian3.ZERO, Cesium.Cartesian3.UNIT_Z);

            if (flyToModel == true) {

               var flightDuration = 3000;

               

               var description = {

                destination : Cesium.Matrix4.multiplyByPoint(transform,camera.position),

                duration : flightDuration,

                up : camera.up,

                direction : camera.direction,

                endReferenceFrame : transform // was Matrix4.IDENTITY

               };

               var flight = Cesium.CameraFlightPath.createAnimation(scene, description);

               scene.animations.add(flight);

               

           }

        });

    }

    

    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

    handler.setInputAction(

        function (movement) {

            var pick = scene.pick(movement.endPosition);

            if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {

                // Output glTF node and mesh under the mouse. 

                console.log('node: ' + pick.node.name + '. mesh: ' + pick.mesh.name);

            }

        },

        Cesium.ScreenSpaceEventType.MOUSE_MOVE

    );

    

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

    

    var options = [{

        text : 'Aircraft',

        url : '../models/CesiumAir/Cesium_Air.json',

        height : 5000.0

    }, {

        text : 'Ground vehicle',

        url : '../models/CesiumGround/Cesium_Ground.json'

    }, {

        text : 'Skinned character',

        url : '../models/CesiumMan/Cesium_Man.json'

    }];

    createModel(options[0].url, options[0].height);

    

    Sandcastle.addToolbarMenu(options, function() {

        var option = options[this.selectedIndex];

        createModel(option.url, option.height);

    });

    Sandcastle.addToolbarButton("Toggle Flight", function() {

        flyToModel = !flyToModel;

    });

    Sandcastle.finishedLoading();

});