Shadow Editor

English / 中文    |    Windows 服务端    |    Linux 服务端    |    Web 演示

说明：服务端为编译版本，内置 mongodb，执行start.bat或start.sh启动，在谷歌浏览器中访问http://localhost:2020 。Windows 版需要Visual C++ Redistributable for Visual Studio 2015支持。

好消息！基于 vite4 + vue3 + ts5 + ant-design-vue7 的版本即将到来，点击此处 查看详情。

• 名称：Shadow Editor
• 版本：v0.6.1 (开发中)
• 简介：基于 Three.js、Go 语言和 MongoDB 的跨平台的 3D 场景编辑器。
• 源码：GitHub Gitee | 文档：Gitee | 示例：GitHub Gitee | 视频：微博 Bilibili | 资源：百度网盘 rfja
• 技术栈：html、css、javascript、rollup、react.js、webgl、three.js、golang、mongodb、nodejs、electron、protocol buffers。
• 如果对您有帮助，请【捐赠】支持项目发展。谢谢！

v0.6.1 即将更新

从v0.6.1开始，ShadowEditor 仅提供核心功能和扩展 API，其他功能将在扩展中实现，类似 VSCode。 扩展化改造将在dev分支进行。

1. 修复某些版本 go 字体管理列表报错 bug。
2. 隐藏模型历史版本选项卡。
3. 精灵选中时，不再显示边框。
4. 修复搜索区域下拉框样式 bug。

v0.6.0 已经发布

• 发布日期：2021 年 7 月 24 日
• 更新日志：

1. 修复请求时创建新 mongo 连接的 bug。
2. 状态栏勾选虚拟现实，启用 VR 功能。
3. 设置场景位移。
4. 点击物体时，怎么弹出窗口：https://gitee.com/tengge1/ShadowEditor/issues/I3APGI
5. 你可以在config.toml中启用https。
6. 在脚本中新增手机浏览器事件：onTouchStart、onTouchEnd、onTouchMove。
7. 升级three.js到最新版 r130。
8. 在脚本中添加 VR 事件：onVRConnected、onVRDisconnected、onVRSelectStart、onVRSelectEnd。
9. VR 一体机手柄控制器支持，例如：htc vive。
10. 修复删除脚本 bug。
11. 修复由于three.js升级，导致Geometry无法序列化的 bug。
12. 增加材质polygonOffset、polygonOffsetFactor、polygonOffsetUnits参数可视化设置，解决深度冲突问题。
13. 修复模型内部组件无法保存可视性 bug。
14. 不再支持bin类型模型。
15. 修复立体贴图 bug。
16. 将代码中所有的prototype改写为 es6 class。
17. 移除可视化模块。
18. 修复导出场景时没有复制天空球贴图的 bug。
19. 修复下雨和下雪 bug。
20. 修改背景颜色和光照，以免添加的平面和背景相同颜色，看不清。
21. 修复粒子发射器 bug。
22. 修复布 bug。
23. 修复动态设置影子 bug。

功能清单

• 通用功能
  • 跨平台
    • Windows、Linux、Mac
    • 桌面版、Web 版
  • 多语言支持
    • English、中文、繁體中文、日本語、한국어、русский、Le français
  • 资源管理
    • 场景、模型、贴图、材质、音频、动画、截图、录制视频、字体
  • 权限管理
    • 组织机构、用户
    • 角色、权限
    • 注册、登录、修改密码
  • 版本控制
    • 场景历史记录、操作日志
    • 撤销、重做、自动保存
  • 播放器
    • 实时播放场景中的动画，支持全屏播放和新窗口播放
  • 设置
    • 显示、渲染器、帮助器、滤镜、天气、控制器模式、选择模式、添加模式、语言设置
• 小场景编辑
  • 添加模型
    • 3ds, 3mf, amf, assimp, awd, babylon, bvh, collada, ctm
    • draco, fbx, gcode, gltf, glb, js, kmz, lmesh, md2, pmd, pmx
    • nrrd, obj, pcd, pdb, ply, prwm, sea3d, stl, vrm, vrml, vtk, X
  • 内置物体
    • 组
    • 平面、正方体、圆、圆柱体、球体、二十面体、圆环面、圆环结、茶壶、车床
    • 不缩放文字、三维文字
    • 线段、CatmullRom 曲线、二次贝塞尔曲线、三次贝塞尔曲线、椭圆曲线
    • 点标注
    • 箭头帮助器、轴帮助器
    • 精灵
  • 内置光源
    • 环境光、平行光、点光源、聚光灯、半球光、矩形光
    • 点光源、半球光、矩形光帮助器
  • 内置组件
    • 背景音乐、粒子发射器
    • 天空、火焰、水、烟、布
    • 柏林地形、天空球
  • 材质编辑
    • 线条材质、虚线材质、基本材质、深度材质、法向量材质
    • 兰伯特材质、冯氏材质、点云材质、标准材质、物理材质
    • 精灵材质、着色器材质、原始着色器材质
  • 后期处理
    • 残影、背景虚化、点阵化、快速近似抗锯齿（FXAA）、毛刺
    • 半色调、像素、颜色偏移、可扩展环境光遮蔽（SAO）
    • 多重采样抗锯齿（SMAA）、全屏抗锯齿（SSAA）
    • 屏幕空间环境光遮蔽（SSAO）、时间抗锯齿（TAA）
  • 文本编辑
    • js 脚本编辑，带智能提示
    • 着色器编辑
    • json 文件编辑
  • 模型导出
    • gltf、obj、ply、stl、Collada、DRACO
  • 场景发布
    • 将场景发布成静态资源，可以嵌入 iframe 中
  • 示例
    • 打砖块、相机、例子、乒乓球、着色器
  • 常用工具
    • 选择、平移、旋转、缩放
    • 透视图、正视图、侧视图、顶视图、线框模式
    • 截图、录制视频
    • 点、线、面绘制、贴花
    • 距离测量
  • 其他功能
    • VR：cardboard, htc vive, chrome, firefox
    • Bullet 物理引擎
• UI 组件
  • 画布
  • 表单: Button, CheckBox, Form, FormControls, IconButton, IconMenuButton, ImageButton, Input, Label, LinkButton, Radio, SearchField, Select, TextArea, Toggle
  • 图标
  • 图片: Image, ImageList, ImageSelector, ImageUploader
  • 布局: AbsoluteLayout, AccordionLayout, BorderLayout, HBoxLayout, TableLayout, VBoxLayout
  • 菜单: ContextMenu, MenuBar, MenuBarFiller, MenuItem, MenuItemSeparator, MenuTab.
  • 面板
  • 进度条: LoadMask
  • 属性框: ButtonProperty, ButtonsProperty, CheckBoxProperty, ColorProperty, DisplayProperty, IntegerProperty, NumberProperty, PropertyGrid, PropertyGroup, SelectProperty, TextProperty, TextureProperty
  • SVG
  • 表格: DataGrid, Table, TableBody, TableCell, TableHead, TableRow
  • 时间轴
  • 工具栏: Toolbar, ToolbarFiller, ToolbarSeparator
  • 树
  • 窗口: Alert, Confirm, Message, Photo, Prompt, Toast, Video, Window

需求

1. MongoDB v3.6.8+
2. Chrome 81.0+ 或者 ​​Firefox 75.0+

下面的软件仅在从源码编译时才需要。

1. Golang 1.14.2+
2. NodeJS 14.1+
3. gcc 9.3.0+ （Windows 上需要安装tdm-gcc、MinGW-w64或MinGW。请保证gcc可以通过命令行访问）
4. git 2.25.1+

注意 版本号仅供参考。

下载和编译

你可以使用 git 下载源码。

git clone https://github.com/tengge1/ShadowEditor.git

在国内，由于github比较慢，可以使用 gitee。

git clone https://gitee.com/tengge1/ShadowEditor.git

在 Windows 和 Ubuntu 上构建

Web 版：

1. 如果你在国内， 执行npm run set-proxy设置 go 语言和 nodejs 代理。
2. 执行npm install安装 nodejs 依赖。
3. 执行npm run build构建服务端和 Web 端。
4. 编辑build/config.toml，修改 MongoDB 的 host 和 port 设置。
5. 执行npm start启动服务端。现在你可以访问：http://localhost:2020。
6. 如果在配置文件中启用了https，请访问：https://localhost:2020。

桌面版：

1. 下载MongoDB，解压到utils/mongodb文件夹中。
2. 构建 Web 版。
3. 执行npm run build-desktop可以在文件夹build/desktop中创建一个桌面版应用。

安装为 Windows 服务

1. 以管理员身份在build文件夹中打开PowerShell或cmd。
2. 运行.\ShadowEditor install，将 ShadowEditor 安装为服务。
3. 运行.\ShadowEditor start，启动 ShadowEditor 服务。
4. 现在你可以访问：http://localhost:2020。
5. 你也可以在Windows服务管理器中管理这个服务。

安装为 Ubuntu 服务

1. 编辑./scripts/service_linux/shadoweditor.service，设置正确的路径。
2. 执行sudo cp ./scripts/service_linux/shadoweditor.service /etc/systemd/system/。
3. 执行sudo systemctl daemon-reload重新加载服务守护程序。
4. 执行sudo systemctl start shadoweditor启动服务。
5. 执行sudo systemctl enable shadoweditor设置开机自启动。

命令行使用

PS E:\github\ShadowEditor\build\> .\ShadowEditor
ShadowEditor is a 3D scene editor based on three.js, golang and mongodb.
This application uses mongodb to store data.

Usage:
  ShadowEditor [command]

Available Commands:
  debug       Debug service on Windows
  help        Help about any command
  install     Install service on Windows
  serve       Start server
  start       Start service on Windows
  stop        Stop service on Windows
  version     Print the version number

Flags:
      --config string   config file (default "./config.toml")
  -h, --help            help for ShadowEditor

Use "ShadowEditor [command] --help" for more information about a command.

开发指南

1. 下载并安装 NodeJs, golang, MongoDB 和 Visual Studio Code.
2. 推荐安装以下 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 copy:           将资源从web文件夹拷贝到build文件夹。
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包。

参与贡献

常见问题

openssl genrsa -out privatekey.pem 1024
openssl req -new -key privatekey.pem -out certrequest.csr
openssl x509 -req -in certrequest.csr -signkey privatekey.pem -out certificate.pem

开源项目