gltf 模型在 three.js 中加载成功却不可见，通常源于模型尺寸与相机视锥不匹配——默认模型可能过大或过小，导致超出渲染范围；调整缩放比例（如设为 0.1）后即可正常显示。
gltf 模型在 three.js 中加载成功却不可见，通常源于模型尺寸与相机视锥不匹配——默认模型可能过大或过小，导致超出渲染范围；调整缩放比例（如设为 0.1）后即可正常显示。
在你提供的代码中，模型虽已成功加载并添加到场景（scene.add(gltf.scene)），但未正确出现在视口中，根本原因往往不是光照、材质或路径问题（开发工具已确认资源加载完成），而是模型的世界坐标尺度与相机的视锥参数严重不匹配。
你的相机配置为：
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 2.5;
这意味着：近裁剪面（near = 0.1）距相机仅 0.1 单位，远裁剪面（far = 1000）很远，而相机位于 (0, 0, 2.5)，正朝向原点观察。若模型本身尺寸极大（例如导出单位为“厘米”但建模软件按“米”处理，或 Blender 中未应用缩放），其包围盒可能远超 z ∈ [0.1, 1000] 范围——实际可能从 z = -100 延伸到 z = +100，导致完全落在近平面之前或远平面之后，被裁剪剔除。
✅ 正确做法是：先获取模型尺寸，再合理缩放并居中。不要依赖猜测（如 scale.set(1,1,1)）。推荐使用 Box3 计算边界并自动适配：
loader.load('./models/eddieFinal.gltf', function (gltf) {
const model = gltf.scene;
// 1. 居中模型（可选但强烈推荐）
const box = new THREE.Box3().setFromObject(model);
const center = box.getCenter(new THREE.Vector3());
model.position.x = -center.x;
model.position.y = -center.y;
model.position.z = -center.z;
// 2. 自动缩放到合适大小（例如适配相机视野内约 2 单位宽高）
const size = box.getSize(new THREE.Vector3());
const maxDim = Math.max(size.x, size.y, size.z);
const scale = 2.0 / maxDim; // 目标最大尺寸为 2
model.scale.setScalar(scale);
scene.add(model);
// ✅ 渲染应在动画循环中执行，而非加载回调内
// renderer.render(scene, camera); ← 删除这一行！
});⚠️ 关键注意事项：
- 移除 renderer.render() 手动调用：Three.js 渲染需持续循环（如 requestAnimationFrame），否则只渲染一帧且无后续更新；
- 检查模型朝向与坐标系：GLTF 默认 Y-up，确保模型正面朝向 +Z（即朝向相机）；必要时加 model.rotation.y = Math.PI; 翻转；
-
验证材质是否启用可见性：某些导出器会禁用 material.visible = false，可全局启用：
model.traverse(obj => { if (obj.isMesh && obj.material) obj.material.visible = true; }); -
补充基础光源：仅 AmbientLight 可能不足，建议增加 DirectionalLight 提供明暗对比：
const dirLight = new THREE.DirectionalLight(0xffffff, 1); dirLight.position.set(5, 5, 5); scene.add(dirLight);
最后，务必启动渲染循环：
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();通过尺寸归一化 + 居中 + 合理光源 + 持续渲染，90% 的“模型加载成功却不显示”问题都能迎刃而解。
