Threejs可视化编辑器editor
单机进入编辑器editor
- 有三维软件操作经验的，可以跳过本节课关于三维操作的描述，自己摸索即可
- 对前端和互联网非常了解的不用关注有关网页的知识
概述
如果你做过网页设计应该知道，可以使用Webstorm、Sublime等文字编辑器，也可以使用可视化编辑器Dreamweaver设计网页，如果你没有做过前端，而是从事过需要使用三维软件的工作，你应该会感觉到三维软件建模调整对象位置、渲染
设置灯光位置比使用three.js写代码要直观的多，在编辑器里面可以通过鼠标拖动几何体、光源、照相机的位置移动，three.js可视化编辑工具的出现也是为了方便开发，但编辑工具作用只是辅助工作，并不能做所有的工作。比如一个模型在一个平面上
阵列一个有规律矩阵，用代码for循环来写(可以学习three.js绘制魔方)，要比可视化方便的多，有些情况使用可视化工具确定参数
测试
- 鼠标移动到菜单栏Examples位置，单机Pong选项或其他任意一个例子，确定即可，窗口产生一个三维场景
- 鼠标左键可以单击一个几何体，弹出一个高亮三维坐标系，代表已经选中，可以自由拖动，鼠标放在坐标箭头的位置，按着鼠标左键不放可以自由多动
- 移动物体对象的时候，可以观察到窗口右侧的属性栏里面Position属性参数的变化
- 单机白色对象(光源)，可以看到场景中光照明暗的变化，平时写代码的时候，可以可视化设置好灯光，在把数据界面上的数据
基本鼠标操作
- 模型缩放：滚动鼠标中键
- 场景滚转：按着鼠标左键不放，上下、左右移动即可
- 选中对象(三维模型、光源、相机)：单击
- 移动对象
- 定向移动：鼠标放在坐标箭头的位置，按着鼠标左键不放可以自由多动
- 自由放置：鼠标放在坐标原点位置，颜色高量变化，操作同上
添加对象
菜单栏可以在add下选择相关的对象，几何体、光源、相机等
导入导出
- 模型导入
- 支持stl、obj等三维模型数据格式
- 命令：Import
- 模型导出
- Export Geometry：导出three.js引擎可以解析的josn格式文件，含有几何模型的顶点信息
- Export OBJ： 导出obj
- Export STL： 导出stl
发布作品，在线部署
- 命令：publish
- 单击命令，生成文件夹download.zip，浏览器会自动下载到本地
- 解压后可以查看文件，一个.html格式文件、一个.json格式文件，两个.js格式文件
- index.html：包含canvas画布的一些信息，比如修改window.innerWidth, window.innerHeight可以调整显示窗口大小
- app.json：模型的相关信息，比如顶点
总结
本节课的目的不仅仅是介绍three.js的可视化编辑工具，而是提供一个思路。three.js是对WebGL的封装，three.js可视化编辑工具是对Three.js的封装。不懂webgl可以使用three.js，不懂three.js，也可以使用傻瓜式的可视化编辑器，导入
其它三维软件的stl或obj模型，选择publish按钮单击，一键生成相关的html、css、js和josn文档，部署到网站上。有了封装的工具并不代表不用学习底层的知识，有了底层的知识，才能更好的驾驭对底层封装封装的工具。
能够使用three.js编辑三维场景，同样再去学习其它的三维引擎，周期会很多；对于可视化编辑工具，同样的道理，由于WebGL还处于普及阶段，所以并没有成熟的行业工作流程和工具，所以大家在必要的时候可以参考已有的可视化编辑器开
发自己的专用编辑器，因为不同的领域对三维场景的要求不同，比如机械领域模型的尺寸精度要求高，游戏领域你从视觉上看着没有违和感就行，游戏希望场景渲染很逼真，而机械没有这种需求。