- Name: Shadow Editor
- Version: v0.3.0
- Introduction: Scene editor based on
three.js
.
- Release date: August 11, 2019
- Update log:
- Starting with
v0.3.0
, a new editor based onreact.js
will be released, and thev0.2.6_old
branch will be deleted on August 17, 2019. - In addition to tweened animations and a few bugs, the new editor has reached the old level.
- Compared to the old editor, the new version has the following features:
- Rewrite the front-end UI with
react.js
, the interface is improved in appearance and the speed is increased accordingly. - Upgrade the
three.js
tor107
version, and thethree.js
components are also upgraded to the latest version. - Fix a lot of bugs and logic that affect performance. Rendering is no longer driven by events, and rendering speed is greatly improved.
- Support the modification of the internal component name and position of the model, and support the placement of geometry, groups, lights, etc. inside the model.
- The property panel group can be folded, and some attribute groups are folded by default, which is convenient to use.
- The resource panel is placed to the left to support paging. When the number of resources is large, the loading speed is faster.
- Firefox browser compatibility adjustments.
- Click on the glasses icon on the right side of the scene tree to quickly show hidden controls on a branch.
- Determine the initial language of the editor based on the browser language.
- Rewrite the front-end UI with
- The server and data structure have not been changed. If you have not changed the front end, you can upgrade to the new version directly.
Source | GitHub | Code Cloud | Document | GitHub | Code Cloud |
Demo | GitHub | Code Cloud |
Description: Some features of the new version may not be completed yet.
- Based on the three-dimensional scene online editor of three.js/WebGL, the server uses
MongoDB
to save animation, audio, category, character, texture, material, mesh model, particle, preset body, scene data. - Built-in geometry: plane, cube, circle, cylinder, sphere, icosahedron, tire, knot, teapot, wine glass, elf, text; line segment, CatmullRom curve, quadratic Bezier curve, cubic Bezier curve , elliptic curve.
- Built-in light source: ambient light, parallel light, point light source, spotlight, hemispherical light, rectangular light.
- Support a variety of different 3D format models and animation imports. Support
3ds
,3mf
,amf
,assimp
(anim),awd
,babylon
,binary
,bvh
(anim),collada
,ctm
,draco
,fbx
(anim),gcode
,gltf
(anim),js
(anim),json
(anim),kmz
,lmesh
(anim),md2
,mmd
(anim),nrrd
,obj
,pcd
,pdb
,ply
,prwm
,sea3d
(anim),stl
,vrm
,vrml
,vtk
,x
31 kinds of 3D file format, with the support ofanim
to support animation. A variety of 3D files support bothjson
and binary formats. Themmd
file supports bothpmd
andpmx
formats, supporting models and camera animations in thevmd
format. It is also the only editor that supportslmesh
(lolking website lol model). - Built-in materials: line material, dashed material, basic material, depth material, normal vector material, Lambert material, Fung material, point cloud material, standard material, physical material, sprite material, shader material, raw shader Material.
- Support textures: color texture, transparent texture, bump texture, normal texture, displacement texture, mirror texture, environment texture, lighting texture, occlusion texture, self-illumination texture.
- Support texture: picture, cube texture, video texture.
- Built-in components: background music, particle emitters, sky, flame, water, smoke, cloth components.
- Visually modify the properties of objects such as scenes and cameras, and provide more than 40 different modification panels.
- Edit js scripts, shader programs online, with smart tips.
- Bring your own player, real-time demo scene dynamic effects, support full screen and new window playback, you can directly embed in project
iframe
. - Support tween animation, skeletal animation, particle animation, mmd animation, lmesh animation (lolking website lol model).
- Support scenes, models, textures, materials, audio, animation, particles, presets, character resource management, support custom classification, and quickly search according to Chinese characters and pinyin. Among them, the particle, preset body, and role resource management have not yet achieved the corresponding functions.
- Supports five kinds of controllers: first view controller, flight controller, track controller, pointer lock controller and trackball controller.
- Supports dot matrix effects, color shift effects, afterimage effects, background blur, fast approximation anti-aliasing (FXAA), glitch effects, halftone effects, full-screen anti-aliasing (SSAA), pixel effects, scalable ambient light Occlusion (SAO), Multi-Sampling Anti-Aliasing (SMAA), Screen Space Ambient Occlusion (SSAO), Time Anti-Aliasing (TAA).
- Provide history and log functions to support undo and redo.
- Support for exporting
gltf
,obj
,ply
,stl
models. - Support for the
bullet
physics engine. Rigid body components are supported by cubes, circles, cylinders, icosahedrons, wine glasses, planes, spheres, teapots, tires, knots, and loaded models. Support visualization to set the shape of the collision body (square, sphere), mass and inertia. - With pan, rotate, zoom, draw points, lines, decals on the surface of the object, real-time statistics of the number of objects, vertices, triangles.
- Support scene one-key export function.
- Chinese and English bilingual support.
- Supports hue-rotate, saturation, brightness, blur, contrast, grayscale, invert, and sepia filters.
- Support for version control.
This project only supports Windows system, you need to install .Net Framework 4.5 on your computer.
Recommended to use the latest version of Google Chrome, is not guaranteed to be compatible with other browsers.
- Install
NodeJs
. In the outermost directory, execute the following command.
Npm install
Npm run build
- Download
MongoDB
to install and start the MongoDB service. The default port for the MongoDB service is 27017.
MongoDB download address: https://www.mongodb.com/download-center/community
You can download the zip version, then execute the following command to install the service in the bin folder of MongoDB, pay attention to modify the path.
Mongod --dbpath=D:\mongodb\db --logpath=D:\mongodb\log\mongoDB.log --install --serviceName MongoDB
Net start MongoDB
- Edit the file
ShadowEditor.Web/Web.config
and change27017
to the port of the MongoDB service on your computer.
<add key="mongo_connection" value="mongodb://127.0.0.1:27017" />
-
Open the project with
Visual Studio 2017
and generate theShadowEditor.Web
project. -
Deploy
ShadowEditor.Web
on iis to access it in the browser. -
In order to save various types of files for normal download, the following two MIME types will be added to the iis. Please pay attention to the security deployment.
File Extension | MIME Type | Description |
---|---|---|
.* | application/octet-stream | Various Format Suffix Files |
. | application/octet-stream | No suffix files |
- Compile the documentation, please install gitbook.
Npm install -g gitbook-cli
Then switch to the docs-dev
directory and install the gitbook plugin.
Gitbook install
Then switch to the parent directory and execute the following command to generate the document.
Npm run build-docs
- Why is the upload failed when uploading the model?
Resources such as model maps need to be compressed into a zip package, and the import file cannot be nested in folders. The server will extract the uploaded zip package into the ~/Upload/Model
file and add a piece of data to the MongoDB _Mesh
table.
- How to combine multiple models together?
Basic geometry supports multiple levels of nesting. You can add a group
(in the geometry menu) and drag multiple models onto the 'group' on the scene tree.
- Three.js official website: https://threejs.org/
- LOL Model Viewer: https://github.com/tengge1/lol-model-viewer
- Model download 1: https://sketchfab.com/3d-models?features=downloadable
- Model Download 2: https://www.3dpunk.com/work/index.html?category=downloadable