ThreeJS r160版本ShaderMaterial纹理渲染全黑问题求助

你遇到的问题核心是：ShaderMaterial不会像MeshStandardMaterial那样自动处理纹理属性，直接设置.map不会生效，必须手动配置对应的uniform和着色器宏定义。

修复步骤 #

修改你的JS代码，做以下两处关键调整：

1. 将纹理赋值到材质uniforms的map字段，而非直接设置dirtMaterial.map
2. 在defines中添加USE_MAP，启用内置着色器的纹理采样逻辑

修改后的代码：

let dirtTexture = new THREE.TextureLoader().load("textures/fieldDirtTexture.jpg");
// 可选：添加加载回调确保纹理就绪后再渲染
// dirtTexture.onLoad = () => { dirtMaterial.needsUpdate = true; };
let standard = THREE.ShaderLib['standard'];
let dirtMaterial = new THREE.ShaderMaterial({
    lights: true,
    uniforms: THREE.UniformsUtils.clone( standard.uniforms ),
    defines: {
        PHYSICAL: true,
        USE_MAP: true // 新增：启用纹理采样逻辑
    },
    vertexShader: document.getElementById( 'dirtVS' ).textContent,
    fragmentShader: document.getElementById( 'dirtFS' ).textContent
});

// 替换原有的dirtMaterial.map = dirtTexture
dirtMaterial.uniforms.map.value = dirtTexture;

dirtMaterial.uniforms.roughness.value = 1.0;
dirtMaterial.uniforms.metalness.value = 0.0;
dirtMaterial.uniforms.ior.value = 0.0;

原因说明 #

ThreeJS的内置标准着色器依赖USE_MAP宏来激活map_fragment中的纹理采样代码。ShaderMaterial是完全自定义的材质，不会自动识别你设置的.map属性，必须手动：

• 开启对应的宏定义（USE_MAP）
• 将纹理正确传递到着色器的uniform变量中

额外检查项 #

• 确认纹理路径正确，浏览器控制台无404错误
• 若需要重复纹理，设置dirtTexture.wrapS = THREE.RepeatWrapping; dirtTexture.wrapT = THREE.RepeatWrapping;
• 可优化纹理过滤：dirtTexture.minFilter = THREE.LinearMipmapLinearFilter;

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