第03章：在线编辑器使用入门与视图操作
本章带你打开 SuperSplat 编辑器、加载第一个高斯模型，并熟练掌握视图与相机操作——这是后续所有编辑工作的前提。
1. 打开编辑器
直接访问官方在线版本即可，无需安装：
首次打开时，浏览器会加载应用并注册 Service Worker（PWA，支持离线再次访问）。建议使用 Chrome、Edge 或其他基于 Chromium 的现代浏览器，并确保 GPU 加速已开启（WebGL2 / WebGPU）。
提示：因为它是 PWA，你还可以在地址栏点击“安装”，把 SuperSplat 作为本地应用安装到系统中，获得近似桌面软件的体验。
2. 界面布局总览
进入编辑器后，界面大致分为以下区域（对应源码 src/ui/ 下的各面板）：
- 顶部菜单（menu）：文件、选择、相机、帮助等下拉菜单（
src/ui/menu.ts）； - 左侧场景面板（scene-panel）：模型列表、变换信息（
src/ui/scene-panel.ts、splat-list.ts）； - 右侧工具栏（right-toolbar）：选择/变换工具按钮（
src/ui/right-toolbar.ts）； - 底部工具栏（bottom-toolbar）：常用操作、模式切换（
src/ui/bottom-toolbar.ts）； - 中央视口（canvas）：3D 渲染区域，显示高斯模型；
- 视图立方体（View Cube）：右上角的方向指示与快速对正控件（
src/ui/view-cube.ts）； - 底部时间轴面板（timeline-panel）：相机动画编辑（
src/ui/timeline-panel.ts，可开关）； - 数据面板（data-panel）：直方图与属性筛选（
src/ui/data-panel.ts，可开关）。
3. 加载高斯模型
SuperSplat 通过 src/file-handler.ts 与 src/drop-handler.ts 处理文件输入，支持三种方式：
- 拖拽：把
.ply/.splat/.sog等文件直接拖入浏览器窗口； - 菜单打开：顶部菜单
文件（File）→ 打开（Open），选择本地文件； - URL 参数 / 启动队列：通过链接参数或 PWA 的
launchQueue关联文件打开。
支持的输入格式包括标准 PLY、压缩 PLY、.splat、SOG/.json，以及多帧 PLY 序列（第 02 章已介绍）。如果你还没有素材，可以：
- 用 Postshot / Nerfstudio / Inria gaussian-splatting 自行训练；
- 从公开数据集或社区分享的
.ply获取； - 使用官方示例模型进行练习。
加载较大的模型时，界面会显示进度（src/ui/progress.ts / spinner.ts）。加载完成后，模型出现在视口中央，并在左侧场景面板的模型列表中列出。
4. 相机控制：两种导航模式
相机是 SuperSplat 体验的核心，源码集中在 src/camera.ts 与 src/controllers.ts。编辑器提供两种导航模式，可用快捷键 V（camera.toggleControlMode）切换：
4.1 轨道模式（Orbit，默认）
围绕一个焦点旋转观察，适合检视模型：
- 旋转：按住鼠标左键拖动；
- 平移：按住鼠标右键（或中键）拖动；
- 缩放：鼠标滚轮，或双指捏合（触控板/触屏）；
- 对焦：按
F（camera.focus），把相机焦点对准当前选区或模型中心。
4.2 飞行模式（Fly / 第一人称）
像第一人称游戏一样在场景中自由穿行，适合大场景巡游与寻找漂浮物：
- 按住鼠标右键并使用 WASD 移动（源码用物理键码
KeyW/KeyA/KeyS/KeyD，兼容非 QWERTY 键盘）； Q下降、E上升（camera.fly.down/camera.fly.up）；- 按住
Shift加速（camera.modifier.fast），按住Alt减速（camera.modifier.slow）； - 移动鼠标控制视角朝向。
4.3 视图立方体与对正
右上角的 View Cube 显示当前朝向，点击其面/边/角可快速把相机对正到正视、俯视、侧视等标准视角，便于精确裁剪与对齐。
5. 显示选项与叠加层
通过相机/视图设置（src/ui/view-panel.ts、scene-config.ts）可调整观察体验：
- 切换叠加层（overlay）：
Tab（camera.toggleOverlay），显示/隐藏辅助叠加信息； - 切换渲染模式：
M（camera.toggleMode），在不同显示模式间切换（例如带色/调试视图）； - 网格显示：
G（grid.toggleVisible）开关地面无限网格（src/infinite-grid.ts）； - 重置相机：
Shift + F（camera.reset）回到初始视角； - 背景色、视场角（FOV）、色调映射等可在视图设置面板中调整。
6. 常用快捷键速查
SuperSplat 的全部快捷键定义在 src/shortcut-manager.ts 的 defaultShortcuts 中（Mac 上 Ctrl 对应 ⌘）。下表为常用快捷键：
| 功能 | 快捷键 | 事件 ID |
|---|---|---|
| 对焦选区/模型 | F |
camera.focus |
| 重置相机 | Shift + F |
camera.reset |
| 切换导航模式 | V |
camera.toggleControlMode |
| 切换叠加层 | Tab |
camera.toggleOverlay |
| 切换渲染模式 | M |
camera.toggleMode |
| 切换网格 | G |
grid.toggleVisible |
| 隐藏选区 | H |
select.hide |
| 取消隐藏 | Shift + H |
select.unhide |
| 全选 | Ctrl + A |
select.all |
| 取消选择 | Ctrl + Shift + A |
select.none |
| 反选 | Ctrl + I |
select.invert |
| 删除选区 | Delete / Backspace |
select.delete |
| 移动工具 | 1 |
tool.move |
| 旋转工具 | 2 |
tool.rotate |
| 缩放工具 | 3 |
tool.scale |
| 矩形选择 | R |
tool.rectSelection |
| 套索选择 | L |
tool.lassoSelection |
| 多边形选择 | P |
tool.polygonSelection |
| 画笔选择 | B |
tool.brushSelection |
| 洪水填充选择 | O |
tool.floodSelection |
| 滴管选择 | Ctrl + E |
tool.eyedropperSelection |
| 画笔缩小 / 放大 | [ / ] |
tool.brushSelection.smaller/bigger |
| 退出当前工具 | Esc |
tool.deactivate |
| 切换坐标系 | Shift + C |
tool.toggleCoordSpace |
| 撤销 / 重做 | Ctrl + Z / Ctrl + Shift + Z |
edit.undo/redo |
| 数据面板开关 | Ctrl + D |
dataPanel.toggle |
| 时间轴面板开关 | Ctrl + T |
timelinePanel.toggle |
| 播放/暂停动画 | Space |
timeline.togglePlay |
在编辑器内可通过
帮助 → 键盘快捷键（src/ui/shortcuts-popup.ts）随时查看完整列表。注意：快捷键仅在焦点位于画布（document.body）时生效，输入框聚焦时不会触发。
7. 第一次操作建议流程
熟悉界面后，建议用一个真实模型走一遍“看模型”流程：
- 拖入一个
.ply模型，等待加载完成； - 用轨道模式（左键旋转、滚轮缩放）从各个角度观察；
- 按
F对焦，按Shift + F复位； - 切到飞行模式（
V），用 WASD 在场景里穿行，找出背景噪点与漂浮物； - 用 View Cube 切到正视/俯视，观察模型边界；
- 按
G打开网格，判断模型的“地面”和比例是否合理。
完成这一步，你就对模型的“病灶”（噪点、漂浮物、朝向问题）有了直观认识，为下一章的选择与清理做好准备。
8. 本章小结
本章介绍了如何打开 SuperSplat、界面布局、加载模型，以及最重要的相机与视图操作：轨道模式与飞行模式的导航方式、视图立方体、显示选项与一整套快捷键。熟练的视图操作是高效编辑的基础。
下一章我们将系统学习各种选择工具，并把选区转化为隐藏、删除等编辑动作。