Three.js使用GLTFLoader加载GLB模型后无法在场景显示求助

问题排查与修复方案 #

• 逻辑冲突问题
  你当前代码同时存在两套模型加载逻辑：一套是GLTFLoader直接加载GLB模型的逻辑，另一套是hammerLoaded函数处理几何体的旧逻辑，两套逻辑同时操作hammer变量、重复向场景添加对象，逻辑冲突导致加载异常。如果使用GLB模型，直接使用GLTFLoader的加载回调即可，删除冗余的hammerLoaded相关代码。

• 坐标与尺寸适配问题
  你给模型设置的position.y = 120数值过大，超出常规相机视锥体范围会直接不可见。多数GLB模型导出时单位配置不统一，要么尺寸过大超出视野，要么尺寸过小看不到。可以先将模型放置在坐标原点，设置初始缩放值后再微调：

hammer.scale.set(1,1,1);
hammer.position.set(0,0,0);
// 加载完成后让相机对准模型位置，确保在视野内
camera.lookAt(hammer.position);

• 过时API使用问题
  代码中用到的THREE.ImageUtils.loadTexture、THREE.MeshFaceMaterial均为Three.js已废弃API，在新版本中会直接报错。新版本加载纹理使用THREE.TextureLoader，多材质直接向Mesh传入材质数组即可；同时MeshPhongMaterial没有metal属性，要实现金属效果请使用MeshStandardMaterial的metalness属性配置。

• 场景光源缺失问题
  你使用的MeshPhongMaterial属于需要光源照射才能显示的材质，如果场景中没有添加环境光、方向光等光源，模型就算加载成功也会是全黑状态，和背景融合无法观察到。可先添加基础环境光测试：

const ambientLight = new THREE.AmbientLight(0xffffff, 1.2);
scene.add(ambientLight);

最简可运行加载参考代码 #

const loader2 = new GLTFLoader();
loader2.load( 'https://jokertattoo.co.uk/gun.glb', function ( gltfgame ) {
  const hammer = gltfgame.scene;
  hammer.traverse( function ( child ) {
    if ( child.isMesh ) {
      child.frustumCulled = false;
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
  // 初始位置、缩放调整
  hammer.scale.set(1,1,1);
  hammer.position.set(0,0,0);
  scene.add(hammer);
  // 相机对准模型
  camera.lookAt(hammer.position);
});

内容的提问来源于stack exchange，提问作者user3112634