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

1
votes

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"}
}
2
three.jscesiumgltf

2 Answers

0
votes

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;
0
votes

Just convert "gltfUpAxis" to "Z" would work fine. Or you can try "Y" too. 

"asset": {
    "gltfUpAxis": "Z",
    "version": "1.0"
  },