Three.js FBXLoader加载模型后场景不可见且无控制台报错求助

我来帮你排查下这个FBX模型加载后看不到的问题，结合你的代码和截图，大概率是下面几个常见原因之一，咱们一步步来解决：

1. 先修正代码里的语法错误 #

你相机初始化的代码里有个明显笔误：

camera = new THREE.PerspectiveCamera( 45, width / height, 0.001, 100 000 );

这里的远裁剪面参数100 000中间有空格，会导致JavaScript语法错误，应该改成100000，先把这个问题修复，避免潜在的运行异常。

2. 检查模型的位置与缩放 #

从截图看地面网格正常显示，说明相机和场景基础设置没问题，但模型可能不在相机视野范围内，或者尺寸太小。你可以尝试重置模型位置到原点，并调整缩放：

loader.load( 'uploaded/silly_dancing.fbx', function ( object ) {
  model = object;
  console.log(model);
  // 将模型移到场景原点，确保在相机视野中心
  model.position.set(0, 0, 0);
  // 根据模型实际尺寸调整缩放（这里先尝试放大10倍，可按需修改）
  model.scale.setScalar(10);
  scene.add( model );
});

3. 补充光照，避免材质不发光 #

你目前只添加了环境光AmbientLight，有些FBX模型自带的材质对环境光的响应很弱，甚至完全不显示。可以添加一个方向光来增强照明：

// 在添加AmbientLight之后添加这段代码
var directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
directionalLight.position.set(100, 200, 100); // 从斜上方照射
directionalLight.castShadow = true;
scene.add(directionalLight);

4. 检查模型的可见性与材质 #

有些FBX模型可能存在子对象被设置为不可见，或者自带材质有问题。你可以遍历模型的所有子对象，强制开启可见性并替换为测试材质：

loader.load( 'uploaded/silly_dancing.fbx', function ( object ) {
  model = object;
  console.log(model);
  // 遍历所有子网格，确保可见并替换为红色测试材质
  model.traverse(function(child) {
    if (child.isMesh) {
      child.visible = true;
      child.material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
    }
  });
  model.position.set(0, 0, 0);
  scene.add( model );
});

5. 调整OrbitControls的目标点 #

你的控制器目标设置为(0, 100, 0)，如果模型在原点，相机可能正看向模型上方的位置，导致模型不在视野里。可以把目标点改成原点：

controls.target.set( 0, 0, 0 );
controls.update();

按照上面的步骤逐一排查，应该就能看到模型了。如果还是不行，可以在控制台打印model.position、model.scale以及相机的frustum信息，进一步确认模型是否在相机的可视范围内。

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