using 3D models in CZML file to move an object

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

Can you update the question to include how you're defining the model in CZML? — Matthew Amato, Sep 17 '15 at 00:23

score 1 · Answer 1 · answered Sep 17 '15 at 14:01

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');

Thank you, I think the problem is that I have a .czml file and I want to load that file in my java Script code, but the gltf can not be loaded, for 2 dimensional pictures, I could easily convert the picture to uri and used their uri but when I give it the address in "gltf" in czml file and try to load with command like: `viewer.dataSources.add(Cesium.CzmlDataSource.load('../../SampleData/mycode.czml'));` those models cannot be loaded — azar, Sep 17 '15 at 15:38

score 0 · Accepted Answer · answered Sep 17 '15 at 15:58

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!

score -1 · Answer 3 · answered Dec 06 '18 at 19:59

-1

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

answered Dec 06 '18 at 19:59

user3399643

9
1
5

using 3D models in CZML file to move an object

3 Answers3