/en/tags/gltf/Recent content in Gltf on Feynman's BlogHugoen-USTue, 28 Jul 2026 12:00:00 +0800/en/posts/threejs-model-loading/Tue, 28 Jul 2026 12:00:00 +0800/en/posts/threejs-model-loading/<blockquote class="blockquote-regular"> <p>In the first 7 lessons, we created geometry with code. In real projects, 3D models are usually made in Blender/Maya, exported as GLTF/GLB, and loaded into the scene. This lesson covers the complete model loading pipeline: load → compress → scale → animate.</p> </blockquote> <p><img src="/images/2026-07-07_series_threejs-creation-diary/08_model-loading/demo.png" alt="Demo: Model Loading"></p> <h2 id="01-learning-objectives">01 Learning Objectives</h2> <p>This lesson focuses on Three.js model loading system:</p> <ul> <li>Understand GLTF/GLB format differences and file structure</li> <li>Learn to use GLTFLoader to load models</li> <li>Understand Draco compression principles and configuration</li> <li>Implement LoadingManager for unified progress management</li> <li>Master model auto-scaling and centering algorithms</li> <li>Understand LOD (Level of Detail) strategy</li> <li>Learn AnimationMixer for animation playback</li> </ul> <h2 id="02-gltf-format-details">02 GLTF Format Details</h2> <h3 id="gltf-vs-glb">GLTF vs GLB</h3> <table> <thead> <tr> <th>Format</th> <th>Description</th> <th>Use Case</th> </tr> </thead> <tbody> <tr> <td>GLTF</td> <td>JSON text, resources scattered (.gltf + .bin + textures)</td> <td>Development/debugging</td> </tr> <tr> <td>GLB</td> <td>Binary, single file with all resources</td> <td>Production</td> </tr> </tbody> </table> <p><strong>GLTF File Structure</strong>:</p>