环境搭建
安装Node开发环境
* 国外下载地址：https://nodejs.org/en/
* 国内下载地址：http://nodejs.cn/download/
建议下载安装14.x.x版本。
Windows打开cmd或Power Shell，输入node -v，输出版本号，证明安装成功。
PS C:\Windows\system32> node -v
v14.4.0
PS C:\Windows\system32>
安装Go语言开发环境
* 国外下载地址：https://golang.org/dl/
* 国内下载地址：https://studygolang.com/dl
建议下载1.14.x版本。
Windows打开cmd或Power Shell，输入go version，输出版本号，证明安装成功。
PS C:\Windows\system32> go version
go version go1.14.4 windows/amd64
PS C:\Windows\system32>
安装Mongo数据库
下载地址：https://www.mongodb.com/try/download/community
建议下载zip版。
MongoDB v4.x版本需要Visual C++ Redistributable for Visual Studio 2015。如果下面的命令报错，你可以从这安装：https://www.microsoft.com/en-us/download/details.aspx?id=48145
安装MongoDB服务
1、解压MongoDB.zip到一个文件夹中，例如：E:\MongoDB
2、创建db和logs文件夹，如下所示：
├── db
├── logs
├── bsondump.exe
├── libeay32.dll
├── mongo.exe
├── mongod.exe
├── mongodump.exe
├── mongoexport.exe
├── mongofiles.exe
├── mongoimport.exe
├── mongoperf.exe
├── mongos.exe
├── mongostat.exe
├── mongotop.exe
└── ssleay32.exe
3、以管理员方式打开cmd或Power Shell，输入cd E:\MongoDB跳转到该目录。执行：
.\mongod --dbpath=E:\MongoDB\db --logpath=E:\MongoDB\logs\mongoDB.log --install --serviceName MongoDB
打开Windows服务查看是否有名称为MongoDB的服务，如果有，就启动它。
如果没有MongoDB服务，则安装失败，可以打开日志文件E:\MongoDB\logs\mongoDB.log查看失败原因。
安装Visual Studio Code
下载地址：https://code.visualstudio.com/
推荐安装以下VSCode扩展，它们对开发很有用。
ESLint, Go, Shader languages support for VS Code, TOML Language Support.
npm脚本使用
npm install: 安装nodejs依赖。
npm run build: 构建服务端和web客户端。
npm run build-server: 只构建服务端。(用于开发)
npm run build-web: 只构建web客户端。(用于开发)
npm run build-desktop: 构建桌面版。
npm run dev: 文件改变后自动构建web客户端。(用于开发)
npm run start: 启动web服务端。
npm run set-proxy: 设置golang和nodejs代理。(仅在国内使用)
npm run unset-proxy: 取消设置golang和nodejs代理。
npm run install-dev: 安装golang开发工具。
npm run eslint: 检查js文件，自动修复错误。
npm run clean: 删除构建的web版和桌面版。
npm run clear: 删除没用的nodejs包。
项目结构
├── .github
│ └── FUNDING.yml github Sponsor按钮设置
├── .vscode
│ └── launch.json VSCode运行面板下拉菜单项配置
├── build 生成目录，执行`npm run build`自动生成
├── docs 文档目录
├── images 图片目录
├── node_modules nodejs第三方库目录，执行`npm install`自动生成
├── scripts 编译和辅助脚本
├── server ShadowEditor服务端
├── utils 一些工具
├── web ShadowEditor前端
├── .gitattributes git配置
├── .gitignore git忽略文件
├── .travis.yml travis-ci自动化测试
├── LICENSE 开源协议，本项目是MIT协议
├── package.json npm包配置
├── package-lock.json 第三方npm包版本
├── README.md 英文版项目说明
└── README_zh.md 中文版项目说明
服务端结构
│ config-dev.toml 点击VSCode运行面板启动按钮，服务端配置文件
│ config.toml npm start时，服务端配置文件
│ go.mod go语言模块配置
│ go.sum go语言第三方库版本
│ main.go 服务端入口目录（main函数）
├─cmd
│ │ root.go 命令行根命令，执行`./ShadowEditor`
│ │ serve.go 命令行启动服务端命令，执行`./ShadowEditor serve`
│ │ version.go 命令行输出版本号命令，执行`./ShadowEditor version`
│ └─win
│ debug.go 调试Windows服务
│ empty.go
│ install.go 安装Windows服务
│ remove.go 移除Windows服务
│ start.go 启动Windows服务
│ stop.go 停止Windows服务
│ win.go
├─helper
│ │ config.go toml配置文件读取
│ │ copy.go 复制目录和文件
│ │ http.go GET和POST方法
│ │ json.go 对象转json
│ │ md5.go md5加密
│ │ mongo.go mongo数据库
│ │ mysql.go mysql数据库，没用
│ │ pinyin.go 汉字转拼音
│ │ postgresql.go postgresql数据库，没用
│ │ redis.go redis数据库，没用
│ │ sqlite.go sqlite数据库，没用
│ │ time.go 自定义时间转字符串
│ │ zip.go 压缩解压
│ └─encoder
│ primitive_d_encoder.go primitive.D转json编码器
│ primitive_objectid_encoder.go primitive.ObjectID转json编码器
│ time_encoder.go time.Time转json编码器
├─remote
│ model.go 没用
│
├─server
│ │ constant.go 服务端数据集名称、权限名称常量
│ │ context.go 上下文，提供mongo、路径映射和日志服务
│ │ middleware_crossorigin.go 跨域中间件
│ │ middleware_gzip.go gzip压缩中间件
│ │ middleware_validate_token.go 权限验证中间件
│ │ result.go 执行结果
│ │ server.go 服务端路由注册、启动
│ │ user.go 获取当前用户
│ ├─assets
│ │ │ exports.go
│ │ ├─animation 动画资源api
│ │ ├─audio 音频资源api
│ │ ├─character 角色资源api，没用
│ │ ├─material 材质资源api
│ │ ├─mesh 模型资源api
│ │ ├─particle 例子资源api，没用
│ │ ├─prefab 预设体资源api
│ │ ├─scene 场景资源api
│ │ ├─screenshot 截图资源api
│ │ ├─summary 资源汇总
│ │ ├─texture 纹理资源api
│ │ └─video 录制视频资源api
│ │
│ ├─category 类别管理
│ ├─export
│ │ │ exports.go
│ │ ├─examples 导出所有示例
│ │ └─scene 导出场景
│ │
│ ├─gis
│ │ handle_bing.go 必应地图缓存
│ │ handle_elevation.go Arcgis地形缓存
│ │ tile_system.go 必应卫星图key生成
│ │ utils.go
│ │
│ ├─system
│ │ │ config.go
│ │ │ department.go
│ │ │ exports.go
│ │ │ role.go 角色模型
│ │ │ role_authority.go
│ │ │ user.go 用户模型
│ │ │
│ │ ├─authority 权限管理
│ │ ├─config 项目配置
│ │ ├─department 组织机构管理
│ │ ├─initialize
│ │ │ handle_initialize.go 项目初始化
│ │ │ handle_reset.go 项目重置
│ │ │
│ │ ├─login
│ │ │ handle_login.go 登录
│ │ │ handle_logout.go 注销
│ │ │
│ │ ├─register 注册
│ │ ├─role 角色管理
│ │ └─user 用户管理
│ ├─tools
│ │ │ exports.go
│ │ │
│ │ ├─backup_database 数据库备份
│ │ ├─clean_scenes 场景清理
│ │ ├─plugin 插件管理
│ │ └─typeface 字体管理
│ └─upload
│ handle_upload.go 文件上传
├─test
│ README.md 代码测试目录
│
└─three three.js数学模块翻译为go语言
前端结构
│ .eslintrc eslint配置
│ babel.config.js babel配置
│ favicon.ico 项目图标
│ index.html 首页
│ manifest.json
│ rollup.config.js rollup配置
│ sw.js
│ view.html 场景新窗口打开
│
├─assets
│ ├─Cesium cesiumjs库
│ ├─css 项目css
│ ├─examples 示例
│ ├─fonts 字体
│ ├─image png图标
│ ├─images 图片
│ ├─js 第三方js库
│ ├─svg svg图标
│ └─textures 贴图
│
├─locales
│ en-US.json 英语语言包
│ fr-FR.json 法语语言包
│ ja-JP.json 日语语言包
│ ko-KR.json 韩语语言包
│ ru-RU.json 俄语语言包
│ zh-CN.json 简体中文语言包
│ zh-TW.json 繁体中文语言包
│
├─src
│ │ Application.js 前端入口
│ │ global.js 全局变量
│ │ index.js 前端类导出
│ │ Options.js 场景配置
│ │ polyfills.js
│ │ third_party.js 第三方模块
│ │
│ ├─command 命令和历史记录，支持重做、撤销
│ ├─controls 场景查看控制器
│ ├─editor
│ │ │ Editor.jsx 编辑器页面
│ │ │ Loader.jsx 页面加载显示“请稍后...”
│ │ │
│ │ ├─assets
│ │ │ │ AnimationPanel.jsx 动画面板
│ │ │ │ AssetsPanel.jsx
│ │ │ │ AudioPanel.jsx 音频面板
│ │ │ │ CharacterPanel.jsx 角色面板
│ │ │ │ LogPanel.jsx 日志面板
│ │ │ │ MapPanel.jsx 贴图面板
│ │ │ │ MaterialPanel.jsx 材质面板
│ │ │ │ ModelPanel.jsx 模型面板
│ │ │ │ ParticlePanel.jsx 粒子面板
│ │ │ │ PrefabPanel.jsx 预设体面板
│ │ │ │ ScenePanel.jsx 场景面板
│ │ │ │ ScreenshotPanel.jsx 截图面板
│ │ │ │ VideoPanel.jsx 录制视频面板
│ │ │ │
│ │ │ └─window
│ │ │ │ AddSkyBoxWindow.jsx
│ │ │ │ CategoryEditWindow.jsx 类别编辑窗口
│ │ │ │ CategoryWindow.jsx 类别列表窗口
│ │ │ │ EditMapWindow.jsx 材质编辑窗口
│ │ │ │ EditModelWindow.jsx 模型编辑窗口
│ │ │ │ EditSceneWindow.jsx 场景编辑窗口
│ │ │ └─ EditWindow.jsx 通用编辑窗口
│ │ ├─component
│ │ │ │ BasicComponent.jsx 基本信息组件
│ │ │ │ CameraComponent.jsx 相机组件
│ │ │ │ FireComponent.jsx
│ │ │ │ LightComponent.jsx 光源组件
│ │ │ │ LMeshComponent.jsx lol模型设置
│ │ │ │ MaterialComponent.jsx 材质组件
│ │ │ │ MMDComponent.jsx mmd设置
│ │ │ │ MultiMaterialComponent.jsx 多材质组件
│ │ │ │ ParticleEmitterComponent.jsx 例子发射器组件
│ │ │ │ ReflectorComponent.jsx 反光组件
│ │ │ │ SceneComponent.jsx 场景组件
│ │ │ │ ScriptComponent.jsx 脚本组件
│ │ │ │ ShadowComponent.jsx 阴影组件
│ │ │ │ SmokeComponent.jsx 烟组件
│ │ │ │ TransformComponent.jsx 位移组件
│ │ │ │
│ │ │ ├─animation 动画相关组件
│ │ │ ├─audio 音频相关组件
│ │ │ ├─control 视角控制器相关组件
│ │ │ ├─geometry 几何体设置组件
│ │ │ ├─line 各种线设置组件
│ │ │ ├─material 材质设置组件，没用
│ │ │ ├─object
│ │ │ ├─physics 物理设置组件
│ │ │ ├─postProcessing 后期处理设置组件
│ │ │ └─window
│ │ │ └─ TextureSettingWindow.jsx 材质编辑窗口
│ │ ├─menu
│ │ │ │ AssetsMenu.jsx 资源菜单
│ │ │ │ ComponentMenu.jsx 组件菜单
│ │ │ │ EditMenu.jsx 编辑菜单
│ │ │ │ EditorMenuBar.jsx 菜单栏
│ │ │ │ EditorTabMenu.jsx
│ │ │ │ ExampleMenu.jsx 示例菜单
│ │ │ │ HelpMenu.jsx 帮助菜单
│ │ │ │ LightMenu.jsx 光源菜单
│ │ │ │ LoginMenu.jsx 登录菜单
│ │ │ │ ObjectMenu.jsx 物体菜单
│ │ │ │ OptionsMenu.jsx 选项菜单
│ │ │ │ PlayMenu.jsx 播放菜单
│ │ │ │ SceneMenu.jsx 场景菜单
│ │ │ │ SystemMenu.jsx 系统菜单
│ │ │ │ ToolMenu.jsx 工具菜单
│ │ │ │ TwoDMenu.jsx 2D菜单，没用
│ │ │ │ ViewMenu.jsx 视图菜单
│ │ │ │ VisualMenu.jsx 可视化菜单，没用
│ │ │ │
│ │ │ ├─scene 场景模板
│ │ │ └─window
│ │ │ │ Add3DTextWindow.jsx 添加3D文字窗口
│ │ │ │ CleanUpScenesWindow.jsx 清理场景窗口
│ │ │ │ ExtensionWindow.jsx 扩展窗口
│ │ │ │ OptionsWindow.jsx 选项窗口
│ │ │ │ PluginsWindow.jsx 扩展窗口
│ │ │ │ RendererAttributesWindow.jsx 渲染器属性窗口
│ │ │ │ SaveSceneWindow.jsx 保存场景窗口
│ │ │ │ TextureGeneratorWindow.jsx 纹理窗口
│ │ │ │ ThreeJsInformationWindow.jsx three.js信息窗口
│ │ │ │ TypefaceConverterWindow.jsx 字体转换窗口
│ │ │ └─ TypefaceManagementWindow.jsx 字体管理窗口
│ │ ├─script
│ │ │ └─ ScriptEditor.js 脚本编辑器
│ │ │
│ │ ├─sidebar
│ │ │ │ AnimationPropertyPanel.jsx 动画面板
│ │ │ │ EditorSideBar.jsx 侧边栏
│ │ │ │ HierarchyPanel.jsx 场景树状图面板
│ │ │ │ HistoryPanel.jsx 历史面板
│ │ │ │ PropertyPanel.jsx 属性面板
│ │ │ │ ScriptPanel.jsx 脚本面板
│ │ │ └─window
│ │ │ └─ ScriptWindow.jsx 脚本创建窗口
│ │ ├─status
│ │ │ └─ EditorStatusBar.jsx 状态栏
│ │ │
│ │ ├─system
│ │ │ │ AuthorityManagementWindow.jsx 权限管理
│ │ │ │ ChangePasswordWindow.jsx 修改密码窗口
│ │ │ │ DepartmentManagementWindow.jsx 机构管理
│ │ │ │ LoginWindow.jsx 登录窗口
│ │ │ │ RegisterWindow.jsx 注册窗口
│ │ │ │ RoleManageWindow.jsx 角色管理窗口
│ │ │ │ SystemSettingWindow.jsx 系统设置窗口
│ │ │ │ UserManageWindow.jsx 用户管理窗口
│ │ │ │
│ │ │ ├─dept 机构管理
│ │ │ ├─role 角色管理
│ │ │ └─user 用户管理
│ │ │
│ │ ├─timeline 时间轴和补间动画面板
│ │ ├─toolbar
│ │ │ │ DrawTools.jsx 绘制工具
│ │ │ │ EditorToolbar.jsx 工具栏
│ │ │ │ EditTools.jsx 编辑工具
│ │ │ │ GeneralTools.jsx 通用工具
│ │ │ │ MarkTools.jsx 标注工具
│ │ │ │ MeasureTools.jsx 测量工具
│ │ │ └─ TerrainTools.jsx 地形工具，没用
│ │ │
│ │ ├─tools 各种自定义工具
│ │ │
│ │ └─viewport
│ │ │ ScriptEditorPanel.jsx 脚本编辑窗口
│ │ └─ Viewport.jsx 小场景、GIS场景、数据可视化工作区
│ │
│ ├─event
│ │ │ AutoSaveEvent.js 自动保存
│ │ │ BaseEvent.js 事件基类
│ │ │ EventDispatcher.js 事件分发器
│ │ │ EventList.js 自定义事件列表
│ │ │ FilterEvent.js 滤镜事件
│ │ │ GPUPickEvent.js GPU选取事件
│ │ │ LoadSceneEvent.js 场景加载事件
│ │ │ ObjectEvent.js
│ │ │ PhysicsEvent.js
│ │ │ PickEvent.js 选取事件
│ │ │ RaycastEvent.js
│ │ │ RenderEvent.js 渲染事件
│ │ │ ResizeEvent.js
│ │ │ ScriptChangedEvent.js
│ │ │ TransformControlsEvent.js 物体平移、旋转、缩放
│ │ │ ViewEvent.js
│ │ │ WeatherEvent.js 天气
│ │ └─ WebSocketEvent.js WebSocket数据传输
│ │
│ ├─gis
│ │ GISApplication.js CesiumJS应用
│ ├─helper 各种帮助器
│ ├─loader 各种类型模型加载器
│ ├─object 自定义物体
│ ├─package
│ │ PackageList.js 第三方包列表
│ │ PackageManager.js 第三方包动态加载器
│ │
│ ├─player 播放器，用于预览场景
│ │
│ ├─render 编辑器场景渲染
│ │
│ ├─serialization 对象序列化和反序列化，用于场景保存读取
│ │
│ ├─ui 使用react.js封装的ui组件库
│ │
│ ├─utils
│ │ Ajax.js ajax工具类
│ │ CanvasUtils.js
│ │ Converter.js 各种转换
│ │ CookieUtils.js cookie工具类
│ │ CoordinateUtils.js
│ │ CssLoader.js css动态加载
│ │ CssUtils.js
│ │ DownloadUtils.js
│ │ Earcut.js
│ │ Ease.js 补间动画
│ │ GeometryUtils.js
│ │ ImageUtils.js 图片工具类
│ │ JsLoader.js
│ │ LanguageLoader.js 语言包加载器
│ │ MaterialUtils.js
│ │ MathUtils.js
│ │ MeshUtils.js
│ │ MIMETypeUtils.js
│ │ Server.js 从服务端获取前端配置
│ │ Storage.js LocalStorage工具类
│ │ StringUtils.js
│ │ TimeUtils.js 时间转字符串工具类
│ │ TypefaceUtils.js
│ │ UploadUtils.js
│ │ VideoRecorder.js 录制视频工具类
│ │
│ ├─visual 可视化组件库，用于数据可视化，目前没用
│ │
│ └─worker worker测试，没用
│
└─test
README.md 前端测试
UI开发
本项目使用react.js开发。
事件驱动
本项目使用d3-dispatch框架进行事件驱动。下面以添加一个自定义事件的例子，来介绍如何使用事件驱动。
这个例子很简单：监听物体选中objectSelected事件，触发我们自定义事件customEvent；监听customEvent事件，在控制台打印选中的物体。
1、打开web\src\event\EventList.js，添加一个自定义事件customEvent。
var EventList = [
'customEvent'
];
2、创建文件web\src\event\CustomEvent.js，在这个文件里，我们可以触发和监听EventList里面的自定义事件。
import BaseEvent from './BaseEvent';
import global from '../global';
/**
* 自定义事件
*/
class CustomEvent extends BaseEvent {
constructor() {
super();
// 绑定this后，函数中的this表示这个类的实例。
this.handleSelect = this.handleSelect.bind(this);
this.handleCustomEvent = this.handleCustomEvent.bind(this);
}
/**
* 客户端启动后，会自动调用所有注册事件的start方法。
*/
start() {
// 监听物体选中事件
// 注意加上“.自定义id”，否则会覆盖其他监听这个事件的函数。
global.app.on(`objectSelected.${this.id}`, this.handleSelect);
// 监听自定义事件
global.app.on(`customEvent.${this.id}`, this.handleCustomEvent);
}
/**
* 客户端结束运行前，会自动调用所有注册事件的stop方法。
*/
stop() {
// 取消监听物体选中事件
global.app.on(`objectSelected.${this.id}`, null);
// 取消监听自定义事件
global.app.on(`customEvent.${this.id}`, null);
}
handleSelect(obj) {
// 调用自定义事件
// 参数：事件名称，this指针，要传递的参数
// 要传递的参数有多个，可以依次向后写。
global.app.call(`customEvent`, this, obj);
}
handleCustomEvent(obj) {
// 在控制台输出当前选中物体
console.log(obj);
}
}
export default CustomEvent;
3、打开事件分发器web\src\event\EventDispatcher.js，注册我们的自定义事件类。
import CustomEvent from './CustomEvent';
function EventDispatcher() {
this.events = [
new CustomEvent(),
];
}
4、输入npm run build-web重新生成前端，在浏览器中访问。添加一个正方体，选中正方体，控制台会打印出这个物体。
