Three.js片元着色器渲染纹理完全透明问题求助

看起来你遇到的问题很典型——纹理加载后渲染全透明，但基础图形绘制正常，这说明渲染管线本身没问题，问题大概率出在纹理加载流程或者uniform变量/纹理配置上。下面是几个排查方向和解决办法：

1. 优先处理纹理加载的异步问题 #

THREE.TextureLoader.load()是异步操作，当你直接初始化uniforms时，纹理还没加载完成，此时纹理的image属性是空的，采样自然会得到透明结果。你需要确保纹理加载完成后再更新材质或触发渲染：

// 改成异步加载+回调更新的方式
const textureLoader = new THREE.TextureLoader();
textureLoader.load("lol.png", (loadedTexture) => {
    uniforms.texture.value = loadedTexture;
    // 加载完成后触发一次渲染更新
    renderer.render(scene, camera);
});

// 初始化uniforms时先用空纹理占位（可选，避免初始帧透明）
const uniforms = {
    "uTime": { type: "f", value: 0.0 },
    texture: { value: new THREE.Texture() },
};

2. 避免uniform变量名冲突 #

你的片元着色器里用了texture作为采样器名称，虽然语法合法，但Three.js部分内置材质本身带有map属性，可能会和这个命名产生隐性冲突。建议把采样器名字改成更明确的标识，比如uTexture：

修改片元着色器： #

uniform sampler2D uTexture; // 重命名采样器
precision mediump float;
varying vec2 vUv;
void main() {
    gl_FragColor = texture2D(uTexture, vUv);
}

同步修改uniforms配置： #

uniforms = {
    "uTime": { type: "f", value: 0.0 },
    uTexture: { value: new THREE.TextureLoader().load("lol.png") }, // 对应改名
}

3. 配置纹理的基础采样参数 #

有时候纹理加载后未设置正确的过滤或包裹模式，也会导致采样异常。可以给纹理添加这些基础配置：

const loadedTexture = new THREE.TextureLoader().load("lol.png");
// 设置过滤模式，避免纹理尺寸非2的幂时出错
loadedTexture.minFilter = THREE.LinearFilter;
loadedTexture.magFilter = THREE.LinearFilter;
// 设置包裹模式，防止UV超出范围时的异常
loadedTexture.wrapS = THREE.ClampToEdgeWrapping;
loadedTexture.wrapT = THREE.ClampToEdgeWrapping;
// 如果你的UV显示是上下颠倒的，可添加：
// loadedTexture.flipY = false;

4. 排查图片本身的问题 #

• 确认lol.png的路径正确，浏览器控制台没有404错误；
• 检查图片是否真的包含不透明像素（比如是不是误用了全透明的PNG）；
• 检查跨域问题：如果图片来自外部域名，需要服务器配置CORS，或者在加载时设置跨域参数：

const textureLoader = new THREE.TextureLoader();
textureLoader.setCrossOrigin("anonymous");
textureLoader.load("lol.png", (tex) => { /* 回调逻辑 */ }, undefined, (err) => {
    console.error("纹理加载失败:", err);
});

按照上面的步骤逐一排查，应该能解决纹理透明的问题。

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