Shadow Editor Pro 附录

本章提供详细的参考信息，包括支持的文件格式、快捷键、脚本API等。

支持的模型格式

Shadow Editor Pro 支持 40+ 种 3D 模型格式，以下按字母顺序列出：

推荐使用格式

最佳选择：GLTF/GLB

• ✅ WebGL 标准，兼容性最好
• ✅ 文件小，加载快
• ✅ 支持材质、动画、骨骼
• ✅ GLB 是单文件格式，不会丢失资源
• ✅ 支持 Draco 压缩

其他推荐：

• FBX: 支持动画，Autodesk 生态
• OBJ: 通用性强，简单场景
• GLB: 单文件 GLTF，推荐使用

格式选择建议

支持的贴图格式

图片贴图

HDR 贴图

视频贴图

天空盒贴图

天空盒需要 6 张图片，文件名命名规则：

示例：skybox_px.jpg, skybox_nx.jpg, skybox_py.jpg, …

贴图选择建议

快捷键列表

文件操作

编辑操作

选择操作

视图操作

工具切换

窗口和面板

开发者工具

其他快捷键

脚本 API 参考

全局对象

app

播放器应用实例，提供播放器相关功能。

app

属性：

• camera: 相机对象
• scene: 场景对象
• renderer: 渲染器对象
• controls: 控制器对象

THREE

Three.js 全局对象，提供所有 Three.js 功能。

THREE

常用类：

• THREE.Scene: 场景类
• THREE.Mesh: 网格类
• THREE.BoxGeometry: 盒子几何体
• THREE.MeshStandardMaterial: 标准材质

scene

当前场景对象。

scene

常用方法：

• add(object): 添加对象到场景
• remove(object): 从场景移除对象
• getObjectByName(name): 通过名称获取对象
• traverse(callback): 遍历场景所有对象

camera

当前相机对象。

camera

常用属性：

• position: 相机位置
• rotation: 相机旋转
• fov: 视野角度

renderer

当前渲染器对象。

renderer

常用方法：

• render(scene, camera): 渲染场景
• setSize(width, height): 设置渲染尺寸

脚本生命周期函数

init()

初始化函数，场景加载时调用一次。

function init() {
  console.log('场景初始化')
}

用途：

• 初始化变量
• 创建对象
• 设置事件监听

update(delta)

每帧更新函数，在每一帧渲染前调用。

function update(delta) {
  // delta: 帧间隔时间（秒）
  console.log('帧时间:', delta)
}

用途：

• 更新动画
• 移动对象
• 检测碰撞
• 更新UI

resize()

窗口大小改变时调用。

function resize() {
  // 更新相机比例
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
}

dispose()

场景销毁时调用一次，用于清理资源。

function dispose() {
  console.log('场景销毁')
  // 清理资源
  if (myMesh) {
    myMesh.geometry.dispose()
    myMesh.material.dispose()
  }
}

事件处理函数

onClick(event)

鼠标点击事件。

function onClick(event) {
  console.log('点击对象:', event.object)
  console.log('点击位置:', event.point)
}

event 对象属性：

• object: 被点击的对象
• point: 世界坐标中的点击点
• distance: 相机到点击点的距离

onMouseDown(event)

鼠标按下事件。

function onMouseDown(event) {
  console.log('鼠标按下:', event.button)
}

event 对象属性：

• button: 鼠标按钮（0=左键, 1=中键, 2=右键）
• altKey: Alt键是否按下
• ctrlKey: Ctrl键是否按下
• shiftKey: Shift键是否按下

onMouseMove(event)

鼠标移动事件。

function onMouseMove(event) {
  console.log('鼠标位置:', event.point)
}

onMouseUp(event)

鼠标松开事件。

function onMouseUp(event) {
  console.log('鼠标松开')
}

常用代码示例

创建并添加对象

function init() {
  // 创建几何体
  const geometry = new THREE.BoxGeometry(1, 1, 1)

  // 创建材质
  const material = new THREE.MeshStandardMaterial({
    color: 0x00ff00
  })

  // 创建网格
  const cube = new THREE.Mesh(geometry, material)
  cube.name = '正方体'
  cube.position.set(0, 1, 0)

  // 添加到场景
  scene.add(cube)
}

旋转对象

function update(delta) {
  const cube = scene.getObjectByName('正方体')
  if (cube) {
    cube.rotation.x += delta
    cube.rotation.y += delta * 0.5
  }
}

移动对象

function update(delta) {
  const speed = 5 // 移动速度
  const cube = scene.getObjectByName('正方体')
  if (cube) {
    cube.position.x += delta * speed
  }
}

改变颜色

function onClick(event) {
  if (event.object.material) {
    // 改变为红色
    event.object.material.color.setHex(0xff0000)
  }
}

检测碰撞

function update(delta) {
  const box1 = scene.getObjectByName('盒子1')
  const box2 = scene.getObjectByName('盒子2')

  if (box1 && box2) {
    // 简单的距离检测
    const distance = box1.position.distanceTo(box2.position)
    if (distance < 2) {
      console.log('碰撞！')
    }
  }
}

键盘控制

function init() {
  document.addEventListener('keydown', onKeyDown)
}

function onKeyDown(event) {
  const cube = scene.getObjectByName('正方体')
  if (!cube) return

  const speed = 0.1

  switch (event.key) {
    case 'ArrowUp':
      cube.position.z -= speed
      break
    case 'ArrowDown':
      cube.position.z += speed
      break
    case 'ArrowLeft':
      cube.position.x -= speed
      break
    case 'ArrowRight':
      cube.position.x += speed
      break
  }
}

创建动画

let animationTime = 0

function update(delta) {
  animationTime += delta

  const cube = scene.getObjectByName('正方体')
  if (cube) {
    // 上下浮动
    cube.position.y = 1 + Math.sin(animationTime * 2) * 0.5
  }
}

加载外部模型

function init() {
  const loader = new THREE.GLTFLoader()

  loader.load(
    '/models/car.glb',
    function (gltf) {
      const model = gltf.scene
      model.name = '汽车'
      scene.add(model)
    },
    function (xhr) {
      console.log('加载进度:', (xhr.loaded / xhr.total) * 100 + '%')
    },
    function (error) {
      console.error('加载失败:', error)
    }
  )
}

Three.js 常用类参考

Vector3（三维向量）

const vector = new THREE.Vector3(1, 2, 3)

// 常用方法
vector.length() // 计算长度
vector.distanceTo(v) // 计算到另一个向量的距离
vector.normalize() // 归一化
vector.add(v) // 向量加法
vector.sub(v) // 向量减法
vector.multiplyScalar(scalar) // 向量乘标量

Euler（欧拉角）

const euler = new THREE.Euler(0, 0, 0, 'XYZ')

// 常用方法
euler.set(x, y, z, order) // 设置欧拉角

Quaternion（四元数）

const quaternion = new THREE.Quaternion()

// 常用方法
quaternion.setFromEuler(euler) // 从欧拉角设置
quaternion.setFromAxisAngle(axis, angle) // 从轴和角度设置

Color（颜色）

const color = new THREE.Color(0xff0000)

// 常用方法
color.setHex(0x00ff00) // 设置十六进制颜色
color.setRGB(1, 0, 0) // 设置RGB值
color.set('red') // 设置CSS颜色
color.getHex() // 获取十六进制值

技术规格

系统要求

• 操作系统: Windows 10/11, Linux, macOS
• 处理器: Intel Core i5 或同等性能以上
• 内存: 最少 8GB，推荐 16GB
• 显卡: 支持 OpenGL 3.3 及以上
• 存储空间: 最少 2GB 可用空间
• 显示器: 1920x1080 或更高分辨率

支持的浏览器

• Chrome 90+
• Firefox 88+
• Edge 90+
• Safari 14+

支持的 Three.js 版本

• Three.js r166

支持的 WebGL 版本

• WebGL 1.0
• WebGL 2.0
• WebGPU（实验性）

更新日志

v0.0.1 (2024-10-19)

新增功能

• 🎉 首个商业版本发布
• ✨ 完整的3D场景编辑功能
• ✨ 支持 40+ 种模型格式
• ✨ 支持 20+ 种材质类型
• ✨ 完整的资源管理系统
• ✨ 场景历史版本管理
• ✨ 撤销/重做功能
• ✨ Monaco 代码编辑器
• ✨ JavaScript 脚本系统
• ✨ 补间动画支持
• ✨ 骨骼动画支持
• ✨ MMD 动画支持
• ✨ 后期处理系统
• ✨ 物理引擎集成
• ✨ 数据可视化功能
• ✨ VR 支持实验
• ✨ 场景发布功能

已知问题

• WebGPU 功能仍在开发中
• 某些模型格式可能不完全支持
• 大型场景性能可能需要优化

术语表

• 3D: 三维
• API: 应用程序接口
• CDN: 内容分发网络
• CSS: 层叠样式表
• FPS: 每秒帧数
• GLTF: GL Transmission Format
• GUI: 图形用户界面
• HTML: 超文本标记语言
• JSON: JavaScript 对象表示法
• LOD: 细节级别
• MMD: MikuMikuDance
• OBJ: Wavefront Object
• PBR: 基于物理的渲染
• VR: 虚拟现实
• WebGL: Web 图形库
• WYSIWYG: 所见即所得

下一步

• 📖 返回用户手册首页
• 🚀 学习高级功能
• 💡 查看常见问题