ThreeJS加载OBJ/MTL模型纹理泛白 无环境光时纹理不显示问题咨询

核心原因 #

你遇到的纹理过曝/无环境光不显示的问题，是渲染器颜色空间配置错误、光照类型单一、材质纹理编码不匹配三个原因共同导致的，按以下步骤修改即可解决：

1. 修正渲染器颜色空间配置 #

ThreeJS默认输出编码为线性空间，没有做sRGB转换，会导致纹理颜色偏亮过曝，初始化渲染器时新增配置：

renderer = new THREE.WebGLRenderer();
// 新增以下行，开启sRGB输出编码
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

2. 调整光照组合 #

你当前只有环境光，没有直接光照，会出现两个极端：

• 关环境光：场景无任何光源，纹理完全不显示
• 开环境光：漫反射纹理被全局均匀光照冲掉，出现泛白效果
  修改光照配置，新增方向光补充直接照明：

// 调整环境光参数，显式设置强度，避免硬编码颜色导致的亮度不可控
ambient = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambient);
// 新增方向光，模拟自然光照射
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

3. 统一材质纹理编码 #

MTLLoader加载的纹理默认是线性空间编码，需要和渲染器的sRGB输出匹配，修改材质处理逻辑，遍历所有材质而非仅处理default材质：

var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('../foods_models/7/mtl.mtl', function (materials) {
    materials.preload();
    // 遍历所有材质做统一配置
    Object.values(materials.materials).forEach(material => {
        if (material.map) {
            // 纹理设置为sRGB编码，和渲染器输出匹配
            material.map.encoding = THREE.sRGBEncoding;
            material.map.magFilter = THREE.NearestFilter;
            material.map.minFilter = THREE.LinearMipmapLinearFilter;
            // 手动更新材质标识，让ThreeJS识别参数修改
            material.needsUpdate = true;
        }
    });
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.load('../foods_models/7/obj.obj', function (object) {
        scene.add(object);
        zoomCameraToSelection(camera, controls, object);
    });
});

4. 安卓WebView兼容性配置 #

如果以上修改后仍有异常，检查安卓原生WebView配置，确保开启以下权限：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setAllowFileAccess(true);
// 允许跨域加载本地纹理（如果模型资源存放在本地）
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);

效果对比 #

• 无环境光异常效果：
• 开启环境光过曝效果：

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