经纬志
首页 / three.js / 使用示例

建筑轮廓拉伸

每个地块的平面轮廓是一圈带圆角的闭合路径,沿竖直方向拉出高度就成了体块。 这是把二维面要素变成三维城市模型最直接的路径,也是规划类项目里出现频率最高的操作。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

从轮廓到体块

THREE.Shape 描述的是 XY 平面上的闭合路径,可以是多边形、带孔洞的面, 也可以是带圆弧的曲线。ExtrudeGeometry 把这条路径沿 Z 轴拉深指定的 depth,得到有顶面、底面和侧墙的实体。

拉出来的几何体默认「躺」在 XY 平面上,绕 X 轴转 -90° 才能立到地面。 旋转后 Z 轴变成竖直方向,深度就自然对应楼高。 示例里每栋楼的轮廓由四段直线加四段圆弧组成, bevelEnabled: false 保证墙体笔直。

参数取值说明
depth1.6 – 12.6由哈希函数给出,模拟高低错落的街区
curveSegments4圆角的细分数,够用即可
bevelEnabledfalse关掉倒角,墙面才是直角
阴影PCFSoft日光方向固定,阴影落在地面上

高度可以事后调整

示例里的「高度倍数」直接改的是 mesh.scale.y。 因为几何体的底面就在 y = 0,等比缩放时底边不会离地, 看起来就像整体长高或压扁。数据本身没有重算,切回 1.0 即恢复原状。

真正要更新楼高时,改 scale.y 比重新生成几何体便宜得多。 只有轮廓形状变化时才需要重建 ExtrudeGeometry, 重建之后记得把旧几何体 dispose() 掉。

几百栋之后考虑合并。每栋楼一个 Mesh 就是一次绘制调用。 体块数量上千时,用 BufferGeometryUtils.mergeGeometries 按材质合并, 或者改用实例化渲染,帧率差别很明显。