CZML Model-Node Transformations【译】

原文链接及内容

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

实现效果如下：

1. 加载 Cesium_Man.glb 模型，禁用其自带动画。
2. 通过 nodeTransformations 定义左臂关节的时间序列旋转动画，右臂保持固定姿态。
3. 镜头以局部坐标偏移 [4.3, 0.1, 2.6] 观察模型，并以 20 倍速播放动画。

示例代码如下：

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

1. https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Structure
2. https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/Packet

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

const czml = [
  {
    id: "document",
    name: "CZML Model",
    version: "1.0",
    clock: {
      //时间范围是20秒
      interval: "2015-01-01T12:00:00Z/2015-01-01T12:00:20Z",
      //初始时间
      currentTime: "2015-01-01T12:00:00Z",
      //时间加速倍数，这里是1秒=场景当中的20秒
      multiplier: 20,
    },
  },
  {
    id: "model",
    position: {
      cartographicDegrees: [-77, 37, 100000],//经纬度和高度
    },
    /**
     * viewFrom: 定义模型相对于相机的观察视角偏移（局部坐标系）
     */
    viewFrom: {
      cartesian: [4.3, 0.1, 2.6],//观察视角的局部坐标偏移
    },
    model: {
      gltf: "../SampleData/models/CesiumMan/Cesium_Man.glb",
      runAnimations: false,// 禁用模型自带动画
      // 
      /**
       * nodeTransformations: 获取或设置要应用于此模型的节点转换集。
       * 其中键是节点的名称，如下：Skeleton_arm_joint_L__3_和Skeleton_arm_joint_R__2_
       * 值是描述要应用于该节点的转换的 TranslationRotationScale 属性。
       * 这里用来设置节点进行旋转,自定义骨骼节点变换
       */
      nodeTransformations: {
        Skeleton_arm_joint_L__3_: { // 左臂关节
          rotation: {
            epoch: "2015-01-01T12:00:00Z",//epoch是纪元/时期的意思,这里是时间起点
            unitQuaternion: [//定义时间序列动画，在 0 秒、10 秒、20 秒分别设置不同的四元数，Cesium 会自动插值过渡。
              0, -0.23381920887303329, -0.6909886782144156, -0.0938384854833712,0.6775378681547408, 
              10, -0.4924076887347565, -0.6304934596091216,0.20657864059632378, 0.563327551886459, 
              20, -0.23381920887303329, -0.6909886782144156, -0.0938384854833712, 0.6775378681547408,
            ],
          },
        },
        Skeleton_arm_joint_R__2_: {// 右臂关节
          rotation: {
            unitQuaternion: [// 静态四元数（无时间序列）
              -0.2840422631464792, -0.40211904424847345,0.25175867757399086, 0.7063888981321548,
            ],
          },
        },
      },
    },
  },
];

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

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