3D创意设计--- 3Done制作家装平面设计图

       平面图绘制：最开始考虑使用canvas，后来偷了个懒three.js的相机种类很多，THREE.OrthographicCamera相机就是一个平面相机，自顶向下看3D场景就是一个平面图，当需要切换到3D效果时，将相机的类型换为THREE.PerspectiveCamera并调整为合适的位置即可，所以整个绘制区域是一个3D场景，使用正交相机使其看起来是一个平面图。

       添加墙壁：这个功能类似于一个画板程序，具体的实现就不做说明了，通过renderer.render(scene, camera)去渲染画面，考虑到性能不需要一直循环渲染，每次需要刷新页面时调用即可。

       绘制矫正：鼠标点击是不精确的，尤其是在点击某一面墙壁时，可以将这个墙壁拆分为两面墙，但是点击处很难是精确的中心线的位置，这里需要做一下矫正，通过简单的计算将坐标偏移到正确的位置。另外比较重要的就是让直线保持水平垂直，单凭肉眼很难做到，这里需要一些偏移处理，这个模块设计鼠标移动过程进行检测，如果偏移距离小于15则认为用户在画水平或者垂直线，将对应的坐标赋值为确定值。

        地板生成：地板是以房间为单位，所以上面图片中的地板有两个（整个户型的大轮廓不会生成对应地板）。地板自动生成算法有两个步骤，一是遍历找出所有的地板回路，记录下所有的顶点，第二步是使用THREE.Shape生成地板图案，并附上指定的材质。并不是用户每次操作都会进行遍历，首先会根据连通图的边数 - 顶点数 + 1 =闭合区域个数来判定图中有没有闭合回路，如果有则dfs通过回溯的方式找到回路，每次找到回路进行两个判定，一是这个回路是否包含子回路，同样是利用连通图的边数 - 顶点数 + 1 =闭合区域个数进行判定，第二个判定是否已经所搜到相同的回路，将该回路与保存下来的其他回路进行比较，只有满足不包含子回路而且没有搜到过这两个条件才会将回路保存。生成地板就很简单了，根据顶点坐标使用THREE.Shape的moveTo和lineTo方法可以生成对应的mesh。

       3D展示：通过鼠标自由的拖动视角是利用了three.js自带的THREE.OrbitControls控件使用十分方便，但是一旦开始这个控件，即使当我们离开3D展示这个模块THREE.OrbitControls一直会不停的渲染，update开启控件，requestAnimationFrame一直进行渲染。使用window.cancelAnimationFrame(OrbitControlsAnmo)可以结束动画。