Shadow Editor Pro 功能说明

2026-01-04 超腾开源 60 次阅读 0 次点赞
本文档详细介绍了Shadow Editor Pro的核心功能与使用方法。主要内容包括资源管理、场景编辑、物体创建、材质编辑和脚本系统五大模块。资源管理涵盖场景、模型、贴图、材质、音频、动画、字体和截图的全流程操作,支持多种格式。场景编辑部分讲解了场景设置、物体编辑、撤销重做和控制器设置等基础编辑功能。物体创建介绍了内置几何体、文字、曲线、标注、帮助器和光源等丰富类型。材质编辑部分说明了各类材质特性及其属性调整。脚本系统基于Monaco编辑器,提供了JavaScript脚本编写框架和常用示例,支持通过代码实现交互与动态效果。该编辑器旨在为用户提供完整的3D场景创作与管理工具集。

本章详细介绍 Shadow Editor Pro 的各项功能和使用方法。


资源管理

Shadow Editor Pro 提供完整的资源管理系统,支持多种类型的资源管理。

场景管理

新建场景

  1. 点击菜单栏 场景新建(快捷键:Ctrl+N
  2. 系统会创建一个空场景
  3. 原场景未保存时会提示是否保存

保存场景

  1. 点击菜单栏 场景保存(快捷键:Ctrl+S
  2. 输入场景名称
  3. 选择分类(可选)
  4. 上传缩略图(可选)
  5. 点击确定保存

自动保存

  • 勾选状态栏的 自动保存 选项
  • 系统每10秒自动保存一次
  • 刷新或重新打开时会提示是否加载自动保存的场景

加载场景

  1. 在资源面板的 场景 选项卡中找到目标场景
  2. 点击 加载 按钮
  3. 场景会加载到编辑器中

场景历史版本

  1. 在资源面板中右键点击场景
  2. 选择 查看历史版本
  3. 可以看到该场景的所有历史版本
  4. 点击某个版本可以加载该版本

场景分类

  1. 在资源面板中点击 分类 按钮
  2. 可以创建、编辑、删除场景分类
  3. 分类可以帮助更好地组织场景

模型管理

支持的模型格式

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格式

完整列表请参考附录 - 支持的模型格式

上传模型

单个文件上传

  1. 点击菜单栏 物体导入模型
  2. 选择模型文件
  3. 等待上传和加载

文件夹上传(适用于多文件模型):

  1. 点击菜单栏 物体导入模型文件夹
  2. 选择包含模型的文件夹
  3. 选择主模型文件
  4. 系统自动识别相关文件

模型预览

在资源面板中:

  • 鼠标悬停在模型上可以预览缩略图
  • 点击 预览 按钮可以3D预览模型
  • 点击 下载 按钮可以下载模型文件

模型编辑

选中模型后,可以通过属性面板编辑:

  • 基本信息名称、可见性等)
  • 变换(位置、旋转、缩放)
  • 材质(替换或修改材质)

贴图管理

支持的贴图类型

  1. 普通贴图: .png, .jpg, .gif, .webp
  2. 天空盒: 需要6张图片(px/nx/py/ny/pz/nz)
  3. 天空球: 全景球体贴图
  4. HDR贴图: .hdr 高动态范围图像
  5. 视频贴图: .mp4, .webm 视频文件

上传贴图

  1. 点击资源面板的 贴图 选项卡
  2. 点击 上传 按钮
  3. 选择贴图文件(支持多选)
  4. 选择贴图类型
  5. 上传

天空盒上传

  • 一次性选择6张图片
  • 文件名需包含方向标识:px, nx, py, ny, pz, nz
  • 系统会自动识别并创建天空盒

材质管理

保存材质到库

  1. 选中一个模型
  2. 在属性面板中编辑材质
  3. 点击 保存到材质库 按钮
  4. 输入材质名称
  5. 选择分类
  6. 保存

从材质库加载

  1. 选中一个模型
  2. 在属性面板中点击 从材质库加载
  3. 选择要应用的材质
  4. 点击确定

材质类型

Shadow Editor Pro 支持20+种材质类型:

  • 基础材质: BasicMaterial, MeshBasicMaterial
  • 标准材质: MeshStandardMaterial, MeshPhysicalMaterial
  • 卡通材质: ToonMaterial
  • 着色器材质: ShaderMaterial
  • 精灵材质: SpriteMaterial
  • 线条材质: LineBasicMaterial, LineDashedMaterial

音频管理

上传音频

  1. 点击资源面板的 音频 选项卡
  2. 点击 上传 按钮
  3. 选择音频文件(mp3/wav/ogg)
  4. 输入音频名称
  5. 上传

添加背景音乐

  1. 点击菜单栏 组件背景音乐
  2. 在属性面板中选择音频
  3. 设置音量、循环等参数
  4. 播放场景时背景音乐会自动播放

音频格式支持

  • MP3 (.mp3)
  • WAV (.wav)
  • OGG (.ogg)

动画管理

上传动画

  1. 点击资源面板的 动画 选项卡
  2. 点击 上传 按钮
  3. 选择动画文件(vmd/vpd)
  4. 输入动画名称
  5. 上传

动画类型

  • VMD: MikuMikuDance 动画文件
  • VPD: MikuMikuDance 姿态文件

为模型添加动画

  1. 选中一个支持动画的模型(如PMD/PMX)
  2. 在属性面板的 动画 组件中
  3. 选择要应用的动画
  4. 设置播放参数(速度、循环等)

字体管理

上传字体

  1. 点击资源面板的 字体 选项卡
  2. 点击 上传 按钮
  3. 选择字体文件(ttf/otf/json)
  4. 上传

字体格式

  • TrueType Font (.ttf)
  • OpenType Font (.otf)
  • Typeface JSON (.json)

创建3D文字

  1. 点击菜单栏 物体文字3D文字
  2. 在属性面板中:
    • 输入文字内容
    • 选择字体
    • 设置大小、深度等参数
  3. 3D文字会显示在场景中

截图管理

截图

  1. 点击工具栏的 截图 按钮
  2. 或者使用快捷键 Ctrl+P
  3. 截图会自动保存到截图库

查看截图

  1. 点击资源面板的 截图 选项卡
  2. 可以查看所有截图
  3. 点击可以预览大图
  4. 可以下载或删除截图

场景编辑

场景设置

背景设置

  1. 点击菜单栏 选项背景
  2. 或在属性面板中点击 背景 组件
  3. 选择背景类型:
    • 纯色: 选择背景颜色
    • 图片: 上传一张背景图
    • 天空盒: 使用6图天空盒
    • 天空球: 使用全景球体贴图
    • HDR: 使用HDR贴图
    • 视频: 使用视频作为背景

雾效设置

  1. 在属性面板中点击 雾效 组件

  2. 选择雾效类型:

    • : 关闭雾效
    • 线性: 距离越远雾越浓
    • 指数: 雾随距离指数增长
  3. 设置雾的颜色、距离等参数

环境设置

  1. 点击菜单栏 选项场景设置
  2. 可以设置:
    • 自动保存(每10秒自动保存)
    • 启用物理引擎
    • 启用数据可视化
    • 启用虚拟现实(VR)

物体编辑

选择物体

  • 单击: 选择单个物体
  • Shift+单击: 多选
  • 框选: Shift+左键拖动框选
  • 全选: Ctrl+A
  • 取消选择: 点击空白处或Esc

复制物体

  1. 选中要复制的物体
  2. Ctrl+C 或点击 编辑复制
  3. Ctrl+V 或点击 编辑粘贴

删除物体

  1. 选中要删除的物体
  2. Delete 或点击 编辑删除

物体变换

使用变换工具调整物体:

  • 移动工具 (W): 调整位置
  • 旋转工具 (E): 调整旋转
  • 缩放工具 ®: 调整大小

组物体

  1. 点击菜单栏 物体添加组
  2. 在场景层级面板中拖动物体到组上
  3. 组可以包含多个物体,方便管理

撤销和重做

Shadow Editor Pro 提供完整的撤销/重做功能:

撤销操作

  • 快捷键: Ctrl+Z
  • 菜单: 编辑撤销
  • 工具栏: 撤销按钮

重做操作

  • 快捷键: Ctrl+YCtrl+Shift+Z
  • 菜单: 编辑重做
  • 工具栏: 重做按钮

支持的撤销/重做操作

  • 添加/删除物体
  • 修改物体属性
  • 移动/旋转/缩放
  • 材质修改
  • 场景设置修改

控制器设置

选择相机控制方式:

  1. 点击菜单栏 选项控制器

  2. 选择控制器类型:

    • 轨道控制器: 绕目标旋转,适合物体编辑
    • 第一视角控制器: 第一人称视角,适合漫游
    • 飞行控制器: 自由飞行,适合大场景
    • 轨迹球控制器: 自由旋转,无极点限制
    • 指针锁定控制器: 类似游戏的FPS控制
  3. 设置控制器参数(速度、阻尼等)


物体创建

Shadow Editor Pro 提供丰富的内置物体类型。

几何体

基本几何体

点击菜单栏 物体基本几何体,可以创建:

  • 平面: 二维平面
  • 正方体: 立方体
  • : 圆形平面
  • 圆柱体: 圆柱/圆锥
  • 球体: 球体
  • 二十面体: 二十面体
  • 圆环面: 圆环
  • 圆环结: 复杂的环结形状
  • 茶壶: Utah茶壶模型
  • 车床: 旋转体

创建参数

创建后可在属性面板调整几何体参数:

  • 半径、高度、分段数等
  • 颜色、材质等

文字

3D文字

  1. 点击菜单栏 物体文字3D文字
  2. 在属性面板中设置:
    • 文本内容: 输入文字(支持中文)
    • 字体: 选择字体
    • 大小: 字体大小
    • 深度: 文字厚度
    • 曲线段数: 字体平滑度

不缩放文字

文字始终面向相机,不随相机缩放变化,适合用于标注。


曲线

Shadow Editor Pro 支持多种曲线类型:

  • 线段: 两点之间的直线
  • Catmull-Rom曲线: 平滑曲线
  • 二次贝塞尔曲线: 二次贝塞尔曲线
  • 三次贝塞尔曲线: 三次贝塞尔曲线
  • 椭圆曲线: 椭圆形状

创建曲线后可以设置颜色、粗细等参数。


标注

点标注

  1. 点击菜单栏 物体标注点标注
  2. 在场景中点击要标注的位置
  3. 在属性面板中输入标注内容
  4. 设置颜色、大小等

帮助器

帮助器用于辅助编辑,不会在最终场景中显示:

  • 箭头帮助器: 显示方向和距离
  • 坐标轴帮助器: 显示坐标轴
  • 网格帮助器: 显示地面网格
  • 相机帮助器: 显示相机视角

光源

Shadow Editor Pro 支持多种光源类型:

环境光

  • 全局光照,没有方向
  • 适合作为基础光照

平行光

  • 类似太阳光,有方向
  • 产生阴影
  • 适合室外场景

点光源

  • 从一点向四面八方发光
  • 产生阴影
  • 适合灯泡等

聚光灯

  • 像手电筒一样有方向和范围
  • 产生阴影
  • 适合射灯等

半球光

  • 天空到地面的渐变光照
  • 不产生阴影
  • 适合模拟自然光

矩形光

  • 矩形面光源
  • 产生高质量阴影
  • 适合摄影棚效果

组件

背景音乐

为场景添加背景音乐:

  1. 点击菜单栏 组件背景音乐
  2. 选择音频文件
  3. 设置音量、循环等

天空

添加天空效果:

  1. 点击菜单栏 组件天空
  2. 选择天空类型(天空盒/天空球/HDR)
  3. 设置参数

材质编辑

材质类型

基础材质 (MeshBasicMaterial)

  • 不受光照影响
  • 始终显示相同颜色
  • 适合用作UI或图标

标准材质 (MeshStandardMaterial)

  • 基于物理的渲染(PBR)
  • 受光照影响
  • 支持金属度、粗糙度

物理材质 (MeshPhysicalMaterial)

  • 高级PBR材质
  • 支持清漆、透光
  • 更真实的渲染效果

兰伯特材质 (MeshLambertMaterial)

  • 简单光照模型
  • 性能较好
  • 适合低多边形

冯氏材质 (MeshPhongMaterial)

  • 有高光效果
  • 适合塑料、金属等

卡通材质 (ToonMaterial)

  • 卡通渲染效果
  • 有轮廓线
  • 适合卡通风格

着色器材质 (ShaderMaterial)

  • 使用自定义着色器
  • 完全自定义渲染
  • 适合高级用户

材质属性

颜色

设置材质的漫反射颜色。

金属度

设置材质的金属属性(0=非金属,1=纯金属)。

粗糙度

设置材质的粗糙程度(0=光滑,1=粗糙)。

贴图

可以为材质添加各种贴图:

  • 颜色贴图: 基础颜色
  • 法线贴图: 表面细节
  • 粗糙度贴图: 粗糙度变化
  • 金属度贴图: 金属度变化
  • 发光贴图: 自发光效果
  • 环境光遮蔽贴图: 阴影细节

脚本系统

Shadow Editor Pro 内置 Monaco 编辑器(VSCode同款),支持 JavaScript 脚本编写。

创建脚本

  1. 点击右侧边栏的 脚本 选项卡
  2. 点击 新建脚本
  3. 输入脚本名称
  4. 开始编写脚本

脚本框架

新建脚本会自动生成以下框架:

/**
 * 初始化函数
 * 场景加载时调用一次
 */
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参考


下一步

了解了基本功能后,您可以:

  1. 🎓 学习高级功能提升创作能力
  2. 💡 查看常见问题解决使用中的问题
  3. 📚 参考附录获取详细信息
本文由人工编写,AI优化,转载请注明原文地址: Shadow Editor Pro 功能说明

评论 (0)

发表评论

昵称:加载中...

暂无评论,快来发表第一条评论吧!