I have a Cesium 3D tile set of buildings in Boston. Here is a sample tile: model.glb. 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:
Here is a screenshot of the model after I manually rotate it:
Here is the geospatial information associated with the Cesium 3D tile:
{
"boundingVolume":{"sphere":[1525116.05769,-4463608.36127,4278734.88048,28.30055]},
"geometricError":0.09375,
"content":{"url":"L12_0000110010123.b3dm"}
}
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;