model heading point the north with orientation : new Cesium.VelocityOrientationProperty(property)

hello,

I'm using orientation : new Cesium.VelocityOrientationProperty(property) but the model is pointing to the north and doesn't change, do you know why?

to try my code, replace registration string on line 20 with registration of active airplane from flightradar24.com

var newLat=49.451413;
var newLong=2.111137;
var track_old=0;
var delta_track=0;
var track=0;
var res4; //latitude_value
var res5; // longitude_value
var res6;
var res7;
var res8=0;
var res9=0;
var timer=0;
var camtime=Date.now();
var datatime=0;
var datatimeold=0;
var cameraAngle = 1;
var dataAvailable=0;
var position;
var timerimmat= 0;
var registration= 'F-GRHQ';
var start=Date.now();
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
var time = Cesium.JulianDate.addSeconds(start, 45, new Cesium.JulianDate());
var timermodel=0;
var i=0;
var vspeed=0;
var orientation;

var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, //Disable InfoBox widget
    selectionIndicator: false, //Disable selection indicator
    shouldAnimate: true, // Enable animations
    terrainProvider: Cesium.createWorldTerrain()
});

//Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;

//Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

//Set the random number seed for consistent results.
Cesium.Math.setRandomNumberSeed(3);
flightradar();

function clocking(){
stop = Cesium.JulianDate.addHours(datatime,12,new Cesium.JulianDate());
time = datatime;
//Make sure viewer is at the desired time.
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.multiplier = 1;
    //Set timeline to simulation bounds
viewer.timeline.zoomTo(start, stop);
}

var property = new Cesium.SampledPositionProperty();
var trackproperty= new Cesium.SampledPositionProperty();
        property.setInterpolationOptions({
            interpolationDegree : 5,
            interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
        });

        trackproperty.setInterpolationOptions({
            interpolationDegree : 5,
            interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
        });

// generate buffer with flight data
function computeCirclularFlight(lon, lat, height, timedata, tracksample) {

        //time = timedata;//;//timedata;
        position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
        
        var heading = Cesium.Math.toRadians(tracksample);
        var pitch = Cesium.Math.toRadians(0);
        var roll = Cesium.Math.toRadians(0);
        var hpRoll = new Cesium.HeadingPitchRoll(heading,pitch,roll);
        var sampleorientation = Cesium.Transforms.headingPitchRollQuaternion(position,hpRoll);
        property.addSample(time, position);
        trackproperty.addSample(time, sampleorientation);
        //Also create a point for each sample we generate.
        viewer.entities.add({
            position : position,
            point : {
                pixelSize : 8,
                color : Cesium.Color.TRANSPARENT,
                outlineColor : Cesium.Color.YELLOW,
                outlineWidth : 3
            }
        });
    
    return property;
}

//Actually create the entity
var entity = viewer.entities.add({

    //Use our computed positions
    position : position,

    //Automatically compute orientation based on position movement.
   //orientation : new Cesium.VelocityOrientationProperty(property),

    //Load the Cesium plane model to represent the entity
    model : {
        uri : '../../../../Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
        minimumPixelSize : 64
    }
});

    function flightradar()
    {

            var date= Date.now();
            var res;
            var url = 'https://data-live.flightradar24.com/zones/fcgi/feed.js?reg=!’+registration;
            var doc= new XMLHttpRequest();
            doc.onreadystatechange = function(){
                if(doc.readyState == XMLHttpRequest.DONE){
                    res=doc.responseText;//JS.data(doc.responseText);
                    //console.log(res);
                    dataAvailable=res.length
                    if(dataAvailable>40)
                    {
                        var res1=res.split("[");
                        var res2=res1[1];
                        var res3=res2.split(",");
                        res4=parseFloat(res3[1]); //latitude_value
                        res5=parseFloat(res3[2]); // longitude_value
                        res6=parseFloat(res3[3])-90; // track_value
                        res7=parseFloat(res3[4])*0.3048; // altitude_value
                        res8=parseFloat(res3[5]); // speed_value
                        res9=parseInt((parseFloat(res3[15])*0.4*100)/100); // Vspeed_value
                        datatime=Cesium.JulianDate.fromDate(new Date(parseInt(res3[10])*1000));// timestamp of data recorded
                        if(datatime!==undefined && datatime!==0 && datatimeold<parseInt(res3[10]))
                           {
                           start=datatime;
                           datatimeold=parseInt(res3[10]);
                           
                           }
                    }

            }
                };
            doc.open('GET', url, true);
            doc.send();
}

viewer.clock.onTick.addEventListener(function(clock){
        if(Date.now()>=timer+500)
        {
            flightradar();
            if(datatime!==undefined && datatime!==0)
            {
             clocking();
             computeCirclularFlight(res5,res4, res7,datatime,res6);
             datatimeold=datatime;
            }
            entity.viewFrom= new Cesium.Cartesian3(30, 30, 10);
            timer=Date.now();
        }
                if(Date.now()>=timermodel+10)
        {
         
            if(Date.now()<=timer+500)
        {
            
            if(datatime!==undefined && datatime!==0)
            {
            i=i+0.01;
            var propertyPosition=property.getValue(Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate()));
                
                if(propertyPosition!==undefined)
                {
                   entity.position=propertyPosition;
                   entity.orientation=trackproperty.getValue(Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate()));//new Cesium.VelocityOrientationProperty(entity.position);//
    //console.log(trackproperty.getValue(Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate())));
                
                viewer.trackedEntity = entity;
                }
               
                timermodel=Date.now();
            }
        }
            
        }
    
});

It’s a bit hard to follow your code, but I see that you’re not using the VelocityOrientationProperty here (it’s commented out).

Instead of using onTick you can use Callback functions to chain together properties (this’ll just make sure it’s only evaluated when needed and works well with the timeline).

It does work for me when I initialize the VelocityOrientationProperty and comment out the code that continually updates the position and orientation in the onTick (which the PositionProperty and the VelocityOrientationProperty will do automatically). Your other problem is this line:

position : position,

``

position is undefined. I believe it’s supposed to be:

position : property,

``

For reference, this pull request has a Sandcastle example I’ve been working on that uses velocity orientation property as well as sampled positions:

While it’s not your exact use case, you might find it useful until we have a tutorial for how to handle this case.

I’d suggest starting with a simpler case (like the vehicle example in the PR above) to make sure you can see how to use the dynamic properties. This is a link to the new Sandcastle code in the PR:

https://github.com/AnalyticalGraphicsInc/cesium/pull/7361/files#diff-b5d8d36a356a5bf0baaef6fc4daa77cc