React中使用Babylon.js时的3D模型纹理黑色区域问题

我用Babylon.js开发3D演示应用，在React环境中从S3导入3D模型并为材质添加纹理图片，但添加纹理后模型未被纹理覆盖的区域全部变成黑色。这段代码在Babylon Playground中运行正常，但放到React应用里就失效了。

var mat = new BABYLON.CustomMaterial("mat", scene);
mat.diffuseTexture = new BABYLON.Texture(textureImage, scene, false, false);
materialedMeshes.forEach(mesh => mesh.material = mat);
mat.emissiveColor = new BABYLON.Color3(1, 1, 1);

// mat.diffuseColor = new BABYLON.Color3(1, 0, 1);
// mat.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
// mat.emissiveColor = new BABYLON.Color3(1, 1, 1);
// mat.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);

mat.diffuseTexture.uOffset = -0.1000;
mat.diffuseTexture.vOffset = -1.1800;
mat.diffuseTexture.uScale = 1.2200;
mat.diffuseTexture.vScale = 2.2200;
mat.diffuseTexture.uAng = Math.PI;
mat.diffuseTexture.wrapU = BABYLON.Constants.TEXTURE_CLAMP_ADDRESSMODE;
mat.diffuseTexture.wrapV = BABYLON.Constants.TEXTURE_CLAMP_ADDRESSMODE;
mat.Fragment_Custom_Alpha(`
if (baseColor.r == 0. && baseColor.g == 0. && baseColor.b == 0.) {
    baseColor.rgb = vec3(0.85, 0.85, 0.85);
}
baseColor.rgb = mix(vec3(0.85, 0.85, 0.85), baseColor.rgb, baseColor.a);
`)

1. 纹理加载时机不匹配（React异步特性导致） #

React组件渲染是异步的，可能纹理还没加载完成就被应用到材质上，而Playground是同步执行环境不会有这个问题。

解决方法：监听纹理的加载完成事件，确认纹理加载后再绑定材质到网格：

const texture = new BABYLON.Texture(textureImage, scene, false, false);
texture.onLoadObservable.add(() => {
    const mat = new BABYLON.CustomMaterial("mat", scene);
    mat.diffuseTexture = texture;
    // 其他材质配置代码...
    mat.emissiveColor = new BABYLON.Color3(1, 1, 1);
    mat.diffuseTexture.uOffset = -0.1000;
    // ...其余纹理参数设置
    mat.Fragment_Custom_Alpha(`
        if (length(baseColor.rgb) < 0.01) {
            baseColor.rgb = vec3(0.85, 0.85, 0.85);
        }
        baseColor.rgb = mix(vec3(0.85, 0.85, 0.85), baseColor.rgb, baseColor.a);
    `);
    materialedMeshes.forEach(mesh => mesh.material = mat);
});

2. 着色器浮点精度判断失效 #

你在Fragment_Custom_Alpha中用精确等于0的判断替换黑色区域，但浮点运算存在精度误差，React环境下可能导致判断不生效。

解决方法：修改判断逻辑，用颜色长度的阈值替代精确等于0：

mat.Fragment_Custom_Alpha(`
if (length(baseColor.rgb) < 0.01) { // 用长度判断避免浮点精度问题
    baseColor.rgb = vec3(0.85, 0.85, 0.85);
}
baseColor.rgb = mix(vec3(0.85, 0.85, 0.85), baseColor.rgb, baseColor.a);
`)

3. 材质基础颜色未显式设置 #

React环境中，CustomMaterial的默认diffuseColor可能为黑色，纹理未覆盖的区域会直接使用这个默认值。

解决方法：显式设置diffuseColor为你想要的默认颜色：

mat.diffuseColor = new BABYLON.Color3(0.85, 0.85, 0.85); // 和着色器中替换的颜色一致

4. S3纹理跨域或权限问题 #

检查S3存储桶的CORS配置是否允许你的React应用域名访问，同时确认纹理URL是否正确（可在浏览器网络面板查看纹理是否返回403/404错误）。

1. 打开浏览器开发者工具，查看网络面板确认纹理图片是否成功加载。
2. 检查控制台是否有Babylon.js相关的报错信息。
3. 暂时替换纹理为本地图片，排除S3配置问题。

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