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

道路走廊

一条穿越起伏地面的空间曲线,配上一个矩形断面,沿曲线挤出后就是连续的道路体。 拖动弯曲度会重建几何体,中心线按钮可以把挤出路径画出来对照。

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

断面如何跟着转弯

extrudePath 传入曲线后,three.js 会用曲线的切线方向构造分段坐标系, 让断面垂直贴在路径上。断面本身定义在 XY 平面:横向是路宽,纵向是路面厚度。 挤出时这个方向的组合决定了道路是「立着」还是「躺着」。

steps: 260 决定沿路径切多少段。段数太少,弯道处会出现折角, 侧墙也会跟着抖动;段数过多则是纯粹的浪费。一般按路径长度与最小转弯半径估: 保证每段对应的转角在几度以内即可。

参数取值作用
断面宽1.8双车道的场景宽度
断面厚0.24路面下方留出的结构厚度
steps260沿路径的细分段数
曲线类型catmullrom穿过控制点的平滑插值

曲线点位的取法

控制点在 X 方向等距排开,Y 按正弦起伏抬升,Z 按另一组正弦摆动。 弯曲度参数同时作用于后两项,所以调大之后路径更蜿蜒,道路也跟着上下坡。 这种「参数化控制点」的写法便于复现,比手工摆位更适合文档示例。

getPointAt 与 getPoint 的区别在于是否按弧长归一化。 想在道路两侧等距放路灯、里程桩,要用 getPointAt, 否则弯道密集处的标记会挤在一起。

贴地问题在数据侧解决。示例让整条走廊悬在地面之上。 真实道路要贴合地形,得沿路径逐点采样 DEM 高程, 把断面按局部坡度做旋转,这一步通常放在数据预处理里完成,而不是在渲染时算。