Skip to content

Latest commit

 

History

History
153 lines (114 loc) · 9.2 KB

README-en.md

File metadata and controls

153 lines (114 loc) · 9.2 KB
Raw

Shadow Editor

Language: 中文 / 繁體中文 / English

  • Name: Shadow Editor
  • Version: v0.3.0
  • Introduction: Scene editor based on three.js.

v0.3.0 Update

  • Release date: August 11, 2019
  • Update log:
  1. Starting with v0.3.0, a new editor based on react.js will be released, and the v0.2.6_old branch will be deleted on August 17, 2019.
  2. In addition to tweened animations and a few bugs, the new editor has reached the old level.
  3. Compared to the old editor, the new version has the following features:
    1. Rewrite the front-end UI with react.js, the interface is improved in appearance and the speed is increased accordingly.
    2. Upgrade the three.js to r107 version, and the three.js components are also upgraded to the latest version.
    3. Fix a lot of bugs and logic that affect performance. Rendering is no longer driven by events, and rendering speed is greatly improved.
    4. 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.
    5. The property panel group can be folded, and some attribute groups are folded by default, which is convenient to use.
    6. The resource panel is placed to the left to support paging. When the number of resources is large, the loading speed is faster.
    7. Firefox browser compatibility adjustments.
    8. Click on the glasses icon on the right side of the scene tree to quickly show hidden controls on a branch.
    9. Determine the initial language of the editor based on the browser language.
  4. 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.

Project screenshot

image

                                                                                                                               
SourceGitHubCode CloudDocumentGitHubCode Cloud
DemoGitHubCode Cloud

The main function

Description: Some features of the new version may not be completed yet.

  1. 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.
  2. 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.
  3. Built-in light source: ambient light, parallel light, point light source, spotlight, hemispherical light, rectangular light.
  4. 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 of anim to support animation. A variety of 3D files support both json and binary formats. The mmd file supports both pmd and pmx formats, supporting models and camera animations in the vmd format. It is also the only editor that supports lmesh (lolking website lol model).
  5. 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.
  6. Support textures: color texture, transparent texture, bump texture, normal texture, displacement texture, mirror texture, environment texture, lighting texture, occlusion texture, self-illumination texture.
  7. Support texture: picture, cube texture, video texture.
  8. Built-in components: background music, particle emitters, sky, flame, water, smoke, cloth components.
  9. Visually modify the properties of objects such as scenes and cameras, and provide more than 40 different modification panels.
  10. Edit js scripts, shader programs online, with smart tips.
  11. Bring your own player, real-time demo scene dynamic effects, support full screen and new window playback, you can directly embed in project iframe.
  12. Support tween animation, skeletal animation, particle animation, mmd animation, lmesh animation (lolking website lol model).
  13. 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.
  14. Supports five kinds of controllers: first view controller, flight controller, track controller, pointer lock controller and trackball controller.
  15. 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).
  16. Provide history and log functions to support undo and redo.
  17. Support for exporting gltf, obj, ply, stl models.
  18. 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.
  19. With pan, rotate, zoom, draw points, lines, decals on the surface of the object, real-time statistics of the number of objects, vertices, triangles.
  20. Support scene one-key export function.
  21. Chinese and English bilingual support.
  22. Supports hue-rotate, saturation, brightness, blur, contrast, grayscale, invert, and sepia filters.
  23. Support for version control.

user's guidance

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.

  1. Install NodeJs. In the outermost directory, execute the following command.
Npm install
Npm run build
  1. 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
  1. Edit the file ShadowEditor.Web/Web.config and change 27017 to the port of the MongoDB service on your computer.
<add key="mongo_connection" value="mongodb://127.0.0.1:27017" />

  1. Open the project with Visual Studio 2017 and generate the ShadowEditor.Web project.

  2. Deploy ShadowEditor.Web on iis to access it in the browser.

  3. 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
  1. 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

common problem

  1. 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.

  1. 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.

Related Links