Three.js片段着色器编译报错：‘texture’未找到等问题求助

数据老陈

2026-6-19

解决Three.js片段着色器编译失败问题

错误原因分析

你遇到的两个编译错误指向两个核心问题：

'texture' : no matching overloaded function found：Three.js默认使用WebGL1环境，该环境不支持ShaderToy中的texture()纹理采样函数，WebGL1对应的标准采样函数是texture2D()。
'xyz' : field selection requires structure or vector on left hand side：由于第一个错误导致纹理采样函数返回值无效，后续尝试访问.xyz属性时，左值并非向量/结构体类型，触发二次错误。

具体修复步骤

替换纹理采样函数
打开片段着色器代码，将所有texture(调用替换为texture2D(。比如原ShaderToy风格的代码：
```
vec3 col = texture(iChannel0, uv).xyz;
```
改为Three.js兼容写法：
```
vec3 col = texture2D(uTexture, uv).xyz;
```
注：若项目启用WebGL2Renderer，可保留texture()，但需确保Three.js配置正确开启WebGL2。

统一纹理uniform的声明与传递

在片段着色器顶部声明正确的纹理uniform：
```
uniform sampler2D uTexture;
```

在JS代码中，确保正确加载纹理并传递给材质uniforms：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('你的纹理资源路径');
const material = new THREE.ShaderMaterial({
  uniforms: {
    uTexture: { value: texture }
    // 其他uniform参数...
  },
  // 其他材质配置项...
});