Three.js v125升级后ShaderMaterial报no valid shader program问题

问题核心原因 #

WebGL原生的GLSL规范本身就不支持import语法，你遇到的报错是Three.js版本迭代带来的语法校验规则升级导致的：

• v88版本的Three.js对自定义着色器的预处理逻辑宽松，不会严格校验非标准GLSL语法，你写的import语句要么被早期版本内部构建逻辑意外兼容处理，要么未被检测到直接透传，所以可以侥幸正常运行
• v125版本强化了着色器编译校验逻辑，所有传入ShaderMaterial的着色器代码都会经过严格的GLSL规范校验，import会被直接识别为语法错误，导致片元着色器编译失败、着色器程序链接失败，最终触发no valid shader program in use报错

修复方案 #

• 移除着色器代码内所有import语句，把需要导入的GLSL代码片段直接复制到对应位置，或者在JS层完成字符串拼接后再传入ShaderMaterial的fragmentShader配置项
• 如果原本是要导入Three.js内置的着色器公共片段，直接使用Three.js暴露的ShaderChunk对象取值拼接即可，官方标准的#include <chunkName>写法不受影响，可以正常保留
• 修复后可以先在控制台打印拼接完成的完整着色器字符串，确认无import相关语法后再传入使用

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