Atlaslog
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.

Last verified 2026-11-03 · Multiple versions · Cite this page
Applies to: three.js r169
Symptom
Checklist
  1. Compute the bounding box with Box3.setFromObject and compare axis sizes, since the tallest axis is the height.
  2. Confirm the source convention: GIS ENU is Z-up with X east and Y north, while glTF is Y-up.
  3. Check whether the code rotates the model itself instead of a wrapper group.
  4. Check whether longitude and latitude are being used directly as x and y.
  5. 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
All 120 field notesChinese originalRunnable examples
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Cite this page

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).