glsl插件装了但.frag仍显示plain text,因sublime未手动绑定后缀;需点击右下角→open all with current extension as…→选glsl项,且.fs/.vs等也须单独绑定;vuv等three.js变量不补全是设计使然,属运行时注入而非glsl标准;highlight_line生效需配色方案含linehighlight规则;外置着色器不生效多因浏览器缓存或加载时机问题。

GLSL插件装了但.frag还是Plain Text?先看右下角语法标识
Sublime Text 不会自动把 .frag、.vert、.fs、.vs 这些后缀关联到 GLSL 语法,插件只提供能力,不绑定就等于没开。打开一个 .frag 文件,右下角显示 Plain Text 或误判成 ShellScript(尤其 .s 后缀常被抢注),就是典型症状。
立刻点击右下角语言名 → Open all with current extension as… → 找到名称含 GLSL 的项(不是 OpenGL Shading Language 这类旧名,以你安装后实际列出为准)。如果菜单里压根没有 GLSL,按 Ctrl+Shift+P 输入 Package Control: List Packages,搜 GLSL 确认是否真已安装成功。
注意:.fs、.vs、.geom 等扩展名也要单独绑定,不能只绑 .frag;已打开的旧文件需手动点右下角重新选一次语法,新建文件才会自动匹配。
vUv、cameraPosition这些变量为啥不补全?这不是bug,是设计如此
vUv、vNormal、cameraPosition、diffuseColor 这些根本不在 GLSL 标准里,是 Three.js 在运行时注入的 uniform/varying,任何标准 GLSL 插件都不会识别它们。插件只认 gl_Position、gl_FragColor、vec2、mat4 这类 OpenGL 内建符号。
可行替代方案:
- 用 Sublime 的
snippets功能自建常用变量片段:比如新建vUv.sublime-snippet,内容为<content>vUv</content><tabtrigger>vuv</tabtrigger>,保存到Packages/User/目录下 - 放弃补全幻想,改用
SpectorJS在浏览器里实时inspect着色器输入变量——它看到的才是运行时真实上下文 - 顶部加伪注释如
// @fragment: cameraPosition, diffuseColor属 hack,可能干扰编译器或预处理器,不推荐
"highlight_line": true开了但当前行没颜色?配色方案缺定义
"highlight_line": true 只是开关,真正决定颜色的是你当前启用的 .sublime-color-scheme 文件里有没有 lineHighlight 规则。很多轻量主题甚至默认主题都缺这条规则,结果就是“开了等于没开”。
验证方法:打开任意代码文件,按 Ctrl+Shift+P 输入 Developer: Show Scope Name,光标放某行中间,看输出里有没有 region.line —— 没有就说明主题缺失该规则。
解决方式:
- 换主题(比如
Monokai或Brogrammer) - 或手动编辑配色方案:按
Ctrl+Shift+P输入Preferences: Color Scheme,在rules数组末尾插入一条:{"scope": "region.line", "background": "#2f3337"}(注意大小写敏感,background值必须是合法十六进制或rgb()格式)
改完保存,无需重启,切换文件再切回来即可生效。
外置着色器改了但浏览器不生效?90%不是Sublime的问题
GLSL 高亮和 Three.js 运行是两层事——前者管写,后者管跑。编辑器里看着再漂亮,着色器逻辑错、变量名拼错、加载时机不对,浏览器里照样黑屏。
外置 .frag 文件不生效,最常见原因:
- 浏览器缓存:清缓存,或给
THREE.FileLoader加时间戳参数,比如url + '?t=' + Date.now() -
THREE.FileLoader加载失败:检查控制台是否有404或 CORS 报错 - 加载时机不当:确保在
material创建前完成加载,或用onBeforeCompile注入逻辑
最容易被忽略的一点:SpectorJS 调试时看到的变量名,必须和你在 Sublime 里写的完全一致(包括大小写、下划线位置),Three.js 对注入变量名是严格匹配的。











