three.jscesiumjsgltf

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


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:

model before manual rotation

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

model after manual rotation

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"}
}

Solution

  • 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;