Cesium支持GLTF动画研究

发表于 | 评论数： | 阅读次数：

Cesium在很早之前就支持GLTF模型动画，例如：

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
var czml = [
  {
    id: "document",
    name: "CZML Model",
    version: "1.0",
  },
  {
    id: "aircraft model",
    name: "Cesium Air",
    position: {
      cartographicDegrees: [-77, 37, 10000],
    },
    model: {
      gltf: "../SampleData/models/CesiumAir/Cesium_Air.glb",
      scale: 2.0,
      minimumPixelSize: 128,
    },
  },
];

var viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

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

这种方法存在一定局限性，只能支持全局动画，不能控制动画的起止。但最近版本中，Cesium进行了一定改进，可以支持在一定程度上控制GLTF动画了。示例代码如下：

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
var czml = [
  {
    id: "document",
    name: "CZML Model",
    version: "1.0",
    clock: {
      interval: "2019-06-01T16:00:00Z/2019-06-01T16:10:00Z",
      currentTime: "2019-06-01T16:00:00Z",
      multiplier: 60,
      range: "LOOP_STOP",
      step: "SYSTEM_CLOCK_MULTIPLIER",
    },
  },
  {
    id: "test model",
    name: "Cesium Air",
    position: {
      cartographicDegrees: [-77, 37, 10000],
    },
    model: {
      gltf: "https://assets.agi.com/models/launchvehicle.glb",
      scale: 2.0,
      minimumPixelSize: 128,
      runAnimations: false,
      articulations: {
        "Fairing Open": {
          epoch: "2019-06-01T16:00:00Z",
          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],
        },
      },
    },
  },
];

var viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

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

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

这段示例代码的原理还有待分析，我将launchvehicle.glb导入blender 2.90中，但并没有看到上述代码中的三段动画。按照链接Model Articulations “Number” variable的说法，这三段动画是通过GLTF扩展实现。

参考链接

  1. Model Articulations “Number” variable,by cesium.
  2. glTF 2.0 Quick Reference Guide ,by KhronosGroup.
  3. glTF,by KhronosGroup.
  4. Cesium Model Articulations,by cesium.