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

航线漫游

一条绕行场景的闭合航线,机位高度随位置起伏,视线在四个兴趣点之间过渡。 进度条可以手动拖到任意时刻,暂停后相机控制权交回给鼠标。

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

为什么用 getPointAt

getPoint(t) 的参数是曲线自身的参数,控制点密集处速度会变慢; getPointAt(t) 按弧长归一化,同样的时间前进同样的距离。 漫游镜头必须用后者,否则会出现忽快忽慢的顿挫。

示例的速度是每秒推进 0.028 个整圈,约三十六秒绕完一周。 这个值与曲线长度无关,换成更长的航线时,观感会跟着变快, 需要按弧长重新折算。

项取值说明
控制点10 个绕场景一圈,高度正弦起伏
曲线类型闭合 CatmullRom首尾自然衔接
兴趣点4 个视线在其间平滑插值
暂停交出控制权OrbitControls 接管

视线为什么要过渡

机位沿曲线走,若始终盯着场景原点,画面会一直正对中心,缺少方向感。 示例让视线在四个兴趣点之间按正弦插值, 每个转弯处镜头会自然偏向要看的对象,像一段预先设计好的运镜。

暂停时记得同步目标点。切换回轨道控制前,把 controls.target 设成当前视线目标, 否则一拖动镜头就会跳回旧的中心点,观感非常突兀。