ShadowEditor 3D场景编辑器 v0.6.0

ShadowEditor基于Three.js、Go语言和MongoDB的跨平台的3D场景编辑器，支持桌面版和Web版。

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

功能清单

1、通用功能

1.1、跨平台

Windows、Linux、Mac

桌面版、Web版

1.2、多语言支持

English、中文、繁體中文、日本語、한국어、русский、Le français

1.3、资源管理

场景、模型、贴图、材质、音频、动画、截图、录制视频、字体

1.4、权限管理

组织机构、用户

角色、权限

注册、登录、修改密码

1.5、版本控制

场景历史记录、操作日志

撤销、重做、自动保存

1.6、播放器

实时播放场景中的动画，支持全屏播放和新窗口播放

1.7、设置

显示、渲染器、帮助器、滤镜、天气、控制器模式、选择模式、添加模式、语言设置

2、小场景编辑

2.1、添加模型

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

2.2、内置物体

组

平面、正方体、圆、圆柱体、球体、二十面体、圆环面、圆环结、茶壶、车床

不缩放文字、三维文字

线段、CatmullRom曲线、二次贝塞尔曲线、三次贝塞尔曲线、椭圆曲线

点标注

箭头帮助器、轴帮助器

精灵

2.3、内置光源

环境光、平行光、点光源、聚光灯、半球光、矩形光

点光源、半球光、矩形光帮助器

2.4、内置组件

背景音乐、粒子发射器

天空、火焰、水、烟、布

柏林地形、天空球

2.5、材质编辑

线条材质、虚线材质、基本材质、深度材质、法向量材质

兰伯特材质、冯氏材质、点云材质、标准材质、物理材质

精灵材质、着色器材质、原始着色器材质

2.6、后期处理

残影、背景虚化、点阵化、快速近似抗锯齿(FXAA)、毛刺

半色调、像素、颜色偏移、可扩展环境光遮蔽(SAO)

多重采样抗锯齿(SMAA)、全屏抗锯齿(SSAA)

屏幕空间环境光遮蔽(SSAO)、时间抗锯齿(TAA)

2.7、文本编辑

js脚本编辑，带智能提示

着色器编辑

json文件编辑

2.8、模型导出

gltf、obj、ply、stl、Collada、DRACO

2.9、场景发布

将场景发布成静态资源，可以嵌入iframe中

2.10、示例

打砖块、相机、例子、乒乓球、着色器

2.11、常用工具

选择、平移、旋转、缩放

透视图、正视图、侧视图、顶视图、线框模式

截图、录制视频

点、线、面绘制、贴花

距离测量

2.12、其他功能

VR：cardboard, htc vive, chrome, firefox

Bullet物理引擎

3、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+

在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包。

部分截图

 

 

v0.6.0

更新内容

1、修复请求时创建新mongo连接的bug。

2、状态栏勾选虚拟现实，启用VR功能。

3、设置场景位移。

4、点击物体时，怎么弹出窗口：#I3APGI:点击场景中的物体，如何实现弹窗？

5、你可以在config.toml中启用https。

6、在脚本中新增手机浏览器事件：onTouchStart、onTouchEnd、onTouchMove。

7、升级three.js到最新版r128-dev，可能带来很多bug。

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。