Hi there. My ultimate goal is to do the following. I have an entity that uses a Model (a 3D arrow that I created) and uses a SampledPositionProperty with two sample locations added (Start and Finish). What I want to happen is have the arrow move from the start position to the End Position. This seems easy enough but the problem is the alignment of the arrow head. I would like it to start off where the arrow tail is aligned to the start point and end when the arrow head is aligned to the end point like this:
-->-->-->-->-->
S E
However, I can't change the alignment in mid-movement so, depending on which model I use and which end I set to the "center" of the plane, I end up with something like this:
-->-->-->-->-->
S E
or:
-->-->-->-->-->
S E
I tried a convoluded attempt to start the arrow under the earth and align the point to the head. That way, it wouldn't matter that the tail of the arrow started away from the start point because it would be underground. However, because I use interpolation, it did weird things like making the arrow do loop-de-loops. I gave up on that approach.
So, my second approach is to have an animation that moves the arrow from its tail being aligned to the center backwards to its head being aligned to center. That way, I can use the readyPromise and the addAll method to add the animations set to a very slow speed. I have determined the speed as 1sec/totalTime because the animation was set to take 1 sec. Because my data may cover years, I may end up with a very small value, like 0.0000056 for the speedup value. This works fine when the entity is at a fixed position.
The idea is that the arrow starts with the tail aligned to the start point, but over the course of going across the globe, the very slow animation is slowly moving it backwards so that by the time it gets to the end point, the tip of the arrow is aligned to the end point.
However, when I combine it with a SampledPositionProperty with the animation, it seems to ignore everything I put in the options of "addAll". and instead repeats the rotation over and over as it moves across the globe, making the arrow look like it is jittery on too much caffiene!.
Because it would be hard to share my arrow (glad to if you tell me how), I have made a sandcastle example using the built in cesium man. The code below should basically showing his step (and arm movement) SUPER slow and stop animating after it does one animation. Instead, the animation is at 1x speed and it repeats over and over (not using the options in addAll). I am really hoping that there is a workaround for this!
------Sandcastle example ------
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProviderViewModels : , //Disable terrain changing
infoBox : false, //Disable InfoBox widget
selectionIndicator : false //Disable selection indicator
});
//Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;
//Use STK World Terrain
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
url : ‘https://assets.agi.com/stk-terrain/world’,
requestWaterMask : true,
requestVertexNormals : true
});
//Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;
//Set the random number seed for consistent results.
Cesium.Math.setRandomNumberSeed(3);
//Set bounds of our simulation time
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.
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;
//Set timeline to simulation bounds
viewer.timeline.zoomTo(start, stop);
//Generate a random circular pattern with varying heights.
function computeCirclularFlight(lon, lat, radius) {
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i <= 360; i += 45) {
var radians = Cesium.Math.toRadians(i);
var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
var position = Cesium.Cartesian3.fromDegrees(lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)), Cesium.Math.nextRandomNumber() * 500 + 1750);
property.addSample(time, position);
//Also create a point for each sample we generate.
viewer.entities.add({
position : position,
point : {
pixelSize : 8,
color : Cesium.Color.TRANSPARENT,
outlineColor : Cesium.Color.YELLOW,
outlineWidth : 3
}
});
}
return property;
}
//Compute the entity position property.
var position = computeCirclularFlight(-112.110693, 36.0994841, 0.03);
//Actually create the entity
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 : position,
//Automatically compute orientation based on position movement.
orientation : new Cesium.VelocityOrientationProperty(position),
//Load the Cesium plane model to represent the entity
model : {
// uri : '../../../3dModels/curvedArrowRed_moveFromeBackAlignToFront_Quanized.glb',
uri: '../../SampleData/models/CesiumMan/Cesium_Man.glb',
minimumPixelSize : 64
},
//Show the path as a pink line sampled in 1 second increments.
path : {
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.1,
color : Cesium.Color.YELLOW
}),
width : 10
}
});
//Add button to view the path from the top down
Sandcastle.addDefaultToolbarButton('View Top Down', function() {
viewer.trackedEntity = undefined;
viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)));
});
//Add button to view the path from the side
Sandcastle.addToolbarButton('View Side', function() {
viewer.trackedEntity = undefined;
viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(Cesium.Math.toRadians(-90), Cesium.Math.toRadians(-15), 7500));
});
//Add button to track the entity as it moves
Sandcastle.addToolbarButton('View Aircraft', function() {
viewer.trackedEntity = entity;
});
//Add a combo box for selecting each interpolation mode.
Sandcastle.addToolbarMenu([{
text : 'Interpolation: Linear Approximation',
onselect : function() {
entity.position.setInterpolationOptions({
interpolationDegree : 1,
interpolationAlgorithm : Cesium.LinearApproximation
});
}
}, {
text : 'Interpolation: Lagrange Polynomial Approximation',
onselect : function() {
entity.position.setInterpolationOptions({
interpolationDegree : 5,
interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
});
}
}, {
text : 'Interpolation: Hermite Polynomial Approximation',
onselect : function() {
entity.position.setInterpolationOptions({
interpolationDegree : 2,
interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});
}
}], 'interpolationMenu');
var animFunc = function(){
console.log("YOOHOO2b!");
var ds = viewer.dataSourceDisplay.defaultDataSource;
var modelVis=null;
console.log("YOOHOO2c!");
if (ds._visualizers != null){
console.log("YOOHOO2d!");
for (var i=0;i<ds._visualizers.length;i++){
var vis = ds._visualizers[i];
if (vis instanceof Cesium.ModelVisualizer){
console.log("YOOHOO2f!");
modelVis=vis;
}
}
}
if (modelVis != null && modelVis._modelHash != null){
console.log("YOOHOO2g!");
var visForThisModel=modelVis._modelHash[entity.id];
if (visForThisModel != null && visForThisModel.modelPrimitive != null){
console.log("YOOHOO2h!");
Cesium.when(visForThisModel.modelPrimitive.readyPromise).
then(function(prim) {
console.log("YOOHOO2!");
prim.activeAnimations.removeAll();
prim.activeAnimations.addAll({
loop : Cesium.ModelAnimationLoop.NONE ,
speedup : 0.0015
});
});
}
}
};
setTimeout(function() {
console.log("YOOHOO2a!");
animFunc();
}, 500);