Giter VIP home page Giter VIP logo

tengge1 / shadoweditor Goto Github PK

View Code? Open in Web Editor NEW
1.6K 63.0 297.0 75.39 MB

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

License: MIT License

CSS 1.26% HTML 1.03% JavaScript 87.67% GLSL 4.24% Python 0.05% Go 5.75% Batchfile 0.01%
webgl editor scene game-engine threejs shadow-editor lol three golang web-gis

shadoweditor's Introduction

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.

Good news! The version based on vite4 + vue3 + ts5 + ant-design-vue7 is coming soon. Click here to view more details.

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

shadoweditor's People

Contributors

dependabot[bot] avatar jedediahxu avatar magic-zhu avatar tengge1 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

shadoweditor's Issues

Error: spawn ./ShadowEditor ENOENT

when I npm run start.
Program error: ./ShadowEditor serve --config ./config.toml
Error: spawn ./ShadowEditor ENOENT
Emitted 'error' event on ChildProcess instance;

Linux服务器上编译失败的问题

大佬你好,我想问一下这个项目npm install的时候总是报错,报错内容如图所示,centos Ubuntu我都试了一样的错误
image
请问如何解决呢 麻烦了

使用three.js载入lol模型

您好,最近在做一个类似英雄gallery的项目,发现您已经好像继承了three.js读取lol模型的操作,基于viewer.js的,读取lmesh和lanim,我查看了这个项目,暂时没有发现这部分Js文件,请问如果可以的话,能否给出一段demo,谢谢~

How to implement view button functionalities?

Hello I am implementing several buttons in the Three.js editor's toolbar that would allow me to change the view of the model with a click of a button. But I do not know how to implement the functionalities for them. Here's a snippet of my code for it so far:
toolbar

export scene ...

The new Version 0.54 work great !

This time i was able to export the published content. And this time it was inside the "temp" folder. So i could use it and upload it and so on. Next point, which is important, is to have this "export scene" or "save scene" (local). It works with "export scene". But when i export it, there is no option to import the Scene. Do you know what for the "export scene" is meant ?

As mentioned earlier, saving your own created scene localy, would be awesome. Thanks.

English version

Hello ,
This looks great but is there an English version ?

v0.6.0 version under the issue.

Compilation and packaging needs a lot of environment 5.0 release windows version bug too much, God can package the v0.6.0 version under the issue.

ShadowEditor 代码编辑器使用问题

作者你好,这是我我在使用你的代码编辑器是遇到的问题。反馈如下
建议和unity 一样可以使用外部代码编辑器来解决以下吐血问题。
//代码编辑器使用问题

1;?调试不方便,代码报错时黑屏,导致辛苦写的代码丢失,没有自动保存功能
2;?? 写代码有保存丢失问题 /编辑器写入代码有不成功概率,改完代码还是上一次代码
3;??不能保存代码,丢失代码问题, 代码编辑器存在很大问题
4;无法写代码问题,编写代码后,启用播放后任然是没有。
5;写代码时要特别注意,不够智能
6;报错时无法弹出代码编辑器
7;?javaScript定时器无法结束,播放停止后还在运行
9;注释代码目前只能单注释
10;无法快速定位查找,替换
11;无法保存问题, 在有代码错误情况时无法保存,但运行后错误代码直接黑屏代码直接丢失。

代码编辑器总结???(--如果不能调用外部代码编辑器编写代码,编辑器问很难解解决---)

希望增加一些支持

1、能否增加原模型obj上传格式支持?
2、能否支持拖拽上传?
3、能否支持标本模型增加部位标注功能?

Is Video Texture example broken?

Hello,
I'm discovering your editor on Ubuntu 20.04
Both the web and the linux app can't play the video texture, getting error:
[17426:0515/085948.270756:ERROR:gles2_cmd_decoder.cc(10716)] [.WebGL-0x138873136700]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?
Maybe I'm missing something?
Any idea?
Thanks

交流学习

您好!ShadowEditor是个很好的创意,我觉得如果和应用能结合起来,一定能体现巨大的价值。
希望有机会交流、学习、合作。我的email: [email protected]

同学,您这个项目引入了465个开源组件,存在64个漏洞,辛苦升级一下

检测到 tengge1/ShadowEditor 一共引入了465个开源组件,存在64个漏洞

漏洞标题:Google Chrome 输入验证错误漏洞
缺陷组件:[email protected]
漏洞编号:CVE-2021-21223
漏洞描述:Google Chrome是美国谷歌(Google)公司的一款Web浏览器。
Google Chrome 存在输入验证错误漏洞,该漏洞源于V8浏览器引擎中的整数溢出而导致的。远程攻击者可利用该漏洞在目标系统上执行任意代码。以下产品及版本受到影响:Google Chrome: 87.0.4280.66, 87.0.4280.141, 88.0.4324.96, 88.0.4324.146, 88.0.4324.150, 88.0.4324.182, 89.0.4389.72, 89.0.4389.90, 89.0.4389.114, 89.0.4389.128, 90.0.4430.72。
国家漏洞库信息:https://www.cnvd.org.cn/flaw/show/CNVD-2021-31242
影响范围:(∞, 10.4.4)
最小修复版本:10.4.4
缺陷组件引入路径:[email protected]>[email protected]

另外还有64个漏洞,详细报告:https://mofeisec.com/jr?p=af7e90

CentOS ARM64上启动报错的问题

大佬你好 根据你的文章提示一步一步的进行编译都是没有问题的 唯独等到npm start的时候报了这个错误 不知道啥原因
image

make it a StandAlone App by Node-JS or Electron JS

Hi.

Your ThreeJS editor looks very promising. I would like to know, if it is possible to make the editor as a
stand alone App. Or if you can show a "how to" tutorial to do it by our selfs. Thank you.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.