首页 / three.js / 使用示例
道路走廊
一条穿越起伏地面的空间曲线,配上一个矩形断面,沿曲线挤出后就是连续的道路体。 拖动弯曲度会重建几何体,中心线按钮可以把挤出路径画出来对照。
源码与运行效果
断面如何跟着转弯
extrudePath 传入曲线后,three.js 会用曲线的切线方向构造分段坐标系,
让断面垂直贴在路径上。断面本身定义在 XY 平面:横向是路宽,纵向是路面厚度。
挤出时这个方向的组合决定了道路是「立着」还是「躺着」。
steps: 260 决定沿路径切多少段。段数太少,弯道处会出现折角,
侧墙也会跟着抖动;段数过多则是纯粹的浪费。一般按路径长度与最小转弯半径估:
保证每段对应的转角在几度以内即可。
| 参数 | 取值 | 作用 |
|---|---|---|
| 断面宽 | 1.8 | 双车道的场景宽度 |
| 断面厚 | 0.24 | 路面下方留出的结构厚度 |
steps | 260 | 沿路径的细分段数 |
| 曲线类型 | catmullrom | 穿过控制点的平滑插值 |
曲线点位的取法
控制点在 X 方向等距排开,Y 按正弦起伏抬升,Z 按另一组正弦摆动。 弯曲度参数同时作用于后两项,所以调大之后路径更蜿蜒,道路也跟着上下坡。 这种「参数化控制点」的写法便于复现,比手工摆位更适合文档示例。
getPointAt 与 getPoint 的区别在于是否按弧长归一化。
想在道路两侧等距放路灯、里程桩,要用 getPointAt,
否则弯道密集处的标记会挤在一起。
贴地问题在数据侧解决。示例让整条走廊悬在地面之上。 真实道路要贴合地形,得沿路径逐点采样 DEM 高程, 把断面按局部坡度做旋转,这一步通常放在数据预处理里完成,而不是在渲染时算。