Shadow Editor Pro 用户界面

本章详细介绍 Shadow Editor Pro 的用户界面各个部分。

界面概览

Shadow Editor Pro 的主界面由以下几个部分组成：

┌─────────────────────────────────────────────────────────────┐
│  菜单栏              │                                  │
├─────────────────────────────────────────────────────────────┤
│ 工│                     │                                  │
│ 具│    3D 视图区域       │     资源面板                   │
│ 栏│    (主要工作区)      │     (场景/模型/贴图等)          │
│   │                     │                                  │
├─────────────────────────────────────────────────────────────┤
│ 侧边栏 (属性/层级/脚本) │                                  │
├─────────────────────────────────────────────────────────────┤
│  状态栏                                            │
└─────────────────────────────────────────────────────────────┘

菜单栏

菜单栏位于窗口顶部，包含各种功能菜单。

场景菜单

场景
├── 新建 (Ctrl+N)
├── 打开 (Ctrl+O)
├── 保存 (Ctrl+S)
├── 另存为...
├── ──────────
├── 导入
│   ├── 导入模型
│   └── 导入模型文件夹
├── ──────────
├── 发布场景
├── 导出场景
│   └── GLTF/GLB/OBJ/PLY/STL/Collada
└── 退出

功能说明：

• 新建: 创建新场景
• 打开: 打开已保存的场景
• 保存: 保存当前场景
• 另存为: 另存为新场景
• 导入模型: 导入单个模型文件
• 导入模型文件夹: 导入包含多个文件的模型
• 发布场景: 将场景发布为独立HTML应用
• 导出场景: 将场景导出为指定格式

编辑菜单

编辑
├── 撤销 (Ctrl+Z)
├── 重做 (Ctrl+Y)
├── ──────────
├── 剪切 (Ctrl+X)
├── 复制 (Ctrl+C)
├── 粘贴 (Ctrl+V)
├── ──────────
├── 删除 (Delete)
├── ──────────
├── 全选 (Ctrl+A)
├── 取消选择 (Esc)
└── 清空场景

功能说明：

• 撤销/重做: 撤销或重做上一步操作
• 剪切/复制/粘贴: 剪切、复制或粘贴对象
• 删除: 删除选中的对象
• 全选: 选择场景中所有对象
• 取消选择: 取消当前选择
• 清空场景: 清除场景中所有对象

物体菜单

物体
├── 基本几何体
│   ├── 平面
│   ├── 正方体
│   ├── 圆
│   ├── 圆柱体
│   ├── 球体
│   ├── 二十面体
│   ├── 圆环面
│   ├── 圆环结
│   ├── 茶壶
│   └── 车床
├── 文字
│   ├── 3D文字
│   └── 不缩放文字
├── 曲线
│   ├── 线段
│   ├── CatmullRom曲线
│   ├── 二次贝塞尔曲线
│   ├── 三次贝塞尔曲线
│   └── 椭圆曲线
├── 标注
│   └── 点标注
├── 帮助器
│   ├── 箭头帮助器
│   └── 轴帮助器
├── 组
└── 精灵

功能说明：

• 基本几何体: 创建各种基本几何体
• 文字: 创建3D文字或2D文字
• 曲线: 创建各种曲线
• 标注: 创建标注
• 帮助器: 创建帮助器
• 组: 创建组，用于组织对象
• 精灵: 创建精灵（始终面向相机的平面）

光源菜单

光源
├── 环境光
├── 平行光
├── 点光源
├── 聚光灯
├── 半球光
└── 矩形光

功能说明：

• 环境光: 添加环境光（无方向的全局光照）
• 平行光: 添加平行光（类似太阳光）
• 点光源: 添加点光源（从一点向四面八方发光）
• 聚光灯: 添加聚光灯（有方向和范围的光）
• 半球光: 添加半球光（天空到地面的渐变光照）
• 矩形光: 添加矩形面光源

资源菜单

资源
├── 场景
├── 模型
├── 材质
├── 动画
├── 音频
├── 视频
├── 贴图
├── 字体
├── 截图
└── 分类

功能说明：

• 点击各子菜单打开相应的资源面板选项卡

组件菜单

组件
├── 背景音乐
└── 天空
    ├── 天空盒
    ├── 天空球
    └── HDR

功能说明：

• 背景音乐: 为场景添加背景音乐
• 天空: 添加天空效果（天空盒/天空球/HDR）

播放菜单

播放
├── 播放 (F5)
├── 停止 (Esc)
└── ──────────
└── 重置播放

功能说明：

• 播放: 播放当前场景
• 停止: 停止播放
• 重置播放: 重置播放到初始状态

可视化菜单

可视化
├── 数据
├── 图层
├── 标注
├── 流水线
└── 场景漫游

功能说明：

• 数据: 打开数据管理面板
• 图层: 打开图层控制面板
• 标注: 打开标注管理面板
• 流水线: 打开流水线管理面板
• 场景漫游: 打开场景漫游面板

工具菜单

工具
├── 距离测量
├── 角度测量
├── 面积测量
├── ──────────
├── 点绘制
├── 线绘制
├── 面绘制
├── ──────────
└── 贴花

功能说明：

• 距离/角度/面积测量: 测量工具
• 点/线/面绘制: 绘制工具
• 贴花: 贴花工具

视图菜单

视图
├── 透视图 (F1)
├── 正视图 (F2)
├── 顶视图 (F3)
├── 侧视图 (F4)
├── ──────────
├── 线框模式
└── 重置视图 (Home)

功能说明：

• 透视图/正视图/顶视图/侧视图: 切换不同视图
• 线框模式: 切换线框显示模式
• 重置视图: 重置相机到初始位置

选项菜单

选项
├── 背景设置
├── 雾效设置
├── 后期处理
├── 控制器设置
├── ──────────
├── 场景设置
└── 编辑器设置

功能说明：

• 背景设置: 设置场景背景
• 雾效设置: 设置雾效
• 后期处理: 设置后期处理效果
• 控制器设置: 选择相机控制器类型
• 场景设置: 设置场景选项（自动保存、物理引擎等）
• 编辑器设置: 设置编辑器选项

帮助菜单

帮助
├── 用户手册
├── API文档
├── ──────────
├── 官方网站
├── 检查更新
├── ──────────
└── 关于

功能说明：

• 用户手册: 打开用户手册
• API文档: 打开API文档
• 官方网站: 打开官方网站
• 检查更新: 检查程序更新
• 关于: 显示关于信息

工具栏

工具栏位于菜单栏下方，提供常用工具的快速访问。

常用工具

┌───┬───┬───┬───┬───┬───┬───┐
│撤销│重做│复制│粘贴│删除│全选│清空│
└───┴───┴───┴───┴───┴───┴───┘

编辑工具

┌─────┬─────┬─────┐
│ 选择│ 移动 │ 旋转 │ 缩放 │
└─────┴─────┴─────┘

快捷键：

• Q: 选择工具
• W: 移动工具
• E: 旋转工具
• R: 缩放工具

绘制工具

┌──────┬──────┬──────┐
│ 点绘制 │ 线绘制 │ 面绘制 │
└──────┴──────┴──────┘

测量工具

┌──────┬──────┬──────┐
│ 距离 │ 角度 │ 面积 │
└──────┴──────┴──────┘

标注工具

┌──────┬──────┐
│ 点标注 │ 线标注 │
└──────┴──────┘

其他工具

┌───┬───┬───┐
│截图│录屏│帮助│
└───┴───┴───┘

资源面板

资源面板位于界面右侧，用于管理各种资源。

场景选项卡

显示所有已保存的场景：

┌────────────────────────────────┐
│ [+新建] [分类] [搜索]      │
├────────────────────────────────┤
│ ┌────┐ 旋转正方体           │
│ │缩略│ 分类: 默认           │
│ │图  │ 时间: 2024-10-19     │
│ └────┤ [加载] [编辑] [删除] │
├────────────────────────────────┤
│ ┌────┐ 测试场景             │
│ │缩略│ 分类: 测试           │
│ │图  │ 时间: 2024-10-19     │
│ └────┤ [加载] [编辑] [删除] │
└────────────────────────────────┘

操作：

• 新建: 创建新场景
• 分类: 管理场景分类
• 搜索: 搜索场景
• 加载: 加载场景
• 编辑: 编辑场景信息
• 删除: 删除场景

模型选项卡

显示所有已上传的模型：

┌────────────────────────────────┐
│ [上传] [分类] [搜索]        │
├────────────────────────────────┤
│ ┌────┐ 立方体               │
│ │预览│ 格式: GLTF            │
│ │图  │ 大小: 1.2 MB          │
│ └────┤ [预览] [下载] [删除] │
├────────────────────────────────┤
│ ┌────┐ 球体                 │
│ │预览│ 格式: GLTF            │
│ │图  │ 大小: 0.8 MB          │
│ └────┤ [预览] [下载] [删除] │
└────────────────────────────────┘

操作：

• 上传: 上传模型文件
• 分类: 管理模型分类
• 搜索: 搜索模型
• 预览: 3D预览模型
• 下载: 下载模型文件
• 删除: 删除模型

材质选项卡

显示所有已保存的材质：

┌────────────────────────────────┐
│ [+新建] [分类] [搜索]       │
├────────────────────────────────┤
│ ┌────┐ 红色材质             │
│ │材质│ 数据: {...}           │
│ │球  │ 分类: 默认           │
│ └────┤ [应用] [编辑] [删除] │
├────────────────────────────────┤
│ ┌────┐ 蓝色材质             │
│ │材质│ 数据: {...}           │
│ │球  │ 分类: 默认           │
│ └────┤ [应用] [编辑] [删除] │
└────────────────────────────────┘

操作：

• 新建: 创建新材质
• 分类: 管理材质分类
• 搜索: 搜索材质
• 应用: 将材质应用到选中的对象
• 编辑: 编辑材质信息
• 删除: 删除材质

其他资源选项卡

动画、音频、视频、贴图、字体、截图 选项卡的布局类似。

侧边栏

侧边栏位于界面左侧，包含多个面板。

层级面板

显示场景对象的树状结构：

┌────────────────────────────────┐
│ [刷新] [展开/折叠]           │
├────────────────────────────────┤
│ ▼ Scene                      │
│   ▼ 相机                    │
│     • PerspectiveCamera      │
│   ▼ 灯光                    │
│     • 环境光               │
│     • 平行光               │
│   ▼ 组1                     │
│     • 正方体                │
│     • 球体                  │
└────────────────────────────────┘

操作：

• 拖动对象调整层次关系
• 双击对象名称重命名
• 右键菜单（复制、删除等）

属性面板

显示选中对象的属性：

┌────────────────────────────────┐
│ 基本信息                     │
├────────────────────────────────┤
│ 名称: [正方体               ] │
│ UUID: xxx-xxx-xxx            │
│ 可见: [√]                    │
│ 剔除: [  ]                   │
├────────────────────────────────┤
│ 变换                         │
├────────────────────────────────┤
│ 位置 X: [0.00] Y: [0.00] Z: [0.00] │
│ 旋转 X: [0.00] Y: [0.00] Z: [0.00] │
│ 缩放 X: [1.00] Y: [1.00] Z: [1.00] │
├────────────────────────────────┤
│ 几何体                       │
├────────────────────────────────┤
│ 类型: BoxGeometry             │
│ 宽度: [1.00]                 │
│ 高度: [1.00]                 │
│ 深度: [1.00]                 │
├────────────────────────────────┤
│ 材质                         │
├────────────────────────────────┤
│ 类型: MeshStandardMaterial     │
│ 颜色: [选择...]              │
│ 金属度: [0.5]                │
│ 粗糙度: [0.5]                │
│ [保存到材质库] [从材质库加载]   │
└────────────────────────────────┘

组件：

• 基本信息: 对象的基本属性
• 变换: 位置、旋转、缩放
• 几何体: 几何体参数
• 材质: 材质参数
• 背景: 背景设置
• 雾效: 雾效设置
• 动画: 动画参数
• 物理: 物理参数

脚本面板

编辑和管理脚本：

┌────────────────────────────────┐
│ [+新建脚本] [+新建文件夹]    │
├────────────────────────────────┤
│ ▼ 脚本                      │
│   ▼ 主脚本                  │
│     • 旋转脚本 [编辑] [删除]  │
│     • 移动脚本 [编辑] [删除]  │
│   ▼ 工具脚本                │
│     • 辅助脚本 [编辑] [删除]  │
└────────────────────────────────┘

[编辑脚本]
┌────────────────────────────────┐
│ function init() {            │
│     console.log('初始化');   │
│ }                           │
│                             │
│ function update(delta) {     │
│     // 每帧更新             │
│ }                           │
└────────────────────────────────┘
[保存] [关闭]

操作：

• 新建脚本: 创建新脚本文件
• 新建文件夹: 创建文件夹组织脚本
• 编辑: 打开脚本编辑器
• 删除: 删除脚本

历史面板

显示操作历史记录：

┌────────────────────────────────┐
│ [撤销] [重做] [清空历史]    │
├────────────────────────────────┤
│ 2024-10-19 10:30:15        │
│ • 移动物体: 正方体          │
│                              │
│ 2024-10-19 10:30:10        │
│ • 创建物体: 正方体          │
│                              │
│ 2024-10-19 10:30:05        │
│ • 添加材质: 红色材质        │
└────────────────────────────────┘

操作：

• 点击历史记录可以回到该状态
• 使用撤销/重做按钮快速操作

3D 视图区域

3D 视图区域是主要的工作区，用于编辑和预览场景。

视图操作

鼠标操作：

• 左键拖动: 旋转视角
• 右键拖动: 平移视角
• 滚轮: 缩放
• 左键点击: 选择对象
• Shift+左键: 多选
• Shift+左键拖动: 框选

键盘快捷键：

• F: 聚焦到选中对象
• Home: 重置视图
• F1-F4: 切换视图

视图模式

透视图（默认）：

• 真实的3D透视效果
• 适合场景编辑

正视图：

• 从正前方观察
• 没有透视效果

顶视图：

• 从上方俯视
• 适合平面布局

侧视图：

• 从侧面观察
• 适合侧面布局

线框模式：

• 仅显示线条
• 不显示面和材质

状态栏

状态栏位于窗口底部，显示重要信息。

┌─────────────────────────────────────────────────────────────┐
│ r166  X:123 Y:456  物体:5 顶点:1240 三角形:2080          │
│ [√]自动保存 [ ]物理引擎 [ ]数据可视化 [ ]虚拟现实        │
│ [设为默认视角] [重置初始视角] [VR设置] [FPS: 60]          │
└─────────────────────────────────────────────────────────────┘

信息显示

第一行信息：

• r166: Three.js 版本
• X:123 Y:456: 鼠标在画布上的坐标
• 物体:5: 场景中的物体数量
• 顶点:1240: 场景中的顶点数量
• 三角形:2080: 场景中的三角形数量

第二行选项：

• 自动保存: 每10秒自动保存场景
• 物理引擎: 启用物理引擎
• 数据可视化: 启用数据可视化
• 虚拟现实: 启用VR功能

第三行按钮：

• 设为默认视角: 设置当前视角为默认视角
• 重置初始视角: 恢复到默认视角
• VR设置: VR设置
• FPS: 60: 当前帧率

界面自定义

显示/隐藏面板

• 按 Space 键隐藏/显示所有面板
• 使用菜单栏中的命令显示/隐藏特定面板
• 拖动面板边缘调整大小

面板布局

• 可以拖动面板到不同位置
• 支持标签页方式组织面板
• 可以创建新的面板布局

主题设置

在选项菜单中选择编辑器设置：

• 选择亮色/暗色主题
• 自定义颜色
• 调整字体大小

快速访问常用功能

选中对象

1. 在 3D 视图中直接点击对象
2. 在层级面板中选择对象
3. 使用搜索功能查找对象

编辑对象

1. 选中对象
2. 在属性面板中修改属性
3. 或使用工具栏中的编辑工具

保存场景

1. 点击菜单栏 → 场景 → 保存
2. 或按 Ctrl+S

播放场景

1. 点击菜单栏 → 播放 → 播放
2. 或按 F5

下一步

• 📖 学习快速入门
• 🎓 了解功能说明
• 🚀 探索高级功能