gltf 模型在 three.js 中加载完成但不显示，通常因模型尺寸远超相机视锥范围或位置偏移导致；通过调整缩放比例（如设为 0.1）、检查坐标系及确保渲染循环正常运行，即可快速定位并解决。
gltf 模型在 three.js 中加载完成但不显示，通常因模型尺寸远超相机视锥范围或位置偏移导致；通过调整缩放比例（如设为 0.1）、检查坐标系及确保渲染循环正常运行，即可快速定位并解决。
在使用 GLTFLoader 加载三维模型时，一个高频却容易被忽视的问题是：模型虽已成功加载并加入场景，却完全不可见。正如示例代码所示，开发者确认了 .gltf 文件与纹理均被浏览器正常加载（Network 面板无报错），环境配置（相机、灯光、渲染器）看似完整，但模型始终“隐身”。
根本原因往往在于 模型的世界尺度与 Three.js 默认相机视锥严重不匹配。多数建模软件（如 Blender）导出的 GLTF 模型可能以“米”为单位，而模型本身实际尺寸可能高达几十甚至上百单位（例如人物模型高度为 200 单位）。此时，若相机 position.z = 2.5，其 fov=75°、近裁剪面 near=0.1，则绝大多数模型会位于 far=1000 范围之外，或直接被近平面裁剪——导致渲染器“看不见”。
✅ 正确做法是：主动适配模型尺寸。如答案中所揭示，将缩放设为 0.1 后立即可见：
loader.load('./models/eddieFinal.gltf', (gltf) => {
const model = gltf.scene;
model.scale.set(0.1, 0.1, 0.1); // 关键：大幅缩小模型
model.position.set(0, 0, 0);
scene.add(model);
// ✅ 必须启用渲染循环！原代码中 renderer.render() 仅执行一次
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
});
⚠️ 其他关键检查点：
- 缺失动画循环：原代码仅在加载回调中调用一次 renderer.render()，无法持续更新画面。务必使用 requestAnimationFrame 启动循环。
- 未设置模型位置/旋转：position.set() 无参数等价于 (0,0,0)，但若模型中心不在原点（如 Blender 导出时原点偏移），需用 model.geometry.center() 或手动调整。
- 材质未启用光照响应：AmbientLight 强度过低（intensity = 1 对默认 0xffffff 材质偏暗），建议补充 DirectionalLight 并确保模型材质支持光照（如 MeshStandardMaterial）。
- 透明/Alpha 混合问题：若模型含透明材质，需确认 transparent: true 及渲染顺序（depthWrite: false）。
? 进阶提示：可临时添加辅助对象快速定位模型：
// 在加载后添加线框立方体包围盒
const box = new THREE.Box3().setFromObject(model);
const helper = new THREE.BoxHelper(model, 0xff0000);
scene.add(helper);
console.log('Model bounds:', box);
总结：GLTF 模型“加载成功却不可见”，90% 源于尺度失配。养成加载后立即检查 scale、启用 animate 循环、配合辅助可视化工具的习惯，能极大提升调试效率。
