Chapter 826: Loading a .GLTF File (Manual)

Core Idea

Loading a glTF file is much simpler than an .OBJ file — materials and scene hierarchy come built into the format — but real assets can still need fixes for animation origins and camera framing, illustrated with a low-poly city model with driveable cars.

Key Concepts

• glTF vs. OBJ: glTF was designed as a runtime delivery format with materials, textures and a real scene graph included, unlike OBJ which is a single flat mesh with no built-in materials.
• GLTFLoader: loads a .gltf/.glb file and yields a gltf.scene ready to add directly to the scene.
• Dumping the scene graph: walking and logging the loaded hierarchy is a practical way to discover named sub-objects (e.g. a "Cars" group) you might want to animate individually.
• Origin/pivot problems: an asset not authored with animation in mind may rotate around the wrong point; a common fix is parenting the object to a new empty Object3D and adjusting the original object's local offset so the wrapper's transform behaves correctly.
• CatmullRomCurve3 for paths: fits a smooth curve through a set of control points; adding extra points 10%/90% of the way between original points sharpens corners that would otherwise be rounded off.

Code Examples

const points = curve.getPoints(250);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const curveObject = new THREE.Line(geometry, material);
scene.add(curveObject);

• What it demonstrates: sampling a CatmullRomCurve3 into points and visualizing it as a Line, useful for previewing a path before driving objects along it.

Key Takeaways

1. glTF is generally far less work to load and display correctly than OBJ, since materials and hierarchy are part of the format.
2. Logging/dumping a loaded scene's graph is a quick way to find named groups you can target for custom animation.
3. If an object rotates or moves around the wrong point, parent it to a fresh Object3D and offset the original locally rather than fighting its baked-in origin.
4. CatmullRomCurve3 smooths through control points by default; inject extra near-corner points if you need sharper turns in a generated path.

Connects To

• GLTFLoader: the loader this whole lesson is built around.
• OBJLoader: the earlier, more manual-material-setup loading approach this lesson contrasts with.