how to rotate cylinder in cesium

CesiumJS
1

hi there,

i am creating a cylinder but the rotation is not working could u please help me

var greenCylinder = viewer.entities.add({

name : ‘Green cylinder with black outline’,

position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),

cylinder : {

length : 400000.0,

topRadius : 200000.0,

bottomRadius : 200000.0,

rotation: Cesium.Math.toRadians(90),

material : Cesium.Color.GREEN.withAlpha(0.5),

outline : true,

outlineColor : Cesium.Color.DARK_GREEN

}

});

2

Hi!

I don’t think you can specify a “rotation” attribute to the cylinder since that isn’t specified in the API. You would have to specify an orientation attribute to the entity. Check out this related forum question for a code example. I copy-pasted the code that would be relevant. I changed a line about HeadingPitchRoll to conform to our most recent API.

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

var position = Cesium.Cartesian3.fromDegrees(-75, 40);

//Original, non-rotated cone for comparison.
viewer.entities.add(new Cesium.Entity({
position: position,
point: {
color: Cesium.Color.YELLOW,
show: true,
pixelSize: 20
},
cylinder: {
topRadius: 0,
bottomRadius: 5,
length: 20,
material: Cesium.Color.YELLOW.withAlpha(0.5)
}
}));

//Create a rotation
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0.0),
Cesium.Math.toRadians(0.0),
Cesium.Math.toRadians(90.0)));

//Since the rotate is in the center, we need to offset it
//by the length in the north direction.
var offset = new Cesium.Cartesian3(0, 10, 0);

//Create a transform for the offset.
var enuTransform = Cesium.Transforms.eastNorthUpToFixedFrame(position);

//Transform the offset
Cesium.Matrix4.multiplyByPointAsVector(enuTransform, offset, offset);

//Add the offset to the original position to get the final value.
Cesium.Cartesian3.add(position, offset, position);

viewer.entities.add(new Cesium.Entity({
position: position,
orientation: orientation,
point: {
color: Cesium.Color.YELLOW,
show: true,
pixelSize: 20
},
cylinder: {
topRadius: 0,
bottomRadius: 5,
length: 20,
material: Cesium.Color.YELLOW.withAlpha(0.5)
}
}));

viewer.zoomTo(viewer.entities);

``

Hope this helps!