Fragment Shader中纹理渲染失败：如何正确显示球体纹理？

1. 确保着色器中UV坐标的正确传递 #

这是纹理采样的基础前提：

• 顶点着色器必须声明并传递UV坐标：

varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

• 片元着色器接收该变量并用于纹理采样：

uniform sampler2D uTexture;
varying vec2 vUv;

void main() {
  gl_FragColor = texture2D(uTexture, vUv);
}

2. 检查Three.js中纹理的加载与传递逻辑 #

• 用TextureLoader加载纹理，确保加载完成后再关联材质（避免纹理未就绪时渲染）：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('你的图片路径.jpg', () => {
  renderer.render(scene, camera); // 加载完成后触发一次渲染
});

• ShaderMaterial的uniforms必须正确传入纹理对象：

const material = new THREE.ShaderMaterial({
  uniforms: {
    uTexture: { value: texture }
  },
  vertexShader: // 你的顶点着色器代码,
  fragmentShader: // 你的片元着色器代码
});

3. 调整纹理的UV翻转设置 #

Three.js默认会翻转纹理的Y轴，部分图片会因此显示异常，可手动关闭：

texture.flipY = false;

4. 确认片元着色器输出格式正确 #

确保最终输出的gl_FragColor是vec4类型，不要遗漏alpha通道：

• 错误示例：gl_FragColor = vec3(texture2D(uTexture, vUv));
• 正确写法：gl_FragColor = vec4(texture2D(uTexture, vUv).rgb, 1.0); 或直接使用纹理返回的vec4

5. 检查几何体的UV映射 #

如果使用自定义几何体，要确保生成了UV坐标；若用SphereGeometry，默认自带UV，无需额外处理。

完整示例代码片段 #

<script type="x-shader/x-vertex" id="vertexShader">
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>

<script type="x-shader/x-fragment" id="fragmentShader">
uniform sampler2D uTexture;
varying vec2 vUv;

void main() {
  gl_FragColor = texture2D(uTexture, vUv);
}
</script>

<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture.jpg');
texture.flipY = false;

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.ShaderMaterial({
  uniforms: { uTexture: { value: texture } },
  vertexShader: document.getElementById('vertexShader').textContent,
  fragmentShader: document.getElementById('fragmentShader').textContent
});

const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  sphere.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
</script>

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