必须用开发服务器（live server或vite）解决file://协议禁用模块导入问题；安装@types/three并配置jsconfig.json/tsconfig.json后重启vscode以启用three.补全；安装gltf tools插件并确保.glb为嵌入纹理的单文件以启用右键预览。
直接双击 HTML 文件跑不起来 Three.js，import * as THREE from 'three' 会报 Failed to resolve module specifier "three"；VSCode 默认也不给 THREE. 补全，.glb 右键没 “Preview 3D Model” 选项——这三个问题必须一起解决，缺一不可。
为什么 THREE. 没补全？光装 three 不够
VSCode 不认识 THREE 的类型，只靠 npm install three 是白搭。补全依赖显式类型定义和项目配置双重触发：
- 运行
npm install --save-dev @types/three（注意是--save-dev，不是--save） - 确保项目根目录存在
jsconfig.json（JavaScript 项目）或tsconfig.json（TypeScript 项目），内容可以为空：{} - 如果用了
vite，检查vite.config.js里没写死resolve.alias覆盖three/addons/路径 - 装完后必须 完全关闭并重启 VSCode 窗口（不是“重载窗口”），否则补全不生效
验证方式：打开任意 .js 文件，输入 THREE.，看是否弹出 Scene、Mesh、Vector3 等完整列表。若无提示，先去终端执行 ls node_modules/@types/three 确认文件夹真实存在。
为什么右键没有 “Preview 3D Model”？格式和插件要对得上
VSCode 本身不渲染模型，所有预览都靠扩展在 WebView 里跑轻量渲染器。“没右键菜单”大概率是插件没识别到后缀，或你选错了格式：
- 只装
glTF Tools（Microsoft 官方维护），别用3D Preview或其他小众插件——它对动画、PBR 材质、灯光节点支持最稳 - 预览最可靠的是
.glb（单文件封装）和.gltf（JSON + 外部二进制）；.obj常因.mtl路径错或缺失纹理而黑屏；.stl只有几何体，无颜色无 UV，纯看结构 - 若右键无选项，进 VSCode 设置搜
files.associations，临时加一行"*.glb": "plaintext"再删掉，强制插件重载识别 -
.glb必须是导出时勾了 “Embed textures” 的单文件，别用勾了 “Separate textures” 的 GLTF
预览黑屏？按 Ctrl+Shift+U 打开 Output 面板，选 glTF Tools 查日志，常见错误如 UNDEFINED_VERTEX_ATTRIBUTE，说明模型本身导出异常，不是插件问题。
为什么双击 HTML 报错？file:// 协议下模块加载被浏览器禁止
浏览器出于安全策略，彻底禁用 file:// 协议下的 ES 模块加载（import）、跨域资源（纹理、GLTF）、CORS 请求。这不是 Three.js 的锅，是浏览器铁律：
- 必须用开发服务器，Live Server 扩展 最快：右键
index.html→ “Open with Live Server”，端口固定5500，适合单页快速验证 - 中大型项目必须用 Vite：运行
npm create vite@latest选vanilla或javascript，再npm install three @types/three，启动npm run dev（默认localhost:5173） - 别碰
parcel或原生http-server：前者对three/addons/controls/OrbitControls.js这类路径解析不稳定；后者压根不支持模块导入
HTML 中必须用 <script type="module" src="./main.js"></script>，且 main.js 里写 import * as THREE from 'three' —— 这套写法只有开发服务器能跑通。
着色器文件 .frag/.vert 怎么高亮？两步手动绑定
VSCode 默认把 .frag 当纯文本，内联着色器字符串也不识别。语法高亮要手动干预：
- 装扩展
GLSL（作者cadenas，IDcadenas.vscode-glsllint），别装带 linter 功能的变体，它们会把#include <common></common>误判为错误 - 打开一个
shader.frag文件 → 点右下角语言模式（显示 “Plain Text”）→ “Configure File Association for '.frag'” → 输入glsl回车；对.vert和.glsl同样操作 - 内联写法必须加注释触发识别：
`// language=glsl\nprecision highp float;...`，// language=glsl必须紧贴反引号前，中间不能有空格
补全和预览能工作，不代表着色器逻辑就对——.frag 高亮只是第一步，真正调试还得靠浏览器控制台的 WebGL 错误，或者用 WebGL Inspector 插件抓帧。
