• Stars
    star
    1,579
  • Rank 29,479 (Top 0.6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Cross-platform 3D scene editor based on three.js, golang and mongodb for desktop and web. https://tengge1.github.io/ShadowEditor-examples/

Shadow Editor

English / 中文    |    Windows Server    |    Ubuntu Server    |    Web Demo

Note: The server is a compiled version with built-in mongodb, execute start.bat or start.sh to start, and visit http://localhost:2020 in Google Chrome. Windows version requires Visual C++ Redistributable for Visual Studio 2015.

image image image image image image image

  • Name: Shadow Editor
  • Version: v0.6.1 (Coming Soon)
  • Description: Cross-platform 3D scene editor based on three.js, golang and mongodb.
  • Source: GitHub Gitee | Document: Gitee | Demo: GitHub Gitee | Video: Weibo Bilibili | Assets: BaiduNetdisk(rfja)
  • Technology Stack: html, css, javascript, rollup, react.js, webgl, three.js, golang, mongodb, nodejs, electron, protocol buffers.
  • If helpful to you, please DOnate to support us. thank you!

v0.6.1 is Coming Soon

Starting from v0.6.1, ShadowEditor only provides core features and extended APIs, and other features will be provided in the extensions, just like VSCode. We will develop in the dev branch.

  1. Fix the bug that some versions of go typeface management list report errors.
  2. Hide the model history version tab.
  3. When the sprite is selected, the border is no longer displayed.
  4. Fix searchfield dropdown style bug.

v0.6.0 has Released

  • Release Date: July 24, 2021
  • Update Logs:
  1. Fix the bug that creates a new mongo connection when request.
  2. Check VR in the status bar to enable VR.
  3. Set scene transform.
  4. How to popup a window when click an object: https://gitee.com/tengge1/ShadowEditor/issues/I3APGI
  5. You can enable https in the config.toml.
  6. Add event in the mobile browser to the script: onTouchStart, onTouchEnd, onTouchMove.
  7. Upgrade three.js to r130.
  8. Add VR event to the script: onVRConnected, onVRDisconnected, onVRSelectStart, onVRSelectEnd.
  9. VR all-in-one handle controller supports, for example: htc vive.
  10. Fix the bug of deleting script.
  11. Fix a bug that Geometry can not be serialized due to the upgrade of three.js.
  12. Add material polygonOffset, polygonOffsetFactor, polygonOffsetUnits parameter visualization settings to solve the problem of depth conflict.
  13. Fix a bug that component in mesh cannot save the visible attribute.
  14. Bin type model is no longer supported.
  15. Fix cube texture bug.
  16. Rewrite all the prototype to es6 class in the source code.
  17. Remove the visual module.
  18. Fix a bug that not copy the skyball texture when export a scene.
  19. Fix rain and snow bug.
  20. Modify the background color and lighting, so as not to add the same color as the background and make it difficult to see clearly.
  21. Fix particle emitter bug.
  22. Fix cloth bug.
  23. Fix the bug of dynamic setting shadow.

Feature List

  • General
    • Cross-platform
      • Windows, Linux, Mac
      • Desktop, Web
    • Multi-language support
      • English、中文、繁體中文、日本語、한국어、русский、Le français
    • Assets management
      • scene, mesh, texture, material, audio, animation, screenshot, video, typeface
    • Authority management
      • organization, user
      • role, authority
      • registration, login, password modification
    • Version management
      • Scene history and logs
      • undo, redo, auto saving
    • Player
      • play animations in the scene in real time, and can play full screen and in new window
    • Settings
      • Display, renderer, helpers, filter, weather, control mode, select mode, add mode, language
  • Small scene editing
    • Add mesh
      • 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
    • Built-in objects
      • group
      • plane, cube, circle, cylinder, sphere, icosahedron, torus, torus knot, teapot, lathe
      • unscaled text, 3D text
      • line segments, CatmullRom curve, quadratic Bezier curve, cubic Bezier curve, ellipse curve
      • point marks
      • arrow helper, axes helper
      • sprite
    • Built-in lights
      • ambient light, directional light, point light, spotlight, hemispherical light, rect area light
      • point light, hemispherical light, rect area light helper
    • Built-in components
      • background music, particle emitter
      • sky, fire, water, smoke, cloth
      • berlin terrain, sky sphere
    • Materials editing
      • LineBasicMaterial, LineDashedMaterial, MeshBasicMaterial, MeshDepthMaterial, MeshNormalMaterial
      • MeshLambertMaterial, MeshPhongMaterial, PointsMaterial, MeshStandardMaterial, MeshPhysicalMaterial
      • SpriteMaterial, ShaderMaterial, RawShaderMaterial
    • Post-processing
      • After-image, bokeh, dot screen, FXAA, glitch
      • halftone, pixel, RGB shift, SAO
      • SMAA, SSAA
      • SSAO, TAA
    • Text editing
      • javascript editing with intelligence
      • shader editing
      • json file editing
    • Mesh export
      • gltf、obj、ply、stl、Collada、DRACO
    • Scene publishment
      • Publish scene as static resources, and can be embedded in iframe
    • Examples
      • Arkanoid, camera, particle, ping pong, shader
    • General tools
      • Select, pan, rotate, zoom
      • Perspective view, front view, side view, top view, wireframe mode
      • Screenshot, record
      • Draw point, draw line, draw polygon, spray
      • Measure distance
    • Others
      • VR:cardboard, htc vive, chrome, firefox
      • Bullet physics engine
  • UI Controls
    • Canvas
    • Form: Button, CheckBox, Form, FormControls, IconButton, IconMenuButton, ImageButton, Input, Label, LinkButton, Radio, SearchField, Select, TextArea, Toggle
    • Icon
    • Image: Image, ImageList, ImageSelector, ImageUploader
    • Layout: AbsoluteLayout, AccordionLayout, BorderLayout, HBoxLayout, TableLayout, VBoxLayout
    • Menu: ContextMenu, MenuBar, MenuBarFiller, MenuItem, MenuItemSeparator, MenuTab.
    • Panel
    • Progress: LoadMask
    • Property: ButtonProperty, ButtonsProperty, CheckBoxProperty, ColorProperty, DisplayProperty, IntegerProperty, NumberProperty, PropertyGrid, PropertyGroup, SelectProperty, TextProperty, TextureProperty
    • SVG
    • Table: DataGrid, Table, TableBody, TableCell, TableHead, TableRow
    • Timeline
    • Toolbar: Toolbar, ToolbarFiller, ToolbarSeparator
    • Tree
    • Window: Alert, Confirm, Message, Photo, Prompt, Toast, Video, Window

Requirements

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

The following is only required when you want to build from source.

  1. Golang 1.14.2+
  2. NodeJS 14.1+
  3. gcc 9.3.0+ (tdm-gcc, MinGW-w64 or MinGW on Windows, and make sure gcc can be accessed through the command line)
  4. git 2.25.1+

Note: The version number is for reference only.

Download and Compile

You can use git to download the source code.

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

In China, github is really slow, you can use gitee instead.

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

Build on both Windows and Ubuntu

Web Version:

  1. If you are in China, run npm run set-proxy to set golang and nodejs proxy.
  2. Run npm install to install nodejs dependencies.
  3. Run npm run build to build the server and web.
  4. Edit build/config.toml, and modify the mongodb host and port.
  5. Run npm start to launch the server. You can now visit: http://localhost:2020.
  6. If you enable https in the config file. Please visit: https://localhost:2020.

Desktop Version:

  1. Download MongoDB and unzip it in the utils/mongodb folder.
  2. Build web version.
  3. Run npm run build-desktop to build a desktop app in the folder build/desktop.

Install as Windows Service

  1. Open PowerShell or cmd in the build folder as administrator.
  2. Run .\ShadowEditor install to install ShadowEditor as a service.
  3. Run .\ShadowEditor start to start ShadowEditor service.
  4. Now you can visit: http://localhost:2020.
  5. You can also manage this service in the Windows Services Manager.

Install as Ubuntu Service

  1. Edit ./scripts/service_linux/shadoweditor.service, set the right path.
  2. Run sudo cp ./scripts/service_linux/shadoweditor.service /etc/systemd/system/.
  3. Run sudo systemctl daemon-reload to reload the service daemon.
  4. Run sudo systemctl start shadoweditor to start service.
  5. Run sudo systemctl enable shadoweditor to auto start service.

Command Line Usage

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.

Development Guide

  1. Download and install NodeJs, golang, MongoDB and Visual Studio Code.
  2. It is recommended to install the following VSCode extensions which may be helpful.
ESLint, Go, Shader languages support for VS Code, TOML Language Support.

npm scripts usage:

npm install:            install nodejs dependencies.
npm run build:          build the server and web client.
npm run build-server:   build only the server. (For development)
npm run build-web:      build only the web client. (For development)
npm run build-desktop:  build the desktoop version.
npm run dev:            build the web client automatically when files changes.(For development)
npm run copy:           Copy assets from web folder to build folder.
npm run start:          start the web server.
npm run set-proxy:      set golang and nodejs proxy. (In China only)
npm run unset-proxy:    unset golang and nodejs proxy.
npm run install-dev:    install golang development tools.
npm run eslint:         check js files and fix errors automatically.
npm run clean:          delete the web and desktop builds.
npm run clear:          delete useless nodejs packages.

Contributing

Expand to view details

ShadowEditor is a project for both users and developers. You can contribute and try your idea on this project. No pension, but a lot of fun. To contribute, you should:

  1. Fork the repository.
  2. Create Feat_xxx branch.
  3. Commit your code.
  4. Create Pull Request.

Note: DO NOT submit large binaries, or the Pull Request may be rejected. If required, you can add the files or directories to be ignored to the .gitignore file.

Frequently Asked Questions

Expand to view details
  1. Failed when upload models.

You need to compress the model assets into a zip file, and the entry file cannot be nested in a folder. The server will decompress and put it in the ./build/public/Upload/Model folder, and add a record in the MongoDB _Mesh collection.

  1. How to combine multiple models together?

Basic geometry supports multiple levels of nesting. You can add a group (in the geometry menu), and then drag multiple models onto the group in the Hierachy Panel.

  1. How to enable authority?

Edit config.toml and set authority.enabled to true. The default administrator username is admin and the password is 123456.

  1. The brower report asm.js has been disabled because the script debugger is connected. Please disconnect the debugger to enable asm.js. Error.

Complete error: asm.js has been disabled because the script debugger is connected. Please disconnect the debugger to enable asm.js. ammo.js (1,1) SCRIPT1028: SCRIPT1028: Expected identifier, string or number ShadowEditor.js (3948,8) SCRIPT5009: 'Shadow' is not defined.

Solution: Tencent browser does not support ammo.js (WebAssembly) compiled with Emscripten, it is recommended to use Chrome or Firebox instead.

  1. How can I upgrade from C# to golang version?

The data structure and web client is not changed, just copy ./ShadowEditor.Web/Upload/ folder to build/public/Upload/.

  1. The desktop version cannot be opened.

Windows requires Visual C++ Redistributable for Visual Studio 2015. You can install from: https://www.microsoft.com/en-us/download/details.aspx?id=48145
If the desktop version cannot be opened, you can view logs.txt; if the port conflicts, you can modify the MongoDB and website ports in resources/app/config.toml.

  1. How can I create a https certificate?

Install openssl, and git client already contains one; Open cmd, Powershell or shell, and run the following commands:

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

Among the generated files, certificate.pem is the certificate, and privatekey.pem is the key.

License

MIT License

Open Source Projects

Expand to view details

Thanks to the following open source projects.

https://github.com/golang/go
https://github.com/BurntSushi/toml
https://github.com/dgrijalva/jwt-go
https://github.com/dimfeld/httptreemux
https://github.com/inconshreveable/mousetrap
https://github.com/json-iterator/go
https://github.com/mozillazg/go-pinyin
https://github.com/otiai10/copy
https://github.com/sirupsen/logrus
https://github.com/spf13/cobra
https://github.com/spf13/viper
https://github.com/urfave/negroni
https://go.mongodb.org/mongo-driver

https://github.com/facebook/react
https://github.com/mrdoob/three.js
https://github.com/rollup/rollup
https://github.com/babel/babel
https://github.com/eslint/eslint
https://github.com/rollup/rollup-plugin-babel
https://github.com/rollup/rollup-plugin-commonjs
https://github.com/rollup/rollup-plugin-json
https://github.com/rollup/rollup-plugin-node-resolve
https://github.com/egoist/rollup-plugin-postcss
https://github.com/rollup/rollup-plugin-replace
https://github.com/mjeanroy/rollup-plugin-strip-banner
https://github.com/andyearnshaw/rollup-plugin-bundle-worker

https://github.com/tweenjs/tween.js
https://github.com/JedWatson/classnames
https://github.com/d3/d3-dispatch
https://github.com/i18next/i18next
https://github.com/js-cookie/js-cookie
https://github.com/facebook/prop-types
https://github.com/codemirror/CodeMirror
https://github.com/jquery/esprima
https://github.com/tschw/glslprep.js
https://github.com/zaach/jsonlint
https://github.com/acornjs/acorn
https://github.com/kripken/ammo.js
https://github.com/dataarts/dat.gui
https://github.com/toji/gl-matrix
https://github.com/squarefeet/ShaderParticleEngine
https://github.com/mrdoob/stats.js
https://github.com/mrdoob/texgen.js
https://github.com/yomotsu/VolumetricFire
https://github.com/jonbretman/amd-to-as6
https://github.com/chandlerprall/ThreeCSG

More Repositories

1

lol-model-viewer

League of legends model and animation viewer based on WebGL. https://tengge1.github.io/lol-model-viewer
JavaScript
239
star
2

learn-tensorflow-sharp

TensorflowSharp tutors and examples.
C#
120
star
3

DTcms

动力启航网站管理系统(简称DTcms),是目前国内ASP.NET开源界少见的优秀开源管理系统,基于 ASP.NET(C#)+ MSSQL(ACCESS) 的技术开发,全部100%免费开放源代码。
C#
88
star
4

datav

阿里云DataV数据可视化。
61
star
5

ShadowEditor-examples

ShadowEditor Demo. https://tengge1.github.io/ShadowEditor-examples/
JavaScript
43
star
6

ExtApp

ExtApp是一个基于三层架构,使用NHibernate、API Controller和ExtJs创建的,用于简化政府和企业应用开发的Web应用程序框架。
JavaScript
14
star
7

python-for-s60-tutorial

tengge pys60教程。
Python
7
star
8

THREE.Math

将three.js r98 Math相关模块使用C#改写。(已完成)
C#
6
star
9

hiwebgl

hiwebgl官网官方WebGL教程。
HTML
6
star
10

webgl-study-notes

《WebGL编程指南》学习笔记,从最简单的点线面的绘制,到复杂的MVP矩阵变换、光源、混合、雾效、帧缓冲区、多个物体处理都有代码示例,非常全面。
HTML
5
star
11

ZeroGIS

原生Javascript实现的简单3D GIS,支持谷歌地图、必应地图、OpenStreetMap、搜索地图、天地图。
JavaScript
5
star
12

video-cms

使用Python Flask和Bootstrap做的简单视频在线播放网站。
JavaScript
3
star
13

editor-ui

UI framework for editors based on react.js and rollup.
JavaScript
3
star
14

go-three-math

Golang implementation of the three.js math module.
Go
3
star
15

red-alert3-tool

红警3局域网建立工具和CDKEY自动分配器。
Visual Basic
3
star
16

proj.net

Proj.NET performs point-to-point coordinate conversions between geodetic coordinate systems for use in fx. Geographic Information Systems (GIS) or GPS applications. The spatial reference model used adheres to the Simple Features specification.
C#
3
star
17

javatool

Java精灵 2.0.0_s60v3v5,塞班s60系统一键去除短信收费、游戏汉化、修改分辨率、制作RMS BT游戏。
Python
3
star
18

LearningOpenCV

C++
2
star
19

full-screen

使用Windows API实现全屏,F1全屏,ESC取消全屏。
C++
2
star
20

m3u8_downloader

下载并合并m3u8视频。
Python
2
star
21

unity3d-scene-exporter

导出Unity3D中的场景为XML或JSON文件。
C#
2
star
22

webgl-guide-code

《WebGL编程指南》自带光盘。
JavaScript
2
star
23

well-control

油田压井施工计算软件:司钻法和工程师法
C#
2
star
24

simple-map

使用canvas和bing地图制作的简单地图,支持平移、缩放。
JavaScript
1
star
25

ThreeEarth

Three.js实现的简单三维GIS。(放弃)
JavaScript
1
star
26

xtype-html5

使用xtype.js封装的html5标签。
JavaScript
1
star
27

PackageManager

Javascript包管理器,提供包的管理和动态加载功能,避免开始加载资源过多,导致载入缓慢。
JavaScript
1
star
28

bad-apple

《东方幻想乡》使用命令行界面播放视频。
C++
1
star
29

LearnPython

Python
1
star
30

j2me-tutorial

tengge j2me教程。
Java
1
star
31

hewebgl

hewebgl官网ThreeJs初级教程。
JavaScript
1
star
32

particle-gpu

three.js粒子效果。
HTML
1
star
33

y-designer

Web应用设计器,可视化创建后台应用。
PHP
1
star
34

learn-webgl

WebGL学习
JavaScript
1
star
35

tengge1

1
star
36

xiaoli-chat

微信公众号版小璃聊天机器人,个人即可申请使用。
PHP
1
star
37

seepage-mechanics

渗流力学计算机作业,两个小程序。
C++
1
star
38

RayTracer

RayTracer
C++
1
star
39

RainEffect

JavaScript
1
star
40

neuron-dotnet-cn

NeuronDotNet项目汉化翻译。
C#
1
star
41

win32-dialog-starter

Win32对话框应用程序创建模板。
C++
1
star
42

keyboard-hook

键盘钩子,记录所有程序键盘按键。
C
1
star
43

quickui-trail

quickui试用版,仅供学习研究使用。
HTML
1
star
44

yd

YDesigner产品官网
PHP
1
star
45

bing-maps-tile-system

微软bing地图瓦片系统。
C#
1
star
46

handwriting-recognition

汉字手写识别。
ASP
1
star
47

questionnaire

问卷调查系统,毕业设计项目。
PHP
1
star
48

design-pattern

6大设计原则和23种设计模式。
C#
1
star
49

xtype.js

最简单的渐进式开发框架xtype.js,使用js代替html,对svg同样适用。
JavaScript
1
star
50

video-change

在视频文件末尾连接一个txt文件,改变视频文件的大小和md5值。
Batchfile
1
star
51

generate-ssl-certificate

自己为部署在iis上的网站制作https/ssl证书,开启https访问。
C
1
star
52

xtype-svg

使用xtype.js封装的svg标签。
JavaScript
1
star
53

WebWorldWind-rollup

Rewrite WebWorldWind with es6 and rollup.
JavaScript
1
star
54

MaterialFramework

基于ReactJs和Material UI的前端框架。
JavaScript
1
star
55

android-book

安卓电子书源码(学习小技巧)。
Java
1
star
56

GeoAPI

GeoAPI.NET项目提供了基于OGC / ISO标准的通用框架,以提高.NET GIS项目之间的互操作性。(翻译)
C#
1
star
57

Sharp3D.Math

Sharp3D.Math contains fundemental classes to dealing with numerics on the .NET platform. It contains various mathematical structures such as vectors, matrices, complex numbers and contains methods for numerical integration, random numbers generation and other object-oriented numeric functions.
C#
1
star
58

proj4net

Proj4Net is a C#/.Net library to transform point coordinates from one geographic coordinate system to another, including datum transformation. The core of this library is a port of the Proj4J library.
C#
1
star
59

bootstrap-es6

bootstrap-es6将bootstrap框架中的组件封装为类,可以像ExtJs那样通过javascript动态生成页面。这对于功能特别多、特别复杂的页面特别有用。
HTML
1
star