本项目前后端分离。服务端使用NestJS框架，它是一个渐进式 Node.js 框架，用于构建高效、可靠且可扩展的服务器端应用程序。服务端使用文件来保存场景、模型、贴图等数据。

前端使用Vite+Vue3+TypeScript进行开发。Vite是下一代的前端工具链，为开发提供极速响应。Vue是一个渐进式的JavaScript 框架，易学易用，性能出色，是一个适用场景丰富的 Web 前端框架。TypeScript 是在 JavaScript 的基础上增加了类型语法的语言。它是一种强类型编程语言，构建于 JavaScript 之上，能够在任何规模下为你提供更好的工具支持。

前端使用Ant Design Vue来搭建用户界面。Ant Design of Vue 是基于 Ant Design 设计语言和 Vue 技术栈的企业级 UI 组件库，提供了高质量的 Vue 组件和服务端渲染支持。

前端使用Three.js框架来渲染三维场景。Three.js是一个JavaScript 3D库，它封装了WebGL和WebGL2接口，最新版已经支持使用WebGPU进行渲染。

项目使用Electron构建桌面应用。Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

依赖库版本

项目中用到的第三方依赖库版本如下：

* electron: ^31.1.0

* nest.js：^10.3.9

* typescript: ^5.5.2

* vite：^4.0.0

* vue：^3.4.31

* ant-design-vue：^4.2.3

* three.js：^0.166.0

开发需求

建议使用Windows 10及以上系统进行开发，至少有16G内存，最好有独立显卡，否则可能无法正常进行开发。

在默认配置下开发，服务端使用3000端口，前端使用8080端口。请勿占用这两个端口，否则项目可能无法正常启动。

环境搭建

1、下载安装Visual Studio Code。

下载地址：https://code.visualstudio.com/Download

建议安装扩展：

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code、Vue - Official、ESLint、Prettier - Code formatter

2、下载安装Node.js。

下载地址：https://nodejs.org/zh-cn/download/prebuilt-installer

打开PowerShell，输入以下命令，验证Node.js是否正常安装。推荐Node.js版本在v20.0.0以上。

3、为了加快安装依赖包的速度，可以执行以下命令设置npm源为淘宝镜像。

npm config set registry https://registry.npmmirror.com

编译程序

1、下载并解压程序源码压缩包ShadowEditorPro.zip。

2、以管理员模式打开Windows PowerShell，在项目根目录执行以下命令安装依赖包。

npm install

3、然后在项目根目录执行以下命令编译程序。

npm run build

4、等编译完成，编译后的程序在ShadowEditorPro\build\{版本号}目录。其中，ShadowEditor-Windows-0.0.1-Setup.exe是软件安装包，win-unpacked是绿色版软件。

5、双击ShadowEditorPro\build\{版本号}\win-unpacked\ShadowEditor.exe启动桌面版程序，查看程序是否能正常运行。程序默认使用3000端口，请保证该端口未被其他程序占用。

6、在Edge或谷歌浏览器中打开以下地址，查看是否能在浏览器中能正常运行。

\\

http://localhost:3000

使用浏览器进行开发

使用以下方法进行开发，服务端和前端都支持热重载。修改服务端后保存文件，服务端会自动更新。修改前端后保存文件，前端会自动更新。不需要重启服务端和前端，非常方便。

1、使用Visual Studio Code打开项目，左侧边栏选择运行和调试选项卡，下拉框选择启动服务端。

2、打开Visual Studio Code终端，输入以下代码启动前端。

npm run dev

3、执行完会自动在浏览器中打开项目，如果没有打开，可以在浏览器中输入以下地址访问项目。

http://localhost:8080

使用Electron进行开发

使用以下方法进行开发，服务端和前端都支持热重载。修改前端后保存文件，Electron浏览器会自动刷新页面。修改服务端后保存文件，Electron会自动重启。

1、使用Visual Studio Code打开项目，在终端中执行以下代码启动前端。

npm run dev

2、左侧边栏选择运行和调试选项卡，下拉框选择启动Electron。

3、在Electron浏览器中，使用帮助菜单中的重载页面，可以刷新前端页面。使用在浏览器中打开，可以在浏览器中打开前端。

项目结构

.vscode：项目配置文件
build：electron编译产物
dist：前端编译产物
dist-electron：后端编译产物
docs：项目文档
electron：服务端和electron代码
images：项目图片
node_modules：前端和服务端依赖包
public：前端静态文件
src：前端源码
test：测试文件
.eslintignore：eslint忽略文件
.eslintrc.cjs：eslint配置文件
.gitattributes：git配置文件
.gitignore：git忽略文件
.npmrc：npm配置文件
.prettierrc.json：prettier配置文件
config.json：项目配置文件
electron-builder.json5：json配置文件
env.d.ts：TypeScript类型定义
index.html：前端首页

服务端

common：通用ts定义
data：数据模块
filter：过滤器，例如：异常过滤器
interceptor：拦截器：例如：日志拦截器
pipe：管线，例如：文件名编码管线
three：三维模块
utils：工具类
config.ts：配置读取文件
electron-env.d.ts：electron ts定义文件
env.d.ts：ts定义文件
main.ts：Electron入口文件
preload：Electron preload文件
server：NestJs入口文件

前端

api：服务端接口封装
assets：静态资源
command：命令，支持撤销重做
components：vue组件
controls：控制器，可以控制场景移动
editor：编辑器用户界面
event：事件
helper：三维中用到的帮助器
loader：三维模型加载器
misc：杂项，例如一些ts定义
object：三维物体定义
player：三维播放器
render：三维渲染器
serialization：三维场景序列化和反序列化器
utils：前端工具类
App.vue：编辑器用户界面
Application.ts：三维应用入口
global.ts：全局变量定义
main.ts：vue入口文件
Options.ts：场景配置
polyfills.ts：对Three.js和浏览器的一些修正
ShadowPlayer.vue：播放器用户界面