如何用three.js搭建一个长尾词室内场景？

本文共计1605个文字，预计阅读时间需要7分钟。

公司需开发商业城、防灾、用电等项目，实现楼层和设施的可视化。此前多采用其他建模工具创建整体模型，再利用three.js的加载器加载到场景中，但此类加载存在缺陷，例如不兼容。

公司做商城、消防、用电等项目，需要实现楼层和设备的可视化，以前都是使用其他建模工具创建的整体模型，再使用three.js的加载器加载到场景中，但是这样的加载存在缺陷，比如不能给模型的元素赋属性、不能单个点击元素、渲染单调等。所以本次参考了一些资料，不使用模型倒入，完全使用three.js搭建场景，代码有些粗燥勿怪。

1.创建地板

地板是一个类似盒子，有顶部有底部有侧面，但是不一定是规则的盒子，因此我放弃了常用的BoxGeometry的方式，改用顶点+面的形式创建任意多边形地板，已知多边形底部坐标，底部坐标加上高度得到顶部坐标，通过Earcut可以计算出底部和顶部的三角面，侧面的三角面可以直接通过坐标序号得到，由此可以创建一个通用的Geometry。