sublime text 可高效开发 three.js 着色器：需安装 glsl 插件实现语法高亮与补全，手动关联 .vert/.frag 文件，用 three.fileloader 外置加载，配合 onbeforecompile 和 spectorjs 调试，并注意 three.js 变量注入规范与 webgl 编译限制。
Sublime Text 本身不运行 WebGL，但配置得当后，能成为 Three.js GLSL 着色器开发中响应快、干扰少的主力编辑器。关键不是“能不能写”，而是“怎么让 .vert 和 .frag 文件获得正确高亮、补全、路径管理与调试协同”。
GLSL 文件语法高亮失效？先确认文件关联和插件状态
Sublime 默认不识别 .vert、.frag 或内联 GLSL 字符串，直接打开就是纯文本。必须手动绑定语法类型：
- 通过
Package Control安装GLSL插件（作者 slevesque），它提供关键字识别、基础结构补全和错误提示支持 - 右下角点击当前语法名称 →
Open all with current extension as…→ 选择GLSL，为.vert和.frag分别设置 - 若仍无高亮，检查插件是否被禁用：菜单
Preferences → Package Control → Disable Package列表里不能出现GLSL - 注意：某些旧版
.sublime-syntax文件会覆盖 scope，导致 GLSL 高亮被压制——可临时切换为默认Monokai主题验证是否为语法冲突
Three.js 变量（如 vUv、cameraPosition）不补全？别指望插件开箱即用
GLSL 插件只覆盖 OpenGL ES 标准关键字，Three.js 注入的变量（vUv、vNormal、modelViewMatrix 等）不在其词典中。补全需手动干预：
- 在
Packages/User/下新建GLSL.sublime-snippet，内容示例：<snippet><content></content><tabtrigger>vu</tabtrigger><scope>source.glsl</scope></snippet>
- 或使用
ShaderLab类插件（需适配 Sublime 4+），但要注意其补全逻辑可能与 Three.js r152+ 后的变量注入规则不一致 - 更稳妥的做法是：把常用变量写成注释块放在着色器顶部，靠视觉提示替代补全，避免因补全错位引入编译错误
外置着色器文件加载失败？路径和加载时机比语法更重要
Three.js 中用 THREE.FileLoader 加载 .vert/.frag 是推荐做法，但本地开发时容易卡在路径或 CORS 上：
- 确保服务器启动：直接双击 HTML 会触发浏览器 CORS 策略，必须用
python3 -m http.server 8000或 Live Server 插件启动 - 路径要相对
index.html，不是相对于 JS 文件——例如shaders/rock.vert要放在与 HTML 同级的shaders/目录下 - 加载后务必调用
onBeforeCompile检查注入变量是否就位，比如material.onBeforeCompile = (shader) => { console.log(shader.vertexShader); }，避免白屏却无报错 - 别在
init()前就调用FileLoader.load()，否则 Three.js 渲染器未初始化会导致shader.uniforms引用为空
调试着色器输出黑屏？SpectorJS + onBeforeCompile 是唯一直观路径
GLSL 错误不会像 JS 那样抛异常，黑屏、白屏、颜色异常都是典型信号。仅靠肉眼读代码效率极低：
- Chrome 浏览器安装
SpectorJS扩展，打开开发者工具 →Spector标签页 → 点击录制，再触发渲染帧，即可查看实际提交给 GPU 的vertexShader和fragmentShader源码 - 在
onBeforeCompile回调中打印shader.vertexShader，对比原始.vert文件，确认#include是否被正确展开、Three.js 注入的uniform是否存在 - 常见坑：
precision缺失（WebGL 1.0 必须声明）、gl_FragColor写成gl_Color、vUv在片元着色器里直接用而没从顶点着色器传入
真正容易被忽略的是：Sublime 里看着语法完美高亮的 .frag，一旦加载进 Three.js，就进入了 WebGL 编译管线——那里没有自动补全，没有悬停提示，只有 gl.getShaderInfoLog() 返回的一行错误。所以编辑器配置只是起点，调试闭环必须落在浏览器里。
