WebGL的3D家居创意设计踩坑手记

写在前面

回顾整个比赛，直到到现在还是觉得做的很水。不过大学期间有机会团队去开发自己的项目，对于技术或者是沟通的能力还有会有很大的提高。最开始选择这个命题的时候真的觉得自己玩大了，3D什么的完全没有接触过，毕竟是学Java的，但是真正开始接触WebGL或者说是three.js的时候，感觉迷上这个技术了，场景、相机、渲染器、光线选择、碰撞检测、粒子效果等等。不过这个技术的学习成本确实比较大，首先是就是被普遍吐槽的官方文档，确实写的不细致；再者就是英文材料，对于英语不好的童鞋并不友好；最后就是Three.js的坑实在是太多了，既然是坑就慢慢的填。购买过一本Three.js开发指南，当时对于这个技术的学习也就停留在可以实现出我们设计的需求就够了（所以不会使用3D建模工具），整个项目是在2017年8月和9月这段时间完成的，9月底是截止日期了，其实很慌临提交的前一天还有bug。不过好在这个组最后进决赛的人数也不多，竞争压力比隔壁那个几个组小太多了，好在最后成绩不错。

户型设计模块介绍

按照规定要求是模仿酷家乐制作一个在线的3D家装设计平台，我们将整个业务逻辑拆成两个主要的模块：第一个是户型制作模块，就是设计一个在线的建模工具专门用于制作房屋模型；另外一个就是3D家装模块，用来对制作好的户型进行装修。当时我是负责户型制作模块，不过在后续重构把整个前端都包了。在第一次编码的时候真的是js掌握的不好，ECMAScript、BOM、DOM就草草的了解，所以写出来的代码太丑了～已经不想吐槽了。下面几张是户型设计工具的截图，有些图标是copy酷家乐的，由于这个模块不能在手机端低分辨率的设备

    

    

上使用，所以就不需要过多的考虑响应式的问题，户型设计工具主要包括的有绘制墙壁、绘制门窗、自动生成地板，这几步是主要操作。这几个功能需要的额外功能很多，接下来做必要的说明：

• 坐标转换：浏览器坐标是一个二维坐标，而我们想要点击的3D场景是一个三维坐标，我们在屏幕上点击一个位置如何映射到3D场景，这里用到的是光线选择器，简单来说就是在相机与我们点击的点构成了一条射线， 射线经过的所有物体都被存储在一个数组中，数组第一个元素就是点击的物体，我们通过这种方式去与3D场景中的元素进行交互。这里再多说两句，var selected  = intersects[0]获取的是点击的对象object，这个object还包括这几个属性 [ { distance, point, face, faceIndex, object }, … ]，distance - 射线的起点到相交点的距离，point - 在世界坐标中的相交点坐标࿰