Atlaslog / Field Notes / three.js rendering
Field note · three.js rendering
Model lies on its side and does not match map orientation
Quick answer
Models built Z-up, the GIS and CAD convention, arrive lying flat because three.js and glTF are Y-up, so rotation.y then turns the wrong axis. Longitude and latitude used directly as x and y also place the model outside the scene.
Symptom
- The model appears flat on the ground after import.
- rotation.y no longer rotates the model around its vertical axis.
- The bounding box measures 12.4 by 3.1 by 18.6, showing the height sits on Z.
Checklist
- Compute the bounding box with Box3.setFromObject and compare axis sizes, since the tallest axis is the height.
- Confirm the source convention: GIS ENU is Z-up with X east and Y north, while glTF is Y-up.
- Check whether the code rotates the model itself instead of a wrapper group.
- Check whether longitude and latitude are being used directly as x and y.
- Check scale, because three.js units have no physical meaning unless the project defines them.
Fix
Wrap the model in a THREE.Group and set wrapper.rotation.x to -Math.PI/2 for Z-up to Y-up, apply heading on wrapper.rotation.y, and project coordinates onto a local metre plane using 111320 times cos(lat) metres per degree longitude and 110574 metres per degree latitude before setting position.
Code
var box = new THREE.Box3().setFromObject(model);
var size = box.getSize(new THREE.Vector3());
console.log('尺寸', size.x, size.y, size.z);
var wrapper = new THREE.Group();
wrapper.add(model);
wrapper.rotation.x = -Math.PI / 2; // Z-up 转 Y-up
wrapper.position.set(x, 0, z);
scene.add(wrapper);
Watch out
- Rotating each asset's own geometry, after which later code can no longer work in the model's local axes.
- Converting half the models and leaving half untouched, producing a scene where some stand and some lie flat.
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Atlaslog (2026). Model lies on its side and does not match map orientation. https://www.jingweizhi.com/en/cookbook/three-y-up-vs-map.html (accessed 2026-11-03).