011. The GLTF Format
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
GLTF (GL Transmission Format) is the JPEG of 3D. It is highly optimized for web delivery. It comes in two flavors: .gltf (JSON, usually accompanied by a .bin file and separate textures) and .glb (a single binary file containing everything). Always use .glb if possible.
022. Loading Models
In vanilla Three.js, you use GLTFLoader. Because loading takes time, it uses a callback function. In React Three Fiber, you use useGLTF() from @react-three/drei. R3F uses React Suspense to pause rendering until the model is ready.
033. Modifying Loaded Models
When you load a model, you get a THREE.Group that might contain hundreds of nested meshes. To find a specific mesh (to change its material or animate it), you use gltf.scene.traverse(), which recursively loops through every child.
?Frequently Asked Questions
My model loaded but it's completely black!
Your model probably uses MeshStandardMaterial but you haven't added any lights to your scene. Add an `<ambientLight />`.
