Shadow Editor

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

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

v0.3.8即将更新

新增快捷键Ctrl+Z撤销、Ctrl+Y重做、Ctrl+C复制、Delete删除。
修复模型复制多个后，保存场景后载入场景，只显示第一个的bug。
机构、角色、用户、权限、系统设置、系统初始化、系统重置全部测试完成，没有任何bug。
双击场景中的物体，不再跳转到这个物体的视角。
修复无法设置环境贴图和环境贴图强度bug。
修复资源面板最大化时，每行只有两个bug。
使用GPU选取方式，高亮鼠标指向的物体。
修复上传文件时点取消报错的bug。
修复材质组件Flat Shading翻译为平滑的错误，改为平坦着色。
使用点击场景添加模型方式时，模型放置到场景之前出现一个预览效果。
新增编辑工具栏：撤销、重做、清空历史记录、复制、删除。
几何体菜单添加文字功能，修改为不缩放的文字。

v0.3.7更新

发布日期：2019年11月17日
更新日志：

还原以前删除的C#版THREE.js项目。
禁用Session，避免第一次打开网页时会话状态已创建一个会话 ID，但由于响应已被应用程序刷新而无法保存它。的报错。
修复一些由于无权限报错，导致页面变空白的bug。
选中效果优化，默认选中颜色修改。
新增选择模式设置：选择整体、选择部分。
删除整理贴图、整理模型、整理缩略图功能。
点击场景中的物体，场景树状图上展开该节点和它的所有父节点，并将该节点滚动到可视范围内。
修复点击场景中的物体，场景中的物体不高亮bug。
工具栏改为横向，并进行分类：通用工具、绘制工具、编辑工具、地形工具、标注工具、测量工具。（待开发完善）
新增添加模型模式：添加到中心、点击场景添加。点击场景如果碰撞不到物体，则添加到y=0的平面上。
状态栏上的选中边框颜色和粗细设置移动到显示选项菜单中。
新增BufferGeometry组件，查看BufferGeometry的顶点数量、法线数量、UV坐标数量、索引数量。提供计算顶点法线功能。
新增多材质组件，对于有多个材质的Mesh，可以使用多材质组件选择一个材质进行编辑。
修复正投影视图上选中效果边缘不正确bug。
状态栏增加物理引擎设置，添加的基本几何体默认开启物理引擎。
截图和录制视频工具由状态栏移动到通用工具栏。
修复新窗口播放报错Ammo.btSoftBodyRigidBodyCollisionConfiguration is not a constructor。
优化角色管理和用户管理列表显示和搜索功能。
不具有资源列表权限，将不显示对应的资源面板。
修复一个严重bug：非管理员角色登录，所有接口都是无权限。

技术分享

three.js使用卷积法实现物体描边效果：https://www.cnblogs.com/tengge/p/11924006.html
three.js使用gpu选取物体并计算交点位置：https://www.cnblogs.com/tengge/p/11924663.html

项目截图

主要功能

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

使用指南

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

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

安装NodeJs，在最外层目录，执行以下命令。

npm install
npm run build

下载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

编辑文件ShadowEditor.Web/Web.config，将27017修改为你电脑上MongoDB服务的端口。

<add key="mongo_connection" value="mongodb://127.0.0.1:27017" />

使用Visual Studio 2017打开项目，生成ShadowEditor.Web项目。
将ShadowEditor.Web部署在iis上即可在浏览器中访问。
为了保存各种类型文件能正常下载，会在iis上添加以下两个MIME类型，正式部署请注意安全。

文件扩展名	MIME类型	说明
.*	application/octet-stream	各种格式后缀文件
.	application/octet-stream	无后缀文件

编译文档，请安装gitbook。

npm install -g gitbook-cli

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

gitbook install

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

npm run docs

常见问题

上传模型时为什么都是上传失败？

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

如何将多个模型组合在一起？

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

如何开启权限系统？

打开ShadowEditor.Web/Web.config文件，将EnableAuthority设置为true。默认管理员用户名是admin，密码是123456。

187383327 / ShadowEditor