Three.js本地运行正常 部署网站后无法加载3D模型求助

我来帮你梳理这个线上加载3D模型空白的问题，结合你的代码和常见的部署踩坑点，整理几个大概率的原因和解决步骤：

1. 先看浏览器控制台！这是最快定位问题的方式 #

线上环境最容易忽略的就是浏览器的错误提示，按F12打开Console面板，重点看这几类错误：

• 404错误：确认模型文件路径是否真的和线上服务器一致，比如assets/models/avatar.obj是不是存在于网站根目录的对应文件夹里
• MIME类型错误：很多主机默认不会识别.obj和.mtl这类格式，导致浏览器拒绝加载。你需要在服务器配置里添加对应的MIME类型：
  • 如果你用Apache，在网站根目录的.htaccess文件里加：

    AddType model/obj .obj
    AddType model/mtl .mtl
    

  • 如果是Nginx，在站点配置的server块里加：

    location ~* \.(obj|mtl)$ {
        types {
            model/obj obj;
            model/mtl mtl;
        }
    }
    

• CORS跨域错误：如果模型资源放在其他域名下，需要配置跨域允许，但你说本地正常，大概率不是这个，但也要留意

2. 文件名大小写要严格匹配 #

本地Windows系统是大小写不敏感的，但线上服务器基本都是Linux系统，文件名大小写必须完全一致。比如你代码里写的avatar.mtl，如果服务器上的文件是Avatar.mtl或者AVATAR.MTL，就会加载失败。去服务器上核对一下文件名的大小写，别小看这个细节！

3. 给Loader加上错误回调，明确加载状态 #

你的代码里只有成功回调，线上网络波动或者文件出错时，根本不知道问题出在哪。给MTLLoader和OBJLoader的load方法加上进度和错误回调，这样能直接在控制台看到加载失败的原因：

修改后的Loader代码示例：

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath("assets/models/");
mtlLoader.load('avatar.mtl', 
  function(materials) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath("assets/models/");
    objLoader.load('avatar.obj', 
      function(object) {
        object.scale.set(1, 1, 1);
        mesh = object;
        scene.add(mesh);
        object.rotation.x = 0;
        object.rotation.y = -1.3;
      },
      // OBJ加载进度回调
      function(xhr) {
        console.log(`OBJ已加载 ${(xhr.loaded / xhr.total * 100).toFixed(2)}%`);
      },
      // OBJ加载错误回调
      function(error) {
        console.error('OBJ模型加载失败:', error);
      }
    );
  },
  // MTL加载进度回调
  function(xhr) {
    console.log(`MTL已加载 ${(xhr.loaded / xhr.total * 100).toFixed(2)}%`);
  },
  // MTL加载错误回调
  function(error) {
    console.error('MTL材质加载失败:', error);
  }
);

4. 核对Three.js版本一致性 #

本地开发用的Three.js版本，和线上部署的libs/文件夹里的three.js、OBJLoader.js、MTLLoader.js是不是同一版本？有些版本之间Loader的API有细微调整，比如旧版本的MTLLoader可能不支持某些新的材质属性，导致加载失败。最好是把本地测试过的完整libs文件夹直接同步到线上，不要单独替换某个文件。

5. 检查HTTPS混合内容问题 #

如果你的线上网站是HTTPS协议，但模型资源是通过HTTP加载的（或者相对路径被解析成HTTP），浏览器会阻止“混合内容”加载，这时候页面就会空白。可以在控制台看有没有混合内容的警告，然后确保所有资源都通过HTTPS访问，或者调整网站的资源加载路径。

先按上面的步骤排查，尤其是第一步看控制台错误，大概率能找到问题所在！

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