Sublime Text 可高效开发 Three.js 着色器：安装 GLSL 插件实现语法高亮与补全，外置 .vert/.frag 文件并用 THREE.FileLoader 加载，配合 onBeforeCompile 和 SpectorJS 调试，遵循 Three.js 的变量注入规范。
在 Sublime Text 中开发 Three.js 自定义着色器（Shader），核心是高效编写和调试 GLSL 顶点（vertex）与片元（fragment）程序。Sublime 本身不运行 WebGL，但可通过插件增强语法支持、实时预览配合本地服务，实现流畅的着色器开发流。
安装 GLSL 语法高亮与自动补全
Sublime 默认不识别 .glsl 或内联 GLSL 字符串。需手动配置：
- 通过 Package Control 安装 GLSL 插件（作者：slevesque），它提供完整语法高亮、着色器关键字识别和基础片段补全
- 将
.glsl、.vert、.frag文件关联到 GLSL 语法：右下角点击当前语法 → Open all with current extension as... → 选择 GLSL - 如需 Three.js 特有变量（如
vUv、vNormal、cameraPosition）补全，可自定义 snippets 或使用 ShaderLab 类插件（需轻度适配）
组织着色器代码：外置文件 + 动态加载
避免在 JavaScript 中写大段模板字符串。推荐将 GLSL 拆为独立文件，在 Three.js 中用 loader.load() 异步读取：
- 创建
shaders/terrain.vert和shaders/terrain.frag，用 Sublime 编辑，享受完整语法支持 - 用
THREE.FileLoader加载（注意：需运行在本地服务器，如python3 -m http.server，否则跨域报错） - 加载完成后组合进
THREE.ShaderMaterial，例如：new THREE.ShaderMaterial({ vertexShader: vertSrc, fragmentShader: fragSrc, uniforms: {...} })
快速验证与调试技巧
GLSL 错误不会直接报在控制台，常表现为材质黑屏或模型消失。调试要靠组合手段：
- 在片元着色器开头加
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);确认是否成功注入 - 用
console.log打印加载后的vertSrc/fragSrc，确认换行、注释未被破坏（Sublime 保存时选 Unix (LF) 换行） - Three.js 内置
material.onBeforeCompile可拦截编译前的着色器源码，方便动态插入调试语句或检查 uniform 绑定 - 浏览器开发者工具 → Rendering 面板开启 Paint flashing 或用 SpectorJS 插件捕获实际提交的 GLSL
适配 Three.js 着色器约定
Three.js 对 GLSL 有隐含规范，写错会导致静默失败：
- 顶点着色器必须声明并赋值
gl_Position；片元着色器必须赋值gl_FragColor（r152+ 支持fragColor，但建议保持兼容） - Three.js 自动注入常用变量：
uniform mat4 modelViewMatrix、uniform mat4 projectionMatrix、vUv（纹理坐标）、vNormal（世界法线）——无需自行声明，直接用 - 自定义
uniform需在 JS 中同步传入，例如：uniforms: { time: { value: 0 }, resolution: { value: new THREE.Vector2() } }
基本上就这些。Sublime 不是 IDE，但搭配合理配置，完全胜任 Three.js 着色器的轻量级开发。关键在分离源码、快速反馈、理解 Three.js 的 GLSL 封装逻辑。
