1. A concise explanation of the problem you’re experiencing.
I am trying to build bounding boxes along my flight path in order to build a 3D corridor. I am not able to control the orientation of the boxes as my boxes should be centered around each path and orient according to the curves or altitude variations.
2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
var viewer = new Cesium.Viewer(‘cesiumContainer’);
//Use STK World Terrain
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
url : ‘https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles’,
requestVertexNormals : true
});
//Set the random number seed for consistent results.
Cesium.Math.setRandomNumberSeed(3);
var start = Cesium.JulianDate.fromDate(new Date());
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
var a = ;
var b = ;
function computeFlightPath(lon, lat, radius, index) {
var count = 0;
var pos = new Cesium.SampledPositionProperty();
for (var i = 0; i <= 270; i += 15) {
var radians = Cesium.Math.toRadians(i);
console.log(radians);
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);
pos.addSample(time, position);
if(index === 1){
a[count] = pos.getValue(time);
}
if(index === 2) {
b[count] = pos.getValue(time);
}
//Also create a point for each sample we generate.
if(index === 1) {
viewer.entities.add({
position : position,
point : {
pixelSize : 8,
color : Cesium.Color.TRANSPARENT,
outlineColor : Cesium.Color.YELLOW,
outlineWidth : 3
}
});
}
if(index === 2) {
viewer.entities.add({
position : position,
point : {
pixelSize : 8,
color : Cesium.Color.TRANSPARENT,
outlineColor : Cesium.Color.RED,
outlineWidth : 3
}
});
}
count++;
}
return pos;
}
function computeFinalFlightPath(d, a, b) {
console.log(a);
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i < a.length; i++) {
var radians = Cesium.Math.toRadians(i*15);
//console.log(radians);
var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
var position = Cesium.Cartesian3.fromElements(((a[i].x+b[i].x)/2), ((a[i].y+b[i].y)/2), ((a[i].z+b[i].z)/2));
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.CYAN,
outlineWidth : 3
}
});
viewer.entities.add({
position: position,
box : {
dimensions : new Cesium.Cartesian3(400.0, 300.0, 500.0),
fill : false,
outline : true,
outlineColor : Cesium.Color.BLUE
}
});
}
return property;
}
//Compute the position
var position = computeFlightPath(-83.60986232757568,41.653258658953995, 0.03, 1);
var position1 = computeFlightPath(-83.60986232757570,41.653258658953998, 0.033, 2);
var d = ;
for(i=0;i<a.length;i++){
d[i] = Cesium.Cartesian3.distance(a[i], b[i]);
}
//console.log(d);
//console.log(a);
//console.log(b);
var positionFinal = computeFinalFlightPath(d,a,b);
var entity = viewer.entities.add({
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),
path : {
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.1,
color : Cesium.Color.YELLOW
}),
width : 10
}
});
var entity1 = viewer.entities.add({
availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start : start,
stop : stop
})]),
//Use our computed positions
position : position1,
//Automatically compute orientation based on position movement.
orientation : new Cesium.VelocityOrientationProperty(position),
path : {
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.1,
color : Cesium.Color.RED
}),
width : 10
}
});
var entity2 = viewer.entities.add({
availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start : start,
stop : stop
})]),
//Use our computed positions
position : positionFinal,
//Automatically compute orientation based on position movement.
orientation : new Cesium.VelocityOrientationProperty(position),
path : {
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.1,
color : Cesium.Color.CYAN
}),
width : 10
}
});
viewer.zoomTo(viewer.entities);
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
I want to build a 3D shape corridor. However, I want to start building a bounding box around each point. Later, I would like to interpolate the geometry to form a 3D shaped corridor. Please help!
4. The Cesium version you’re using, your operating system and browser.
Cesium - 1.42, Windows 10, Mozilla Firefox
