# Correcting rotation of imported Cesium GLTF/GLB file in Three.js

**URL:** <https://community.cesium.com/t/correcting-rotation-of-imported-cesium-gltf-glb-file-in-three-js/7030>\
**Category:** CesiumJS\
**Created:** [June 15, 2018, 6:38pm UTC](https://community.cesium.com/t/correcting-rotation-of-imported-cesium-gltf-glb-file-in-three-js/7030 "2018-06-15T18:38:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![randy.milbert](https://avatars.discourse-cdn.com/v4/letter/r/4af34b/32.png) [@randy.milbert](https://community.cesium.com/u/randy.milbert)\
**Post date:** [June 15, 2018, 6:38pm UTC](https://community.cesium.com/t/correcting-rotation-of-imported-cesium-gltf-glb-file-in-three-js/7030/1 "2018-06-15T18:38:28Z")

</div>

I have a Cesium 3D tile set of buildings in Boston. Here is a sample tile: [https://www.dropbox.com/s/cf9g1zi2wv7fhyb/model.glb?dl=1](https://www.dropbox.com/s/cf9g1zi2wv7fhyb/model.glb?dl=1). When I import this tile into Three.js using THREE.GLTFLoader, the model is rotated relative to the XZ plane. Through trial and error, I have found that I can straighten the model out by rotating it as follows:

model.rotation.x = -Math.PI / 4;  
model.rotation.z = Math.PI / 10;

I suspect this rotation is due to Cesiuim using Earth-fixed frame axes (ITRF) by default. How can I reverse this rotation automatically in Three.js (versus manually doing so via trial and error)?

Here is a screenshot of the model before I manually rotate it:

[![](https://i.stack.imgur.com/eFyJ1.png) ](https://i.stack.imgur.com/eFyJ1.png)

Here is a screenshot of the model after I manually rotate it:

[![](https://i.stack.imgur.com/VaYDt.png) ](https://i.stack.imgur.com/VaYDt.png)

Here is the geospatial information associated with the Cesium 3D tile:

{  
&nbsp;&nbsp;"boundingVolume":{"sphere":[1525116.05769,-4463608.36127,4278734.88048,28.30055]},  
&nbsp;&nbsp;"geometricError":0.09375,  
&nbsp;&nbsp;"content":{"url":"L12\_0000110010123.b3dm"}  
}

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [June 18, 2018, 8:14pm UTC](https://community.cesium.com/t/correcting-rotation-of-imported-cesium-gltf-glb-file-in-three-js/7030/2 "2018-06-18T20:14:39Z")

</div>

Hi Randy,

Cesium 3D Tiles have a different coordinate reference system than glTF. Take a look at the [Coordinate System section of the 3D Tiles Specification](https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/1.0/specification#gltf) for the details and the necessary transformations.

---

<div class="post-metadata">

**Author:** ![randy.milbert](https://avatars.discourse-cdn.com/v4/letter/r/4af34b/32.png) [@randy.milbert](https://community.cesium.com/u/randy.milbert)\
**Post date:** [June 19, 2018, 5:04pm UTC](https://community.cesium.com/t/correcting-rotation-of-imported-cesium-gltf-glb-file-in-three-js/7030/3 "2018-06-19T17:04:05Z")

</div>

Thanks for your help. Here is what I ended up doing:

// Get the tile's cartesian center.  
var cartesian = new Cesium.Cartesian3(1525116.05769, -4463608.36127, 4278734.88048);

// Get the tile's cartographic center.  
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);

// Rotate the model.  
model.rotation.x = -cartographic.latitude;  
model.rotation.z = cartographic.longitude + Math.PI / 2;

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [June 21, 2018, 1:47pm UTC](https://community.cesium.com/t/correcting-rotation-of-imported-cesium-gltf-glb-file-in-three-js/7030/4 "2018-06-21T13:47:58Z")

</div>

Thanks for the update, glad it’s solved!

---

<div class="post-metadata">

**Author:** ![11149](https://avatars.discourse-cdn.com/v4/letter/1/da6949/32.png) [@11149](https://community.cesium.com/u/11149)\
**Post date:** [September 17, 2018, 2:24pm UTC](https://community.cesium.com/t/correcting-rotation-of-imported-cesium-gltf-glb-file-in-three-js/7030/5 "2018-09-17T14:24:10Z")

</div>

thanks for your topic,I meet the same problem.  
double p = fun.XYZtoBL(rtc\_center.X, rtc\_center.Y, rtc\_center.Z);

//count the rotation way in your value

double angleX = -p[1] / 180 \* Math.PI;

double angleZ = p[0] / 180 \* Math.PI +Math.PI / 2;

Vector3 t = new Vector3(v1, v2, v3);

//rotation the coordinate

Matrix4 m4 = Matrix4.RotateFromEuler(angleX, 0, angleZ);

Vector3 t2 = m4 \* t;

//translate the corrdinate by the cesium\_rtc

t2.X += rtc\_center.X;

t2.Y += rtc\_center.Y;

t2.Z += rtc\_center.Z;

//the ans geted not in the correct location

double ans = fun.XYZtoBL(t2.X, t2.Y, t2.Z);

there is the screenshot,the lable whit number shoud on the terrain if the answer is correct.my coordinate location is in china,is there some change should be apply to the rotation value?

thank you for tour replay!

 ![screenshot.jpg](https://global.discourse-cdn.com/cesium/original/2X/f/ff0c8f328d1178260a3ffe41d5066ffedf36924f.jpeg)

在 2018年6月20日星期三 UTC+8上午1:04:06，randy…@primitive.us写道：

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [September 18, 2018, 2:04pm UTC](https://community.cesium.com/t/correcting-rotation-of-imported-cesium-gltf-glb-file-in-three-js/7030/6 "2018-09-18T14:04:06Z")

</div>

This might be a slightly different problem. It’s also a bit hard to tell what the issue is without a bit more context.

Can you open a new topic with a bit more context and perhaps a running [Sandcastle example](https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/) of your code?
