using 3D models in CZML file to move an object - cesiumjs

Question

I am creating a CZML file, I have a path that I want my object to follow that path and move on it location by location (I defined positions based on time epoch.)
It works perfectly with billboard with an image, but when I change my code to have a model, for example one of the 3D models in sandcastle, instead of billboard it is not working. It does not even show the model. I just have a label, moving around the path, but no sign of model.
What is the problem? I deeply want to use 3D model in CZML files, not in javaScript. I will be delighted if someone could help me with it.
I saved the my data in .czml file and then I will load them in html by javaScript as follow:
viewer.dataSources.add(Cesium.CzmlDataSource.load('../../SampleData/fstsp_solution.czml'));
and a copy of my czml file is:
[
{
"id":"document",
"version":"1.0"
},
{
"id":"Vehicle",
"availability":"2012-08-04T16:00:00Z/2012-08-04T17:04:54.9962195740191Z",
"model":{
"show":true,
"gltf":"../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.bgltf",
"scale":2,
"minimumPixelSize":25
},
"oriantation":{
"interpolationAlgorithm":"LAGRANGE",
"interpolationDegree":1,
"epoch":"2012-08-04T16:00:00Z",
"unitQuaternion":[some numbers, I am working on it]
},
"position":{
"interpolationAlgorithm":"LAGRANGE",
"interpolationDegree":1,
"epoch":"2012-08-04T16:00:00Z",
"cartographicDegrees":[time,long,lat,height,time,long,lat,height,time,long,lat,height]
}
}
]
Thanks

Answer 1

There's an oddity where ModelGraphics calls for a uri parameter, but the CzmlDataSource loader looks for this property by the name gltf in the CZML file. Not sure if this is/was intentional. In any case, if you use the right name, you can get the model to show up in a CZML file. My example below lacks the correct model orientation, but shows a model has loaded.
Try loading up Sandcastle and pasting the following into the code editor, then hit Run (F8).
var viewer = new Cesium.Viewer('cesiumContainer');
var builtInCzml = [{
"id" : "document",
"version" : "1.0",
"clock" : {
"interval" : "2012-08-04T16:00:00Z/2012-08-04T16:02:00Z",
"currentTime" : "2012-08-04T16:00:00Z",
"multiplier" : 1,
"range" : "LOOP_STOP",
"step" : "SYSTEM_CLOCK_MULTIPLIER"
}
}, {
"id" : "Vehicle",
"availability" : "2012-08-04T16:00:00Z/2012-08-04T16:02:00Z",
"model" : {
"show" : true,
"gltf" : "../../SampleData/models/CesiumGround/Cesium_Ground.bgltf"
},
"billboard" : {
"eyeOffset" : {
"cartesian" : [0.0, 0.0, 0.0]
},
"horizontalOrigin" : "CENTER",
"image" : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEISURBVEhLvVXBDYQwDOuojHKj8LhBbpTbpBCEkZsmIVTXq1RVQGrHiWlLmTTqPiZBlyLgy/KSZQ5JSHDQ/mCYCsC8106kDU0AdwRnvYZArWRcAl0dcYJq1hWCb3hBrumbDAVMwAC82WoRvgMnVMDBnB0nYZFTbE6BBvdUGqVqCbjBIk3PyFFR/NU7EKzru+qZsau3ryPwwCRLKYOzutZuCL6fUmWeJGzNzL/RxAMrUmASSCkkAayk2IxPlwhAAYGpsiHQjbLccfdOY5gKkCXAMi7SscAwbQpAnKyctWyUZ6z8ja3OGMepwD8asz+9FnSvbhU8uVOHFIwQsI3/p0CfhuqCSQuxLqsN6mu8SS+N42MAAAAASUVORK5CYII=",
"pixelOffset" : {
"cartesian2" : [0.0, 0.0]
},
"scale" : 0.8,
"show" : true,
"verticalOrigin" : "BOTTOM"
},
"label" : {
"fillColor" : {
"rgba" : [255, 255, 0, 255]
},
"font" : "bold 10pt Segoe UI Semibold",
"horizontalOrigin" : "LEFT",
"outlineColor" : {
"rgba" : [0, 0, 0, 255]
},
"pixelOffset" : {
"cartesian2" : [10.0, 0.0]
},
"scale" : 1.0,
"show" : true,
"style" : "FILL",
"text" : "Vehicle",
"verticalOrigin" : "CENTER"
},
"path" : {
"material" : {
"solidColor" : {
"color" : {
"rgba" : [255, 255, 0, 255]
}
}
},
"width" : 5.0,
"show" : true
},
"position" : {
"interpolationAlgorithm" : "LAGRANGE",
"interpolationDegree" : 1,
"epoch" : "2012-08-04T16:00:00Z",
"cartesian" : [0.0, 1254962.0093268978, -4732330.528380746, 4074172.505865612,
120.0, 1256995.7322857284, -4732095.2154790815, 4073821.2249589274]
}
}];
var czmlDataSource = new Cesium.CzmlDataSource();
czmlDataSource.load(builtInCzml, 'Sample CZML with 3D model');
viewer.dataSources.add(czmlDataSource);
viewer.trackedEntity = czmlDataSource.entities.getById('Vehicle');

Answer 2

I found the problem, I didn't give it the right place to find the model on my computer, when I was using my local host, I actually should give it the full address form my localhost or Cesium address, so I should enter it as
"gltf":"../../Apps/SampleData/models/CesiumMilkTruck/CesiumMilkTruck.bgltf",
rather than just give it the address of
"../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.bgltf",
so it works now, thanks everyone who helped!

Answer 3

FYI - If you are going the uri route, you must include https