Atlaslog / Field Notes / three.js rendering
Field note · three.js rendering
Imported glTF is thumbnail-sized or swallows the camera
Quick answer
Two glTF exports from different tools arrive at wildly different scales because the exporter ignored the metre unit, so one building is 1.87 m tall and another 187000 units. A parent scale that is already non-1 multiplies the error.
Symptom
- Bounding boxes read 0.62 x 1.87 x 0.55 for model A and 62000 x 187000 x 55000 for model B.
- With one camera setup, A is invisible and B fills the entire scene.
- The model disappears when its extent falls outside camera near/far.
Checklist
- Read the bounding box and compare it with the designed real-world size to get the ratio.
- Print gltf.scene.scale to check whether a parent transform already scales the model.
- Check camera near/far against the model extent.
- Frame the model with its bounding sphere before judging whether the size is wrong.
Fix
Wrap the scene in a Group and apply a fixed unitScale (0.01 for centimetres, 0.001 for millimetres), or normalize with fitToHeight using Box3 and setScalar, then reposition the camera from the bounding sphere radius.
Code
var box = new THREE.Box3().setFromObject(gltf.scene);
var size = box.getSize(new THREE.Vector3());
console.log('包围盒尺寸', size);
console.log('根节点缩放', gltf.scene.scale.toArray());
Watch out
- Setting gltf.scene.scale on top of an existing node scale multiplies both and produces a 100x error.
- Guessing 0.01 then 0.001 repeatedly instead of measuring one known dimension wastes time and still misses.
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Atlaslog (2026). Imported glTF is thumbnail-sized or swallows the camera. https://www.jingweizhi.com/en/cookbook/three-gltf-scale.html (accessed 2026-11-03).