学习 Threejs Editor 的项目。
common
文件夹:build
里面是主要的类库threejs
和jqueryjs
;其它是三维小例子使用的代码和资源,根据需要自己引入。css
文件夹:项目的样式文件,可切换皮肤。docs
文件夹:项目的技术点介绍。examples
文件夹:项目引用的场景实例。js
文件夹:commands
里面是用来写具体撤销和重做操作的代码;libs
使用的第三方代码;其它是项目的主要代码。
index.html
项目的入口文件。Editor.js
项目主功能的函数。config.js
项目的配置,会保存到localStorage
本地存储。History.js
项目的历史记录,撤销和重做的队列。Storage.js
项目的indexedDB
本地数据库。Loader.js
项目的文件加载功能。Api.js
项目的后台数据获取功能,项目的信息,项目的版本信息,不会保存到本地存储。
- 勾选定位相机,在场景中选择一个点,这个点在网格平面或模型平面,高度是相机高度的值;
- 相机的位置就是点的坐标,方向不变,通过鼠标移动控制方向,鼠标滚轮控制前进和后退;
- W/A/S/D 控制移动,C 控制跳跃,方向键控制移动,ESC 退出控制。
- 选择模型后,在右侧场景页最下方的模型脚本里,新建一个模型脚本,输入脚本文件名,点击编辑写模型动画代码;
- 在提供的函数回调名称下,编辑对应的函数名称的具体代码,函数作用域为模型,传入的参数根据需要选择;
- 编写完模型代码后,点击菜单栏的播放按钮可以看运行效果。
- 点击菜单栏的场景播放按钮后,会切换到新的页面,并播放模型动画;
- 场景播放提供了观察的控件,点击右下角的切换按钮后控件切换为游览模式;
- 点击播放按钮后,根据定位相机时的操作和游览进行播放;
- 在发布后的代码里,除了上面的功能之外,还有编辑功能,点击编辑场景切换到编辑器;
- 发布功能在文件菜单栏里,发布后的代码需要在服务器上运行。
- 点击辅助功能或使用快捷键,可以开启辅助平面,绘制线段;
- 辅助平面可以使用快捷键切换三个坐标平面,可以使用下方工具条修改平面位置;
- 在平面上或模型上绘制点和线段,可以使用快捷键撤销和重做;
- 完成后根据情况使用线段;
- 使用快捷键可以生成模型并加入场景中,如:二维平面、三维模型。
- 加载
dae
模型时,一般是对xml
文件转为节点对象后,进行数据读取和模型实例化; - 当模型比较大时,比如
500M
的模型,无法转为节点对象,但是作为字符串处理时,部分函数还可用; - 所以重写了解析的文件,并利用了
worker
多线程读取数据。
- 当导入的模型比较大时,渲染模型比较卡,主要的问题是模型数量和几何体数量太多;
- 对导入的
dae
模型进行合并,主要的方式是把同一种类型的模型进行合并; - 对模型的几何体进行分段合并,分段的依据是使用了不同的材质,而使用同一种材质时不需要分段,需要放在一起;
- 合并后的模型几何体使用一个,大大减少了数量,材质放在一起,数量并不多;
- 主要有四种类型的模型需要合并,而
Group
模型已经不需要,合并时会删除。
- 第一个数字表示主版本;
- 第二个数字表示增加功能;
- 第三个数字表示修改问题。
- 修改代码的引用时,要把旧版本备份,确保所有功能都没问题时才能删除;