首页 / three.js / 使用示例
航线漫游
一条绕行场景的闭合航线,机位高度随位置起伏,视线在四个兴趣点之间过渡。 进度条可以手动拖到任意时刻,暂停后相机控制权交回给鼠标。
源码与运行效果
为什么用 getPointAt
getPoint(t) 的参数是曲线自身的参数,控制点密集处速度会变慢;
getPointAt(t) 按弧长归一化,同样的时间前进同样的距离。
漫游镜头必须用后者,否则会出现忽快忽慢的顿挫。
示例的速度是每秒推进 0.028 个整圈,约三十六秒绕完一周。 这个值与曲线长度无关,换成更长的航线时,观感会跟着变快, 需要按弧长重新折算。
| 项 | 取值 | 说明 |
|---|---|---|
| 控制点 | 10 个 | 绕场景一圈,高度正弦起伏 |
| 曲线类型 | 闭合 CatmullRom | 首尾自然衔接 |
| 兴趣点 | 4 个 | 视线在其间平滑插值 |
| 暂停 | 交出控制权 | OrbitControls 接管 |
视线为什么要过渡
机位沿曲线走,若始终盯着场景原点,画面会一直正对中心,缺少方向感。 示例让视线在四个兴趣点之间按正弦插值, 每个转弯处镜头会自然偏向要看的对象,像一段预先设计好的运镜。
暂停时记得同步目标点。切换回轨道控制前,把
controls.target 设成当前视线目标,
否则一拖动镜头就会跳回旧的中心点,观感非常突兀。