修正Three.js中导入的Cesium GLTF / GLB文件的旋转

时间:2018-06-15 14:41:01

标签: three.js cesium gltf

我在波士顿有一套Cesium 3D瓷砖。这是一个示例图块:model.glb。当我使用THREE.GLTFLoader将此图块导入Three.js时,模型相对于XZ平面旋转。通过反复试验,我发现我可以按照以下方式将模型拉直:

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

我怀疑这种旋转是由于Cesiuim默认使用地球固定的框架轴(ITRF)。如何在Three.js中自动反转此旋转(而不是通过反复试验手动执行此操作)?

以下是我手动旋转模型前的模型截图:

model before manual rotation

以下是我手动旋转模型后的模型截图:

model after manual rotation

以下是与Cesium 3D图块关联的地理空间信息:

{
  "boundingVolume":{"sphere":[1525116.05769,-4463608.36127,4278734.88048,28.30055]},
  "geometricError":0.09375,
  "content":{"url":"L12_0000110010123.b3dm"}
}

2 个答案:

答案 0 :(得分:0)

这就是我最终要做的事情:

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

答案 1 :(得分:0)

只需将“ gltfUpAxis”转换为“ Z”即可正常工作。或者,您也可以尝试“ Y”。

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