Shadow Editor Pro 功能说明
本章详细介绍 Shadow Editor Pro 的各项功能和使用方法。
资源管理
Shadow Editor Pro 提供完整的资源管理系统,支持多种类型的资源管理。
场景管理
新建场景
- 点击菜单栏 场景 → 新建(快捷键:
Ctrl+N) - 系统会创建一个空场景
- 原场景未保存时会提示是否保存
保存场景
- 点击菜单栏 场景 → 保存(快捷键:
Ctrl+S) - 输入场景名称
- 选择分类(可选)
- 上传缩略图(可选)
- 点击确定保存
自动保存:
- 勾选状态栏的 自动保存 选项
- 系统每10秒自动保存一次
- 刷新或重新打开时会提示是否加载自动保存的场景
加载场景
- 在资源面板的 场景 选项卡中找到目标场景
- 点击 加载 按钮
- 场景会加载到编辑器中
场景历史版本
- 在资源面板中右键点击场景
- 选择 查看历史版本
- 可以看到该场景的所有历史版本
- 点击某个版本可以加载该版本
场景分类
- 在资源面板中点击 分类 按钮
- 可以创建、编辑、删除场景分类
- 分类可以帮助更好地组织场景
模型管理
支持的模型格式
Shadow Editor Pro 支持40+种模型格式,包括:
| 格式 | 扩展名 | 说明 |
|---|---|---|
| 3D Studio | .3ds |
经典3D模型格式 |
| 3D Manufacturing | .3mf |
3D打印格式 |
| Autodesk FBX | .fbx |
动画模型格式 |
| GLTF | .gltf, .glb |
WebGL标准格式(推荐) |
| Wavefront OBJ | .obj |
通用模型格式 |
| Collada | .dae |
动画模型格式 |
| STL | .stl |
3D打印格式 |
| Three.js JSON | .js, .json |
Three.js格式 |
完整列表请参考附录 - 支持的模型格式
上传模型
单个文件上传:
- 点击菜单栏 物体 → 导入模型
- 选择模型文件
- 等待上传和加载
文件夹上传(适用于多文件模型):
- 点击菜单栏 物体 → 导入模型文件夹
- 选择包含模型的文件夹
- 选择主模型文件
- 系统自动识别相关文件
模型预览
在资源面板中:
- 鼠标悬停在模型上可以预览缩略图
- 点击 预览 按钮可以3D预览模型
- 点击 下载 按钮可以下载模型文件
模型编辑
选中模型后,可以通过属性面板编辑:
- 基本信息名称、可见性等)
- 变换(位置、旋转、缩放)
- 材质(替换或修改材质)
贴图管理
支持的贴图类型
- 普通贴图:
.png,.jpg,.gif,.webp - 天空盒: 需要6张图片(px/nx/py/ny/pz/nz)
- 天空球: 全景球体贴图
- HDR贴图:
.hdr高动态范围图像 - 视频贴图:
.mp4,.webm视频文件
上传贴图
- 点击资源面板的 贴图 选项卡
- 点击 上传 按钮
- 选择贴图文件(支持多选)
- 选择贴图类型
- 上传
天空盒上传:
- 一次性选择6张图片
- 文件名需包含方向标识:px, nx, py, ny, pz, nz
- 系统会自动识别并创建天空盒
材质管理
保存材质到库
- 选中一个模型
- 在属性面板中编辑材质
- 点击 保存到材质库 按钮
- 输入材质名称
- 选择分类
- 保存
从材质库加载
- 选中一个模型
- 在属性面板中点击 从材质库加载
- 选择要应用的材质
- 点击确定
材质类型
Shadow Editor Pro 支持20+种材质类型:
- 基础材质: BasicMaterial, MeshBasicMaterial
- 标准材质: MeshStandardMaterial, MeshPhysicalMaterial
- 卡通材质: ToonMaterial
- 着色器材质: ShaderMaterial
- 精灵材质: SpriteMaterial
- 线条材质: LineBasicMaterial, LineDashedMaterial
音频管理
上传音频
- 点击资源面板的 音频 选项卡
- 点击 上传 按钮
- 选择音频文件(mp3/wav/ogg)
- 输入音频名称
- 上传
添加背景音乐
- 点击菜单栏 组件 → 背景音乐
- 在属性面板中选择音频
- 设置音量、循环等参数
- 播放场景时背景音乐会自动播放
音频格式支持
- MP3 (
.mp3) - WAV (
.wav) - OGG (
.ogg)
动画管理
上传动画
- 点击资源面板的 动画 选项卡
- 点击 上传 按钮
- 选择动画文件(vmd/vpd)
- 输入动画名称
- 上传
动画类型
- VMD: MikuMikuDance 动画文件
- VPD: MikuMikuDance 姿态文件
为模型添加动画
- 选中一个支持动画的模型(如PMD/PMX)
- 在属性面板的 动画 组件中
- 选择要应用的动画
- 设置播放参数(速度、循环等)
字体管理
上传字体
- 点击资源面板的 字体 选项卡
- 点击 上传 按钮
- 选择字体文件(ttf/otf/json)
- 上传
字体格式
- TrueType Font (
.ttf) - OpenType Font (
.otf) - Typeface JSON (
.json)
创建3D文字
- 点击菜单栏 物体 → 文字 → 3D文字
- 在属性面板中:
- 输入文字内容
- 选择字体
- 设置大小、深度等参数
- 3D文字会显示在场景中
截图管理
截图
- 点击工具栏的 截图 按钮
- 或者使用快捷键
Ctrl+P - 截图会自动保存到截图库
查看截图
- 点击资源面板的 截图 选项卡
- 可以查看所有截图
- 点击可以预览大图
- 可以下载或删除截图
场景编辑
场景设置
背景设置
- 点击菜单栏 选项 → 背景
- 或在属性面板中点击 背景 组件
- 选择背景类型:
- 纯色: 选择背景颜色
- 图片: 上传一张背景图
- 天空盒: 使用6图天空盒
- 天空球: 使用全景球体贴图
- HDR: 使用HDR贴图
- 视频: 使用视频作为背景
雾效设置
-
在属性面板中点击 雾效 组件
-
选择雾效类型:
- 无: 关闭雾效
- 线性: 距离越远雾越浓
- 指数: 雾随距离指数增长
-
设置雾的颜色、距离等参数
环境设置
- 点击菜单栏 选项 → 场景设置
- 可以设置:
- 自动保存(每10秒自动保存)
- 启用物理引擎
- 启用数据可视化
- 启用虚拟现实(VR)
物体编辑
选择物体
- 单击: 选择单个物体
- Shift+单击: 多选
- 框选: Shift+左键拖动框选
- 全选: Ctrl+A
- 取消选择: 点击空白处或Esc
复制物体
- 选中要复制的物体
- 按
Ctrl+C或点击 编辑 → 复制 - 按
Ctrl+V或点击 编辑 → 粘贴
删除物体
- 选中要删除的物体
- 按
Delete或点击 编辑 → 删除
物体变换
使用变换工具调整物体:
- 移动工具 (W): 调整位置
- 旋转工具 (E): 调整旋转
- 缩放工具 ®: 调整大小
组物体
- 点击菜单栏 物体 → 添加组
- 在场景层级面板中拖动物体到组上
- 组可以包含多个物体,方便管理
撤销和重做
Shadow Editor Pro 提供完整的撤销/重做功能:
撤销操作
- 快捷键:
Ctrl+Z - 菜单: 编辑 → 撤销
- 工具栏: 撤销按钮
重做操作
- 快捷键:
Ctrl+Y或Ctrl+Shift+Z - 菜单: 编辑 → 重做
- 工具栏: 重做按钮
支持的撤销/重做操作:
- 添加/删除物体
- 修改物体属性
- 移动/旋转/缩放
- 材质修改
- 场景设置修改
控制器设置
选择相机控制方式:
-
点击菜单栏 选项 → 控制器
-
选择控制器类型:
- 轨道控制器: 绕目标旋转,适合物体编辑
- 第一视角控制器: 第一人称视角,适合漫游
- 飞行控制器: 自由飞行,适合大场景
- 轨迹球控制器: 自由旋转,无极点限制
- 指针锁定控制器: 类似游戏的FPS控制
-
设置控制器参数(速度、阻尼等)
物体创建
Shadow Editor Pro 提供丰富的内置物体类型。
几何体
基本几何体
点击菜单栏 物体 → 基本几何体,可以创建:
- 平面: 二维平面
- 正方体: 立方体
- 圆: 圆形平面
- 圆柱体: 圆柱/圆锥
- 球体: 球体
- 二十面体: 二十面体
- 圆环面: 圆环
- 圆环结: 复杂的环结形状
- 茶壶: Utah茶壶模型
- 车床: 旋转体
创建参数
创建后可在属性面板调整几何体参数:
- 半径、高度、分段数等
- 颜色、材质等
文字
3D文字
- 点击菜单栏 物体 → 文字 → 3D文字
- 在属性面板中设置:
- 文本内容: 输入文字(支持中文)
- 字体: 选择字体
- 大小: 字体大小
- 深度: 文字厚度
- 曲线段数: 字体平滑度
不缩放文字
文字始终面向相机,不随相机缩放变化,适合用于标注。
曲线
Shadow Editor Pro 支持多种曲线类型:
- 线段: 两点之间的直线
- Catmull-Rom曲线: 平滑曲线
- 二次贝塞尔曲线: 二次贝塞尔曲线
- 三次贝塞尔曲线: 三次贝塞尔曲线
- 椭圆曲线: 椭圆形状
创建曲线后可以设置颜色、粗细等参数。
标注
点标注
- 点击菜单栏 物体 → 标注 → 点标注
- 在场景中点击要标注的位置
- 在属性面板中输入标注内容
- 设置颜色、大小等
帮助器
帮助器用于辅助编辑,不会在最终场景中显示:
- 箭头帮助器: 显示方向和距离
- 坐标轴帮助器: 显示坐标轴
- 网格帮助器: 显示地面网格
- 相机帮助器: 显示相机视角
光源
Shadow Editor Pro 支持多种光源类型:
环境光
- 全局光照,没有方向
- 适合作为基础光照
平行光
- 类似太阳光,有方向
- 产生阴影
- 适合室外场景
点光源
- 从一点向四面八方发光
- 产生阴影
- 适合灯泡等
聚光灯
- 像手电筒一样有方向和范围
- 产生阴影
- 适合射灯等
半球光
- 天空到地面的渐变光照
- 不产生阴影
- 适合模拟自然光
矩形光
- 矩形面光源
- 产生高质量阴影
- 适合摄影棚效果
组件
背景音乐
为场景添加背景音乐:
- 点击菜单栏 组件 → 背景音乐
- 选择音频文件
- 设置音量、循环等
天空
添加天空效果:
- 点击菜单栏 组件 → 天空
- 选择天空类型(天空盒/天空球/HDR)
- 设置参数
材质编辑
材质类型
基础材质 (MeshBasicMaterial)
- 不受光照影响
- 始终显示相同颜色
- 适合用作UI或图标
标准材质 (MeshStandardMaterial)
- 基于物理的渲染(PBR)
- 受光照影响
- 支持金属度、粗糙度
物理材质 (MeshPhysicalMaterial)
- 高级PBR材质
- 支持清漆、透光
- 更真实的渲染效果
兰伯特材质 (MeshLambertMaterial)
- 简单光照模型
- 性能较好
- 适合低多边形
冯氏材质 (MeshPhongMaterial)
- 有高光效果
- 适合塑料、金属等
卡通材质 (ToonMaterial)
- 卡通渲染效果
- 有轮廓线
- 适合卡通风格
着色器材质 (ShaderMaterial)
- 使用自定义着色器
- 完全自定义渲染
- 适合高级用户
材质属性
颜色
设置材质的漫反射颜色。
金属度
设置材质的金属属性(0=非金属,1=纯金属)。
粗糙度
设置材质的粗糙程度(0=光滑,1=粗糙)。
贴图
可以为材质添加各种贴图:
- 颜色贴图: 基础颜色
- 法线贴图: 表面细节
- 粗糙度贴图: 粗糙度变化
- 金属度贴图: 金属度变化
- 发光贴图: 自发光效果
- 环境光遮蔽贴图: 阴影细节
脚本系统
Shadow Editor Pro 内置 Monaco 编辑器(VSCode同款),支持 JavaScript 脚本编写。
创建脚本
- 点击右侧边栏的 脚本 选项卡
- 点击 新建脚本
- 输入脚本名称
- 开始编写脚本
脚本框架
新建脚本会自动生成以下框架:
/**
* 初始化函数
* 场景加载时调用一次
*/
function init() {}
/**
* 每帧更新函数
* @param {number} delta - 帧间隔时间(秒)
*/
function update(delta) {}
/**
* 窗口大小改变时调用
*/
function resize() {}
/**
* 销毁函数
* 场景销毁时调用一次
*/
function dispose() {}
/**
* 鼠标点击事件
* @param {Object} event - 事件对象
*/
function onClick(event) {}
/**
* 鼠标按下事件
* @param {Object} event - 事件对象
*/
function onMouseDown(event) {}
/**
* 鼠标移动事件
* @param {Object} event - 事件对象
*/
function onMouseMove(event) {}
/**
* 鼠标松开事件
* @param {Object} event - 事件对象
*/
function onMouseUp(event) {}
全局变量
脚本中可以使用以下全局变量:
// 播放器应用实例
app
// Three.js 全局对象
THREE
// 场景
scene
// 相机
camera
// 渲染器
renderer
常用示例
获取物体
function update(delta) {
// 通过名称获取物体
const cube = scene.getObjectByName('正方体')
if (cube) {
// 旋转物体
cube.rotation.x += delta
}
}
点击事件
function onClick(event) {
// 获取点击的物体
const object = event.object
if (object.name === '按钮') {
// 改变颜色
object.material.color.setHex(0xff0000)
}
}
键盘事件
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowUp') {
// 向上移动
camera.position.y += 1
}
})
更多示例请参考附录 - 脚本API参考
下一步
了解了基本功能后,您可以:
推荐阅读
评论 (0)
发表评论
暂无评论,快来发表第一条评论吧!