结合Three.js与Node.js在网站加载OBJ/MTL 3D模型的问题求助

• 添加场景光源
  你之前仅加载OBJ时能正常显示，是因为OBJLoader默认会给无材质的模型分配不需要响应光照的MeshBasicMaterial，而加载MTL材质后，材质默认是需要光照计算的MeshStandardMaterial类，没有光源的情况下模型会呈现全黑，和背景重合就无法观察到。在场景初始化代码中加入光源即可：

const scene = new THREE.Scene();
// 加入以下两行光源代码
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

• 修正模型位置偏移
  你在MTL加载逻辑中添加了mesh.position.y = -50的配置，而纯OBJ加载时没有这个偏移，即使调整过相机位置，也可能出现模型落在视锥体范围外的情况，测试阶段可以先注释掉这行偏移代码，确认模型显示正常后再调整位置。
• 补全资源路径配置
  如果你的MTL文件中包含纹理贴图引用，需要给MTLLoader显式设置资源基础路径，避免loader无法定位贴图导致材质加载失败，修改后的加载逻辑如下：

var mesh = null;
var mtlLoader = new THREE.MTLLoader();
// 设置MTL及关联纹理的根目录
mtlLoader.setPath('/3D/');
mtlLoader.load('tent_detailedOpen.mtl', function (materials) {
    materials.preload();       
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('/3D/');
    objLoader.load('tent_detailedOpen.obj', function (object) {
        mesh = object;
        // mesh.position.y = -50;
        scene.add(mesh);
    });
}); 

• 修正服务端响应头配置
  当前服务端返回OBJ、MTL文件的MIME类型配置存在错误，可能导致浏览器无法正常识别资源：
  • OBJ文件的响应头Content-Type修改为model/obj
  • MTL文件的响应头Content-Type修改为model/mtl
  • 若MTL中引用了纹理图片，需要额外添加对应图片格式的响应头配置

如果只需要实现简单的可旋转3D宝剑展示，可以选择更稳定的实现路径：

1. 用glTF格式替代OBJ+MTL组合，glTF是Three.js官方推荐的3D资源格式，单文件即可包含模型、材质、纹理、动画信息，加载逻辑更简单，不会出现材质与模型匹配错误的问题
2. 服务端可以直接使用express的static中间件托管静态资源，不需要手动编写每个路径的响应逻辑，代码可简化为：

const express = require('express');
const app = express();
const port = 300;
// 托管项目根目录下所有静态资源，JS、HTML、3D文件均可直接访问
app.use(express.static(__dirname));
app.listen(port, '127.0.0.1', () => {
  console.log(`Server running at http://127.0.0.1:${port}/`);
});

内容的提问来源于stack exchange，提问作者Juli.w