如何在 Cesium Js 中创建一个单独的时钟并使用自定义控件对其进行控制

Question

我在一个模拟项目中工作，我需要在不同的实体上应用动画。项目要求是为 Play/Pause 动画创建自定义控件。实体使用插值路径在其上移动。如图所示example.

我想应用一个单独的时钟，而不是使用默认值 viewer.clock。因此我试图修改上面的例子。这是 link

我创建了一个单独的时钟：

var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(
  start,
  360,
  new Cesium.JulianDate()
);

//Make sure viewer is at the desired time.
var clock = new Cesium.Clock();
clock.startTime = start.clone();
clock.stopTime = stop.clone();
clock.currentTime = start.clone();
clock.clockRange = Cesium.ClockRange.LOOP_STOP;
clock.multiplier = 10;
clock.shouldAnimate = true;
var clockViewModel = new Cesium.ClockViewModel(clock);
var viewModel = new Cesium.AnimationViewModel(clockViewModel);

并试着这样称呼他们：

Sandcastle.addDefaultToolbarButton("Start", function () {
  viewModel.pauseViewModel.command();
});

Sandcastle.addDefaultToolbarButton("Stop", function () {
  viewModel.pauseViewModel.command();
});

但是动画没有开始。也没有任何例外。请指正。

Answer 1

为什么动画没有开始？

请注意，动画是使用 CesiumJS 中查看器的时钟执行的。
在您的代码查看器中，时钟与您的自定义时钟不同。
我的意思是观众时钟的年份是 2021 年，而您时钟的年份是 2015 年。
因此，您的实体 (Cesium_Air.glb) 的可用性将是错误的，最后，ModelVisualizer 会跳过实体的呈现。

解决方案
您应该将查看器的时钟与您的自定义时钟同步，以便您的实体的可用性变为真实。

这是一个Sandcastle link。这里有一个source code.

如何在 Cesium Js 中创建一个单独的时钟并使用自定义控件对其进行控制

How to Create a Separate Clock and control it with Custom control in Cesium Js

javascript

html5-canvas

cesium