原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=CZML%20Model%20Articulations.html&label=All

效果如下：

  1. 加载 GLB 格式的火箭模型，放大并固定位置。
  2. 通过 articulations 定义三个整流罩动作（打开、分离、掉落），基于时间轴插值驱动动画。
  3. 镜头自动跟踪模型，时钟以 60 倍速播放 10 分钟动画，播放完毕后停止。

示例代码如下：

本文定义的CZML数据的语法请参考：

  1. https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Structure
  2. https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/Packet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

const czml = [
  {
    id: "document",
    name: "CZML Model",
    version: "1.0",
    clock: {
      //时间范围是10分钟
      interval: "2019-06-01T16:00:00Z/2019-06-01T16:10:00Z",
      currentTime: "2019-06-01T16:00:00Z",//起始时间
      multiplier: 60,//时间加速倍数（现实1秒=场景60秒）
      range: "LOOP_STOP", // 播放到终点后停止
      step: "SYSTEM_CLOCK_MULTIPLIER", // 时间步进与系统时钟同步
    },
  },
  {
    id: "test model",
    name: "Cesium Air",
    position: {
      cartographicDegrees: [-77, 37, 10000],//模型位置，经纬度和高度
    },
    model: {
      gltf: "https://cesium.com/public/SandcastleSampleData/launchvehicle.glb",
      scale: 2.0,// 放大2倍
      minimumPixelSize: 128,// 最小可见像素尺寸
      runAnimations: false,// 禁用模型自带动画
      articulations: { // 自定义关节动画
        "Fairing Open": { // 整流罩打开动作
          epoch: "2019-06-01T16:00:00Z",
          // 时间-值对：[0秒时值0, 600秒时值120]，这里的值可能表示位移量
          number: [0, 0, 600, 120],
        },
        "Fairing Separate": { // 整流罩分离动作
          epoch: "2019-06-01T16:00:00Z",
          number: [0, 0, 400, -50],
        },
        "Fairing Drop": {// 整流罩掉落动作
          epoch: "2019-06-01T16:00:00Z",
          interpolationAlgorithm: "LAGRANGE",//插值算法
          interpolationDegree: 2,//插值阶数
          number: [0, 0, 80, 0, 100, 0, 120, -1, 600, -120],
        },
      },
    },
  },
];

const dataSourcePromise = viewer.dataSources.add(
  Cesium.CzmlDataSource.load(czml)
);

dataSourcePromise
  .then(function (dataSource) {
    viewer.trackedEntity = dataSource.entities.getById("test model");
  })
  .catch(function (error) {
    console.error(error);
  });