How to move 3d model object smooth

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

Hello, can anyone help me?
I load 3d model and want make it fly from position 1 to position 2 in x second.

This is my code:

    var viewer = this.global.map.viewer

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

//Make sure viewer is at the desired time.
    viewer.clock.startTime = start.clone();
    viewer.clock.stopTime = stop.clone();
    viewer.clock.currentTime = start.clone();
    //viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
    viewer.clock.multiplier = 10;

    let lat = 36.0994841
    let lng = -112.110693
    var property = new Cesium.SampledPositionProperty()
    let p1 = Cesium.Cartesian3.fromDegrees(lng, lat, 0)
    let time1 = Cesium.JulianDate.addSeconds(start, 0, new Cesium.JulianDate())
    property.addSample(time1, p1)

    let p2 = Cesium.Cartesian3.fromDegrees(lng + 0.001, lat, 0)
    let time2 = Cesium.JulianDate.addSeconds(start, 50, new Cesium.JulianDate())
    property.addSample(time2, p2)

    var entity = viewer.entities.add({
      // Set the entity availability to the same interval as the simulation time.
      availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
         start : start,
         stop: stop,
       })]),

      //Use our computed positions
      position : property,

      //Automatically compute orientation based on position movement.
      orientation : new Cesium.VelocityOrientationProperty(property),

      //Load the Cesium plane model to represent the entity
      model : {
        uri : '/Cesium_Air.glb',
        minimumPixelSize : 128,
        maximumScale : 20000
      },

      //Show the path as a yellow line sampled in 1 second increments.
      // path : {
      // resolution : 1,
      // material : new Cesium.PolylineGlowMaterialProperty({
      // glowPower : 0.1,
      // color : Cesium.Color.YELLOW
      // }),
      // width : 10
      // }
    });

    viewer.trackedEntity = undefined;
    viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)));
    setInterval(function(){
      entity.position = p2
    }, 5000);

Model will fly so smooth in to p2 and disappear but I want it pause and stay there (ex: wait to next move with listen event...)
So i use setInterval and set p2 to position. But now model fly smooth and "stop" in p2 not smooth.
Can anyone suggest me another solution without setInterval and model not disappear?
Thank you and sorry about my bad english.

OS: MacOS 10.12
Browser: Firefox 56
Cesium: 1.36

2

Hi there,

I think you can remove your setInterval entirely.

When you specify your model’s avaibality,

availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start : start,
stop: stop,
})]),

just leave out the stop option, so it won’t disappear.

availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start : start
})]),

Here’s the documentation for TimeInterval.

Thanks!

Gabby

3

Thank you for helping.
I tryed leave out the stop option and model not display, no fly.
This is code online: https://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=2365ea5fa95502fa701f7862a0c68287
I don't know why, please help me fix in this code online.

4

Hi,

I just put the stop value back in options for availability and used Cesium.ClockRange.CLAMPED instead of Cesium.ClockRange.LOOP_STOP.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var lat = 36.0994841;

var lng = -112.110693;

var p3 = Cesium.Cartesian3.fromDegrees(lng, lat, 5000);

viewer.camera.flyTo({

destination: p3

});

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

var stop = Cesium.JulianDate.addSeconds(start, 200, new Cesium.JulianDate());

//Make sure viewer is at the desired time.

viewer.clock.startTime = start.clone();

viewer.clock.stopTime = stop.clone();

viewer.clock.currentTime = start.clone();

viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; //Loop at the end

viewer.clock.multiplier = 10;

var property = new Cesium.SampledPositionProperty();

var p1 = Cesium.Cartesian3.fromDegrees(lng, lat, 0);

var time1 = Cesium.JulianDate.addSeconds(start, 0, new Cesium.JulianDate());

property.addSample(time1, p1);

var p2 = Cesium.Cartesian3.fromDegrees(lng + 0.1, lat, 0);

var time2 = Cesium.JulianDate.addSeconds(start, 500, new Cesium.JulianDate());

property.addSample(time2, p2);

var entity = viewer.entities.add({

//Set the entity availability to the same interval as the simulation time.

availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({

start : start,

stop: stop

})]),

//Use our computed positions

position : property,

//Automatically compute orientation based on position movement.

orientation : new Cesium.VelocityOrientationProperty(property),

//Load the Cesium plane model to represent the entity

model : {

uri : '../../SampleData/models/CesiumAir/Cesium_Air.glb',

minimumPixelSize : 128,

maximumScale : 200000

},

});

viewer.trackedEntity = undefined;

// viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)));

Thanks!

Gabby

5

@Gabby Getz: Omg, perfect. Thank you for your supporting. It's so good. Thank you :slight_smile: