# how to rotate cylinder in cesium

**URL:** <https://community.cesium.com/t/how-to-rotate-cylinder-in-cesium/7204>\
**Category:** CesiumJS\
**Created:** [July 23, 2018, 10:21am UTC](https://community.cesium.com/t/how-to-rotate-cylinder-in-cesium/7204 "2018-07-23T10:21:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![arun\_kumar](https://avatars.discourse-cdn.com/v4/letter/a/258eb7/32.png) [@arun\_kumar](https://community.cesium.com/u/arun_kumar)\
**Post date:** [July 23, 2018, 10:21am UTC](https://community.cesium.com/t/how-to-rotate-cylinder-in-cesium/7204/1 "2018-07-23T10:21:21Z")

</div>

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

}

});

---

<div class="post-metadata">

**Author:** ![Jane\_Xu](https://avatars.discourse-cdn.com/v4/letter/j/a87d85/32.png) [@Jane\_Xu](https://community.cesium.com/u/Jane_Xu)\
**Post date:** [July 23, 2018, 3:46pm UTC](https://community.cesium.com/t/how-to-rotate-cylinder-in-cesium/7204/2 "2018-07-23T15:46:23Z")

</div>

Hi!

I don’t think you can specify a “rotation” attribute to the cylinder since that isn’t specified in the [API](https://cesiumjs.org/Cesium/Build/Documentation/CylinderGraphics.html). You would have to specify an orientation attribute to the entity. Check out this related [forum question](https://groups.google.com/forum/#!topic/cesium-dev/f9ZiSWPMgus) 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!