使用three.js加载.obj和.mtl文件时带纹理3D模型无法显示求助

问题排查与解决方案 #

• 相机参数配置错误
  你的相机当前位置为(0,0,0)，视线目标cameraTarget也为(0,0,0)，二者重合导致没有可视区域，同时和OrbitControls的target(0,1,0)参数冲突。
  修复方法：将相机后移调整到合适观测位置，统一视线目标参数：

// 调大远裁剪面，避免大模型被裁切
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 沿z轴后移相机，留出观测距离
camera.position.set(0, 2, 10);
// 统一视线目标，和OrbitControls参数保持一致
cameraTarget = new THREE.Vector3(0, 1, 0);

• 模型尺寸/坐标超出视锥体范围
  导出的OBJ模型通常没有统一尺寸，也可能存在坐标原点偏移的情况，超出你默认设置的15单位远裁剪面范围就会不可见。
  修复方法：模型加载完成后自动计算包围盒，居中并适配到视口范围内：

new OBJLoader ( manager ).setMaterials( materials ).load(OBJFile, function ( object ) {
    console.log(object);
    // 计算模型包围盒
    const box = new THREE.Box3().setFromObject(object);
    const center = box.getCenter(new THREE.Vector3());
    const size = box.getSize(new THREE.Vector3());
    const maxDim = Math.max(size.x, size.y, size.z);
    // 按比例缩放模型适配视口
    const scale = 5 / maxDim;
    object.scale.setScalar(scale);
    // 模型居中
    object.position.sub(center.multiplyScalar(scale));
    scene.add( object );
}, undefined, function (err) {
    // 新增错误回调，排查加载问题
    console.error('OBJ加载失败：', err);
});

• 光照不足/和背景融合
  仅靠绑定在相机上的单点光很容易出现光照盲区，材质反光度低的话模型会完全和黑色默认背景融合。
  修复方法：新增环境光补全漫反射光照，临时修改背景色方便排查：

// 新增环境光补光
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
// 适当提高点光强度
camera.add( new THREE.PointLight( 0xffffff, 1.2 ) );
// 修改渲染背景色，避免模型和黑背景融合
renderer.setClearColor(0xcccccc);

• 资源加载异常排查
  当前代码没有添加MTL加载的错误回调，无法判断材质文件是否加载成功。另外OBJ/MTL文件名带空格也可能导致资源解析失败，建议修改文件名去掉空格。
  修复方法：给MTLLoader添加错误回调：

new MTLLoader(manager).load(MTLFile, function ( materials ) {
    materials.preload();
    // 原有OBJ加载逻辑
}, undefined, function(err) {
    console.error('MTL加载失败：', err);
});

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