解答:在 createDrinkingBird() 的 pivotHeight 後面:

var pivotHeight = 360;
body.position.y = -pivotHeight;
head.position.y = -pivotHeight;
bodyhead.position.y = pivotHeight;

解釋:沒有平移 bodyhead 物件繞著自己的軸心旋轉,是在原點 (0, 0, 0)。要繞著橫桿轉,我們想要先移動 body 與 head 使橫桿中心在原點,然後照舊旋轉,再把 body 與 head 移回來。換句話說,我們想下平移 pivotHeight,旋轉,再平移回來。要做到這一點有好幾種方法,例如建立新的中間物件,但我的解法盡量保持簡單:我手動把身體和頭都往下移動 pivotHeight 的距離,這是第一次平移。我之所以分別對身體和頭做這個平移,有兩個原因。

第一,這個平移必須在旋轉之前發生。如果我把平移套用在 bodyhead 上,而它同時也是動畫時要旋轉的物件,那麼旋轉就會先被套用。

第二,我也可以再建立一個物件,讓它作為身體和頭的父物件、同時是 bodyhead 的子物件,再把第一次平移套用在它身上。但我決定讓物件結構保持簡單,所以把平移分別套用在身體和頭上。

旋轉本身是在 render() 裡設定在父物件 bodyhead 上。第二次平移(移回原位)也是套用在 bodyhead 上。由於旋轉會在平移之前套用,這樣的順序完全沒問題。