Three.js自定义Shader实现地球纹理球时顶点着色器编译报错

核心错误原因 #

GLSL是大小写敏感的语言，你的顶点着色器中存在变量名大小写不匹配的问题：

• 开头声明的可变变量名为 vertexUV（末尾两个字母都是大写）
• 赋值时错误写为 vertexUv（末尾字母v小写）
  未定义的变量直接赋值导致顶点着色器编译失败，触发了你看到的报错。

修复方案 #

直接修正顶点着色器vertex.glsl的变量名即可，修改后的代码如下：

varying vec2 vertexUV;

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

可选优化建议 #

• 纹理加载是异步操作，建议给TextureLoader.load方法加回调函数，确认纹理加载完成后再初始化着色器材质，避免出现短时间的黑屏
• 如果后续需要开启透明度效果，可以给ShaderMaterial加上transparent: true配置项

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