Skip to content

fcgll520/ShadowEditor

 
 

Repository files navigation

Shadow Editor

Supported Languages: 中文 / 繁體中文 / English / 日本語 / 한국어 / русский / Le français

  • 名称:Shadow Editor
  • 版本:v0.3.7(开发中)
  • 简介:基于three.js的场景编辑器。
  • 源码:GitHub Gitee | 文档:GitHub Gitee | 示例:GitHub Gitee
  • 开发计划:小场景搭建、地形编辑、模型批量添加渲染、地表植被附属物编辑、物理引擎、数据可视化、光线追踪引擎。
  • 如果对您有帮助,请【捐赠】支持项目发展,谢谢。

v0.3.7即将更新

  1. 重置系统:admin登录,点击系统菜单下的重置系统功能,配置表变为未初始化状态,组织机构、角色、用户、权限表备份后删除。
  2. 初始化系统:点击系统菜单下的初始化功能,配置表变为初始化状态,默认注册用户角色是一般用户;自动创建管理员用户游客三个角色; 自动创建管理员用户,账号admin、密码123456
  3. 重置系统前,一部分表被用数据库管理工具删除,一部分表被清空。点击重置系统,可以正常重置。
  4. 登录系统:点击登录,使用admin123456登录系统,页面刷新。
  5. 注销系统:登录后,点击右上角注销,页面刷新,退出到未登录状态。
  6. 注册用户:输入用户名cs、密码123、确认密码123、姓名测试,点击确定,提示注册成功。使用cs123可以成功登录系统。管理员登录,查看角色是用户,正确。
  7. 修改密码:管理员登录,原密码123456,新密码123,确认密码123,修改成功。使用admin123可以正常登录。
  8. 还原以前删除的C#THREE.js项目。
  9. 禁用Session,避免第一次打开网页时会话状态已创建一个会话 ID,但由于响应已被应用程序刷新而无法保存它。的报错。
  10. 管理员组默认具有所有权限。
  11. 修复一些由于无权限报错,导致页面变空白的bug。
  12. 增加更多的错误提示。
  13. 选中效果优化,默认选中颜色修改。
  14. 新增鼠标移动到物体上的效果。

v0.3.6更新

  • 发布日期:2019年11月3日
  • 更新日志:
  1. 点击系统菜单中的初始化命令,系统会默认创建管理员用户游客三个角色和管理员用户。管理员用户名是admin,默认密码是123456,角色是管理员
  2. 点击右上角登录按钮,输入admin123456登录系统。点击右上角的修改密码,可以修改登录用户的密码。
  3. 点击系统菜单下的角色管理,可以添加、修改、删除角色。系统内置角色:管理员(具有所有权限)、用户(注册是默认角色所具有的权限)、游客(未登录时的权限)。
  4. 点击系统菜单下的用户管理,可以添加、修改、删除用户,为用户设置角色。
  5. 点击系统菜单下的权限管理,可以为角色设置权限。
  6. 点击系统菜单下的重置系统,会删除所有配置、角色、用户、机构、权限,恢复初始化前的状态。
  7. 系统菜单只有在Web.config里面开启权限,系统未初始化或使用管理员用户登录后出现。
  8. 未登录时,点击注册按钮,输入用户名、密码、姓名注册,默认角色是用户
  9. 登录后,点击右上角注销按钮,可以退出登录状态。
  10. 组织机构管理:添加机构、添加子机构、编辑机构、删除机构。
  11. 开启权限后,每个用户只能看到自己的场景、模型、贴图、材质、音频、动画、粒子、预设体、截图、视频资源。
  12. 删除模型、贴图、截图、视频改为直接删除文件所在文件夹,请注意备份。
  13. 管理员Administrator组拥有全部权限,不受权限设置限制;其他用户组根据设置的访问权限访问后台接口。
  14. 系统设置:修改默认注册用户的角色。
  15. 场景编辑增加是否公开设置,设置公开时,所有人都能查看,但是编辑后不能保存;设置私有时,只能自己查看编辑。
  16. Web.config中新增登录时长设置。
  17. 用户管理新增重置密码功能。
  18. 添加、修改用户,新增设置用户所属组织机构功能。
  19. 为组织机构设置管理员功能。
  20. 不登录可以查看所有公开场景。
  21. 不登录,只显示菜单栏(少数几个菜单)、场景面板、任务栏,登录后显示所有功能。
  22. 登录和注销自动刷新页面。

项目截图

image

主要功能

  1. 基于three.js/WebGL的3D场景在线编辑器,服务端使用MongoDB保存动画、音频、类别、角色、贴图、材质、网格模型、粒子、预设体、场景数据。
  2. 内置几何体:平面、正方体、圆、圆柱体、球体、二十面体、轮胎、纽结、茶壶、酒杯、精灵、文本;线段、CatmullRom曲线、二次贝塞尔曲线、三次贝塞尔曲线、椭圆曲线。
  3. 内置光源:环境光、平行光、点光源、聚光灯、半球光、矩形光。
  4. 支持多种不同3D格式模型和动画导入。支持3ds3mfamfassimp(anim)、awdbabylonbinarybvh(anim)、colladactmdracofbx(anim)、gcodegltf(anim)、js(anim)、json(anim)、kmzlmesh(anim)、md2mmd(anim)、nrrdobjpcdpdbplyprwmsea3d(anim)、stlvrmvrmlvtkx 31种3D文件格式,带anim的表示支持动画。多种3D文件同时支持json和二进制格式。mmd文件同时支持pmdpmx格式,支持vmd格式的模型和相机动画。它也是唯一支持lmesh(lolking网站lol模型)的编辑器。
  5. 内置材质:线条材质、虚线材质、基本材质、深度材质、法向量材质、兰伯特材质、冯氏材质、点云材质、标准材质、物理材质、精灵材质、着色器材质、原始着色器材质。
  6. 支持纹理:颜色纹理、透明纹理、凹凸纹理、法线纹理、位移纹理、镜面纹理、环境纹理、光照纹理、遮挡纹理、自发光纹理。
  7. 支持贴图:图片、立方体贴图、视频贴图。
  8. 内置组件:背景音乐、粒子发射器、天空、火焰、水、烟、布组件。
  9. 可视化修改场景、相机等物体属性,提供40多种不同修改面板。
  10. 在线编辑js脚本、着色器程序,带智能提示。
  11. 自带播放器,实时演示场景动态效果,支持全屏和新窗口播放,可以直接嵌入项目iframe中。
  12. 支持补间动画、骨骼动画、粒子动画、mmd动画、lmesh动画(lolking网站lol模型)。
  13. 支持场景、模型、贴图、材质、音频、动画、粒子、预设体、截图、视频管理,支持自定义分类,根据汉字和拼音快速搜索。其中,粒子、预设体暂未实现相应功能。
  14. 支持第一视角控制器、飞行控制器、轨道控制器、指针锁定控制器、轨迹球控制器5种控制器。
  15. 支持点阵化特效、颜色偏移特效、残影特效、背景虚化、快速近似抗锯齿(FXAA)、毛刺特效、半色调特效、全屏抗锯齿(SSAA)、像素特效、可扩展环境光遮挡(SAO)、多重采样抗锯齿(SMAA)、屏幕空间环境光遮蔽(SSAO)、时间抗锯齿(TAA)。
  16. 提供历史记录和日志功能,支持撤销、重做。
  17. 支持导出gltfobjplystlColladaDRACO模型。
  18. 支持bullet物理引擎。正方体、圆形、圆柱体、二十面体、酒杯、平面、球体、茶壶、轮胎、纽结和加载的模型都支持刚体组件。支持可视化设置碰撞体形状(正方体、球体)、质量和惯性。
  19. 具有平移、旋转、缩放、在物体表面绘制点、线、贴花的工具,实时统计场景种物体、顶点、三角形数量。
  20. 支持场景发布功能,可以将场景发布成静态资源,部署到任何一台服务器上。
  21. 软件内置语言:中文繁體中文English日本語한국어русскийLe français
  22. 支持色调旋转(hue-rotate)、饱和度、亮度、高斯模糊(blur)、对比度、灰度、颜色反转(invert)、复古(sepia)滤镜。
  23. 支持版本控制。
  24. 支持截图工具,视频录制工具。
  25. 内置权限管理:组织机构管理、用户管理、角色管理、权限管理、系统初始化、系统重置、注册、登录、修改密码。

使用指南

该项目仅支持Windows系统,电脑上需要安装.Net Framework 4.5。

兼容火狐和谷歌浏览器,推荐使用最新版谷歌浏览器。

  1. 安装NodeJs,在最外层目录,执行以下命令。
npm install
npm run build
  1. 下载MongoDB,安装并启动MongoDB服务。MongoDB服务的默认端口为27017。

MongoDB下载地址:https://www.mongodb.com/download-center/community

可以下载zip版本,然后在MongoDB的bin文件夹执行以下命令安装服务,注意修改路径。

mongod --dbpath=D:\mongodb\db --logpath=D:\mongodb\log\mongoDB.log --install --serviceName MongoDB
net start MongoDB
  1. 编辑文件ShadowEditor.Web/Web.config,将27017修改为你电脑上MongoDB服务的端口。
<add key="mongo_connection" value="mongodb://127.0.0.1:27017" />
  1. 使用Visual Studio 2017打开项目,生成ShadowEditor.Web项目。

  2. ShadowEditor.Web部署在iis上即可在浏览器中访问。

  3. 为了保存各种类型文件能正常下载,会在iis上添加以下两个MIME类型,正式部署请注意安全。

文件扩展名 MIME类型 说明
.* application/octet-stream 各种格式后缀文件
. application/octet-stream 无后缀文件
  1. 编译文档,请安装gitbook。
npm install -g gitbook-cli

然后切换到docs-dev目录,安装gitbook插件。

gitbook install

然后切换到上级目录,执行以下命令生成文档。

npm run docs

常见问题

  1. 上传模型时为什么都是上传失败?

需要把模型贴图等资源压缩成一个zip包,而且入口文件不能嵌套文件夹。服务端会解压上传的zip包放到~/Upload/Model文件下,并在MongoDB _Mesh表里添加一条数据。

  1. 如何将多个模型组合在一起?

基本几何体都支持多层嵌套。可以添加一个(在几何体菜单中),然后在场景树状图上,将多个模型拖动到上。

相关链接

About

3D scene editor based on three.js and MongoDB. https://tengge1.github.io/ShadowEditor-examples/

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 89.7%
  • C# 6.2%
  • CSS 1.4%
  • HTML 1.4%
  • GLSL 0.8%
  • Python 0.5%