flies along a set of selected path points

CesiumJS
1

Hello, I want to use Cesium to implement a 3D globe where a model flies along a set of selected path points. How can I achieve this?

2

Hi @HelloKitty_Yards
I hope this code can help you.

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

var start = Cesium.JulianDate.fromDate(new Date(2025, 3, 2, 12));
var stop = Cesium.JulianDate.addSeconds(start, 300, new Cesium.JulianDate());

viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 1;

var position = new Cesium.SampledPositionProperty();

var pathPoints = [
  { time: 0, position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 1000) },
  { time: 60, position: Cesium.Cartesian3.fromDegrees(-80.50, 35.14, 5000) },
  { time: 120, position: Cesium.Cartesian3.fromDegrees(-85.12, 30.12, 10000) },
  { time: 180, position: Cesium.Cartesian3.fromDegrees(-90.50, 25.32, 15000) },
  { time: 240, position: Cesium.Cartesian3.fromDegrees(-95.00, 20.00, 20000) },
  { time: 300, position: Cesium.Cartesian3.fromDegrees(-100.00, 15.00, 25000) },
];

pathPoints.forEach(function (point) {
  var time = Cesium.JulianDate.addSeconds(start, point.time, new Cesium.JulianDate());
  position.addSample(time, point.position);
});

var entity = viewer.entities.add({
  availability: new Cesium.TimeIntervalCollection([
    new Cesium.TimeInterval({ start: start, stop: stop }),
  ]),
  position: position,
  orientation: new Cesium.VelocityOrientationProperty(position),
  model: {
    uri: "../SampleData/models/CesiumAir/Cesium_Air.glb", 
    minimumPixelSize: 64,
  },
  path: {
    resolution: 1,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.1,
      color: Cesium.Color.YELLOW,
    }),
    width: 10,
  },
});

viewer.trackedEntity = entity;

Sandcastle here:

1 Like