Cesium JS API

QuaternionSpline

QuaternionSpline 是 Cesium 中用于拟合和插值四元数序列的类。其主要用于处理转换、缩放和旋转等动画效果。

构造函数

创建一个新的 QuaternionSpline 对象，需要传入一个包含四元数的数组，以及一个可选的整数参数 degree，表示样条曲线的阶数，默认为 3。

const quaternionArray = [
  new Cesium.Quaternion(0.0, 0.0, 0.0, 1.0),
  new Cesium.Quaternion(0.0, 0.707106781, 0.0, 0.707106781),
  new Cesium.Quaternion(0.0, 1.0, 0.0, 0.0)
];
const degree = 3;

const spline = new Cesium.QuaternionSpline(quaternionArray, degree);

方法

根据指定的时间戳从四元数序列中插值出一个新的四元数，并返回结果。

time：时间戳，单位为秒。
result：可选的输出结果对象。

const time = 10.0;
const result = new Cesium.Quaternion();

spline.evaluate(time, result);

克隆当前 QuaternionSpline 对象，并返回结果。

result：可选的输出结果对象。

const clonedSpline = spline.clone();

查找指定时间戳所处的四元数片段的索引区间，并返回结果。

time：时间戳，单位为秒。
startIndexHint：可选的起始索引位置。

const time = 10.0;
const startIndexHint = 5;

const interval = spline.findTimeInterval(time, startIndexHint);

销毁当前 QuaternionSpline 对象，释放内存。

spline.destroy();

示例

下面是一个完整的使用 QuaternionSpline 的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cesium</title>
  <style>
    #cesiumContainer {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>

  const viewer = new Cesium.Viewer("cesiumContainer");

  const quaternionArr = [
      new Cesium.Quaternion(0.0, 0.0, 0.0, 1.0),
      new Cesium.Quaternion(0.0, 0.707106781, 0.0, 0.707106781),
      new Cesium.Quaternion(0.0, 1.0, 0.0, 0.0)
  ];

  const quaternion_spline = new Cesium.QuaternionSpline(quaternionArr);

  viewer.clock.onTick.addEventListener((clock)=> {
    const quaternion = new Cesium.Quaternion();
    quaternion_spline.evaluate(clock.currentTime.secondsOfDay, quaternion);
    const rotationMatrix = Cesium.Matrix3.fromQuaternion(quaternion);
    const transform = Cesium.Matrix4.fromRotationTranslation(rotationMatrix, new Cesium.Cartesian3(0, 0, 0));
    viewer.camera.setView({
      destination: new Cesium.Cartesian3(0, -7000000, 0),
      orientation: transform,
    });
  });

</script>
</body>
</html>

该示例代码在地球上绕 Y 轴轨迹做的数据驱动动画，并将相机朝下看向地球，你可以根据需要修改轨迹或者相机视角。

QuaternionSpline

构造函数

方法

evaluate(time, result)

clone(result)

findTimeInterval(time, startIndexHint)

destroy()

示例