ShadowEditor基于Three.js、Go語言和MongoDB的跨平臺的3D場景編輯器，支持桌面版和Web版。

說明：服務(wù)端為編譯版本，內(nèi)置mongodb，執(zhí)行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、資源管理

場景、模型、貼圖、材質(zhì)、音頻、動畫、截圖、錄制視頻、字體

1.4、權(quán)限管理

組織機(jī)構(gòu)、用戶

角色、權(quán)限

注冊、登錄、修改密碼

1.5、版本控制

場景歷史記錄、操作日志

撤銷、重做、自動保存

1.6、播放器

實(shí)時播放場景中的動畫，支持全屏播放和新窗口播放

1.7、設(shè)置

顯示、渲染器、幫助器、濾鏡、天氣、控制器模式、選擇模式、添加模式、語言設(shè)置

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、內(nèi)置物體

組

平面、正方體、圓、圓柱體、球體、二十面體、圓環(huán)面、圓環(huán)結(jié)、茶壺、車床

不縮放文字、三維文字

線段、CatmullRom曲線、二次貝塞爾曲線、三次貝塞爾曲線、橢圓曲線

點(diǎn)標(biāo)注

箭頭幫助器、軸幫助器

精靈

2.3、內(nèi)置光源

環(huán)境光、平行光、點(diǎn)光源、聚光燈、半球光、矩形光

點(diǎn)光源、半球光、矩形光幫助器

2.4、內(nèi)置組件

背景音樂、粒子發(fā)射器

天空、火焰、水、煙、布

柏林地形、天空球

2.5、材質(zhì)編輯

線條材質(zhì)、虛線材質(zhì)、基本材質(zhì)、深度材質(zhì)、法向量材質(zhì)

蘭伯特材質(zhì)、馮氏材質(zhì)、點(diǎn)云材質(zhì)、標(biāo)準(zhǔn)材質(zhì)、物理材質(zhì)

精靈材質(zhì)、著色器材質(zhì)、原始著色器材質(zhì)

2.6、后期處理

殘影、背景虛化、點(diǎn)陣化、快速近似抗鋸齒(FXAA)、毛刺

半色調(diào)、像素、顏色偏移、可擴(kuò)展環(huán)境光遮蔽(SAO)

多重采樣抗鋸齒(SMAA)、全屏抗鋸齒(SSAA)

屏幕空間環(huán)境光遮蔽(SSAO)、時間抗鋸齒(TAA)

2.7、文本編輯

js腳本編輯，帶智能提示

著色器編輯

json文件編輯

2.8、模型導(dǎo)出

gltf、obj、ply、stl、Collada、DRACO

2.9、場景發(fā)布

將場景發(fā)布成靜態(tài)資源，可以嵌入iframe中

2.10、示例

打磚塊、相機(jī)、例子、乒乓球、著色器

2.11、常用工具

選擇、平移、旋轉(zhuǎn)、縮放

透視圖、正視圖、側(cè)視圖、頂視圖、線框模式

截圖、錄制視頻

點(diǎn)、線、面繪制、貼花

距離測量

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

圖標(biāo)

圖片: Image, ImageList, ImageSelector, ImageUploader

布局: AbsoluteLayout, AccordionLayout, BorderLayout, HBoxLayout, TableLayout, VBoxLayout

菜單: ContextMenu, MenuBar, MenuBarFiller, MenuItem, MenuItemSeparator, MenuTab.

面板

進(jìn)度條: 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上構(gòu)建

Web版：

1、如果你在國內(nèi)， 執(zhí)行npm run set-proxy設(shè)置go語言和nodejs代理。

2、執(zhí)行npm install安裝nodejs依賴。

3、執(zhí)行npm run build構(gòu)建服務(wù)端和Web端。

4、編輯build/config.toml，修改MongoDB的host和port設(shè)置。

5、執(zhí)行npm start啟動服務(wù)端?，F(xiàn)在你可以訪問：http://localhost:2020。

6、如果在配置文件中啟用了https，請訪問：https://localhost:2020。

桌面版：

1、下載MongoDB，解壓到utils/mongodb文件夾中。

2、構(gòu)建Web版。

3、執(zhí)行npm run build-desktop可以在文件夾build/desktop中創(chuàng)建一個桌面版應(yīng)用。

安裝為Windows服務(wù)

1、以管理員身份在build文件夾中打開PowerShell或cmd。

2、運(yùn)行.\ShadowEditor install，將ShadowEditor安裝為服務(wù)。

3、運(yùn)行.\ShadowEditor start，啟動ShadowEditor服務(wù)。

4、現(xiàn)在你可以訪問：http://localhost:2020。

5、你也可以在Windows服務(wù)管理器中管理這個服務(wù)。

安裝為Ubuntu服務(wù)

1、編輯./scripts/service_linux/shadoweditor.service，設(shè)置正確的路徑。

2、執(zhí)行sudo cp ./scripts/service_linux/shadoweditor.service /etc/systemd/system/。

3、執(zhí)行sudo systemctl daemon-reload重新加載服務(wù)守護(hù)程序。

4、執(zhí)行sudo systemctl start shadoweditor啟動服務(wù)。

5、執(zhí)行sudo systemctl enable shadoweditor設(shè)置開機(jī)自啟動。

命令行使用

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.

 

開發(fā)指南

1、下載并安裝 NodeJs, golang, MongoDB 和 Visual Studio Code.

2、推薦安裝以下VSCode擴(kuò)展， 它們對開發(fā)很有用。

ESLint, Go, Shader languages support for VS Code, TOML Language Support.

npm腳本使用：

npm install: 安裝nodejs依賴。

npm run build: 構(gòu)建服務(wù)端和web客戶端。

npm run build-server: 只構(gòu)建服務(wù)端。(用于開發(fā))

npm run build-web: 只構(gòu)建web客戶端。(用于開發(fā))

npm run build-desktop: 構(gòu)建桌面版。

npm run dev: 文件改變后自動構(gòu)建web客戶端。(用于開發(fā))

npm run copy: 將資源從web文件夾拷貝到build文件夾。

npm run start: 啟動web服務(wù)端。

npm run set-proxy: 設(shè)置golang和nodejs代理。(僅在國內(nèi)使用)

npm run unset-proxy: 取消設(shè)置golang和nodejs代理。

npm run install-dev: 安裝golang開發(fā)工具。

npm run eslint: 檢查js文件，自動修復(fù)錯誤。

npm run clean: 刪除構(gòu)建的web版和桌面版。

npm run clear: 刪除沒用的nodejs包。

部分截圖

 

 

v0.6.0

更新內(nèi)容

1、修復(fù)請求時創(chuàng)建新mongo連接的bug。

2、狀態(tài)欄勾選虛擬現(xiàn)實(shí)，啟用VR功能。

3、設(shè)置場景位移。

4、點(diǎn)擊物體時，怎么彈出窗口：#I3APGI:點(diǎn)擊場景中的物體，如何實(shí)現(xiàn)彈窗？

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

6、在腳本中新增手機(jī)瀏覽器事件：onTouchStart、onTouchEnd、onTouchMove。

7、升級three.js到最新版r128-dev，可能帶來很多bug。

8、在腳本中添加VR事件：onVRConnected、onVRDisconnected、onVRSelectStart、onVRSelectEnd。

9、VR一體機(jī)手柄控制器支持，例如：htc vive。

10、修復(fù)刪除腳本bug。

11、修復(fù)由于three.js升級，導(dǎo)致Geometry無法序列化的bug。

12、增加材質(zhì)polygonOffset、polygonOffsetFactor、polygonOffsetUnits參數(shù)可視化設(shè)置，解決深度沖突問題。

13、修復(fù)模型內(nèi)部組件無法保存可視性bug。

14、不再支持bin類型模型。

15、修復(fù)立體貼圖bug。

16、將代碼中所有的prototype改寫為es6 class。

17、移除可視化模塊。

18、修復(fù)導(dǎo)出場景時沒有復(fù)制天空球貼圖的bug。

19、修復(fù)下雨和下雪bug。

20、修改背景顏色和光照，以免添加的平面和背景相同顏色，看不清。

21、修復(fù)粒子發(fā)射器bug。

22、修復(fù)布bug。

23、修復(fù)動態(tài)設(shè)置影子bug。