如何将three.js镜头追踪的移动效果改写为长尾词？

本文共计4093个文字，预计阅读时间需要17分钟。

目录+达成效果+实现思路+实现难点

1.折现变曲线

2.镜头朝向不受控

3.镜头位置绑定不受控

4.镜头移动

最终实现方法方法一：镜头追踪推进方法二：使用tween动画方法比较+其他方法

目录

• 达到效果
• 实现思路
• 实现难点
• 1、折现变曲线
• 2、镜头朝向不受控
• 3、镜头位置绑定不受控
• 4、镜头抖动
• 最终实现方法
• 方法一：镜头沿线推进
• 方法二：使用tween动画
• 方法比较
• 其他方法
• 方法一：绘制一条折线+animate镜头推进
• 方法二：绘制多条线段+animate镜头推进
• 方法三：绘制多条线段+tween动画变化镜头
• 方法四：优化方法一，绘制一条折线+animate镜头推进

达到效果

指定一条折线路径，镜头沿着路径向前移动，类似第一视角走在当前路径上。

实现思路

很简单画一条折线路径，将镜头位置动态绑定在当前路径上，同时设置镜头朝向路径正前方。

实现难点

1、折现变曲线

画一条折线路径，通常将每一个转折点标出来画出的THREE.Line，会变成曲线。