Three.js是否支持复杂材质？加载带MTL的蛋糕OBJ模型材质显示异常

效果对比 #

Blender中正常显示效果：

网页加载异常效果：
#

Three.js完全支持该类型的MTL材质，显示异常为配置错误导致，可按以下步骤排查修复：

• 修正纹理路径
  提供的MTL文件中主材质的漫反射纹理使用了Windows本地绝对路径 map_Kd C:\xampp\htdocs\uploads\Jakob\CAKECOLOR.png，浏览器无法直接访问本地文件系统路径，需将纹理文件上传到网页静态资源目录，修改为相对网页入口的相对路径，例如 map_Kd ./assets/CAKECOLOR.png。
• 补充场景光照配置
  该MTL内所有材质均为带高光属性的Phong材质（illum值为2/3），材质显示高度依赖场景光源。Blender默认内置基础光照环境，若Three.js场景仅配置环境光、缺少方向光/点光，会导致材质发暗、高光丢失，和Blender效果差异巨大，需补充对应光源配置。
• 校正纹理颜色空间
  Three.js默认使用线性颜色空间处理纹理，未手动将漫反射纹理的颜色空间设置为sRGB时，会导致纹理颜色饱和度降低、整体发灰，需在材质加载完成后手动配置。
• 开启双面渲染
  若模型存在单面渲染设置，部分面片会因为法线方向问题被剔除，出现缺面异常，手动设置材质为双面渲染即可修复。

修复代码示例 #

import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { AmbientLight, DirectionalLight, SRGBColorSpace, DoubleSide } from 'three';

// 材质与模型加载逻辑
const mtlLoader = new MTLLoader();
mtlLoader.setPath('./models/'); // 替换为你的MTL文件存放路径
mtlLoader.setCrossOrigin('anonymous');
mtlLoader.load('cake.mtl', (materials) => {
  materials.preload();
  // 批量校正材质配置
  Object.values(materials.materials).forEach(mat => {
    if (mat.map) mat.map.colorSpace = SRGBColorSpace;
    mat.side = DoubleSide;
  });
  const objLoader = new OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.setPath('./models/'); // 替换为你的OBJ文件存放路径
  objLoader.load('cake.obj', (object) => {
    scene.add(object);
  });
});

// 场景光照配置
const ambientLight = new AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);
const directionalLight = new DirectionalLight(0xffffff, 1.2);
directionalLight.position.set(10, 10, 5);
scene.add(directionalLight);

原始MTL配置参考 #

newmtl Material
Ns 225.000000
Ka 1.000000 1.000000 1.000000
Kd 0.800000 0.800000 0.800000
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.450000
d 1.000000
illum 2
map_Kd C:\xampp\htdocs\uploads\Jakob\CAKECOLOR.png

newmtl Material.002
Ns 572.940236
Ka 1.000000 1.000000 1.000000
Kd 0.031064 0.010178 0.002872
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.450000
d 1.000000
illum 2

newmtl Material.003
Ns 900.000000
Ka 1.000000 1.000000 1.000000
Kd 0.023651 0.023651 0.023651
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.450000
d 1.000000
illum 3

newmtl Material.004
Ns 900.000000
Ka 1.000000 1.000000 1.000000
Kd 0.057803 0.017225 0.006625
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.450000
d 1.000000
illum 2

newmtl Material.005
Ns 900.000000
Ka 1.000000 1.000000 1.000000
Kd 1.000000 0.878900 0.685513
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.450000
d 1.000000
illum 2

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