- 名称:Shadow Editor
- 版本:v0.3.0
- 简介:基于
three.js
的场景编辑器。
- 发布日期:2019年8月11日
- 更新日志:
- 从
v0.3.0
开始,将发布基于react.js
的新版编辑器,v0.2.6_old
分支将于2019年8月17日
删除。 - 除了补间动画和少量bug外,新版编辑器已经达到旧版水平。
- 跟旧版编辑器相比,新版有以下特点:
- 使用
react.js
重写前端UI,界面美观度提升,相应速度提升。 - 升级
three.js
到r107
版本,three.js
各组件也升级到最新版。 - 修复大量影响性能的bug和逻辑,渲染不再由事件驱动,渲染速度大幅提升。
- 支持模型内部组件名称和位置的修改,支持将几何体、组、光源等放到模型内部。
- 属性面板分组可折叠,默认折叠一部分属性组,方便使用。
- 资源面板放置到左侧,支持分页。资源数量多时,加载速度更快。
- 对火狐浏览器兼容性调整。
- 点击场景树状图右侧的眼镜图标,可以快速对某个分支进行显示隐藏控制。
- 根据浏览器语言,确定编辑器的初始语言。
- 使用
- 服务端和数据结构未作任何改动,如果您没有改过前端的话,可以直接升级到新版。
源码 | GitHub | 码云 | 文档 | GitHub | 码云 |
演示 | GitHub | 码云 |
说明:新版本部分功能可能尚未完成。
- 基于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
模型。 - 支持
bullet
物理引擎。正方体、圆形、圆柱体、二十面体、酒杯、平面、球体、茶壶、轮胎、纽结和加载的模型都支持刚体组件。支持可视化设置碰撞体形状(正方体、球体)、质量和惯性。 - 具有平移、旋转、缩放、在物体表面绘制点、线、贴花的工具,实时统计场景种物体、顶点、三角形数量。
- 支持场景一键导出功能。
- 中英文双语支持。
- 支持色调旋转(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 build-docs
- 上传模型时为什么都是上传失败?
需要把模型贴图等资源压缩成一个zip包,而且入口文件不能嵌套文件夹。服务端会解压上传的zip包放到~/Upload/Model
文件下,并在MongoDB _Mesh
表里添加一条数据。
- 如何将多个模型组合在一起?
基本几何体都支持多层嵌套。可以添加一个组
(在几何体菜单中),然后在场景树状图上,将多个模型拖动到组
上。