默默地在背后關注她！

前言

在3d游戲中經常會用到鏡頭跟隨效果，這次我們就來實現它！

閱讀本文需要一些的基本知識：

• 向量基本運算（加法/減法/乘積）
• 會調用四元數API接口
• 運動學（速度/加速度/位移）

效果預覽如下（可調遠近上下/彈性跟隨）：

實現

相機跟隨的原理就像是，你暗中跟隨觀察(尾隨)你心儀的對象(Object)。

既然是觀察，就要與對象保持一定的距離。

為了不被對象發(fā)現，我們觀察的位置和對象的朝向有關。

當然，你要看到對象，你的眼睛方向一定得看著對象吧，這就是視口方向。

針對我們要達到的效果，需要定義好以下幾個變量。

• 觀察對象的朝向（上方向，前方向）
• 攝像機與對象的距離（水平距離，垂直距離）

最終我們需要算出以下幾個玩意兒：

• 相機位置
• 相機旋轉角度

位置

求相機的位置分兩步：

1. 根據對象的前方向和相機的水平距離，求出中間點坐標
2. 根據對象的上方向和相機的垂直距離，求出相機的位置

中文式偽代碼如下：

對象到中間點的向量?=?-1?*?對象前方向?*?相機的水平距離
中間的坐標?=?對象到中間點的向量?+?對象點坐標
中間點到相機的向量?=?對象上方向?*?相機的垂直距離
相機坐標?=?中間點坐標?+?中間點到相機的向量

角度

旋轉角度可以通過視口朝向和上方向得出。

偽代碼如下：

前向向量?=?對象坐標?-?相機坐標
旋轉角度?=?旋轉API(前向向量的歸一化,?對象上向量)

需要注意的是，在 Cocos Creator 中相機朝向和節(jié)點旋轉的角度是相反的，所以前向量的方向要取反向。

彈簧

我們還可以給相機添加一個彈性跟隨的效果。

計算過程如下：

• 先根據上面的方法計算出相機的理想位置。
• 然后假設現在相機所在的位置和理想的位置中有個彈簧。
• 再根據彈簧模型求出合力（加速度）
• 最后模擬運動算出時間點位置（位置+速度）

彈簧簡易模型受兩個因素影響：

• 彈簧長度（即相對位置）--拉力
• 當前速度 --阻力

為此我們可以定義想要的彈力系數和阻力系數。

結合起來的計算位置的偽代碼如下：

理想位置?=?計算理想位置()
相對距離的向量?=?理想位置?-?當前位置
加速度?=?-?相對距離*彈力系數?-?當前速度*阻力系數
當前速度?=?當前速度?+?加速度*間隔時間
當前位置?=?當前位置?+?當前速度

擴展

還可以用其他的方法去更新位置：

關于彈簧系數的關系參考：

小結

位置！距離！旋轉！彈簧！

以上為白玉無冰使用 Cocos Creator 3.0 preview-1 實現 "彈性跟隨相機!" 的技術分享。歡迎三連(點贊/在看/留言/分享)支持!

FFF = 專注（focus）、反饋（feedback）以及糾正（fix it）!

參考資料

《游戲編程算法與技巧》

《大學物理(核心知識)》

更多

標志板！Billboard !
2D 素材 3D 效果!
2020 原創(chuàng)精選!
四元數與3D旋轉

“點贊“ ”在看”?鼓勵一下▼