three.js/webgl 展示城市建筑

本文简述如何在three.js中展示已有的城市建筑面数据。在线预览地址：evomap城市建筑

一、城市建筑面数据格式

这里的城市建筑面数据指的是底部为任意多边形，包含高度属性的面数据，这里我们使用的数据源为geojson格式的面数据。

二、构建几何要素的顶点信息

我们根据基础面数据和高度，构建底部面、侧面以及顶部面，并使用earcut将底面、侧面、顶面切成一个个绘制需要的三角形。

具体可以参考我的博客：使用three.js搭建室内场景 中的第1点。

三、侧面贴纹理

为几何体的每个顶点，计算纹理坐标，然后将纹理贴图映射到几何体上。

四、效果图