ThreeJS ArcballControl視角旋轉踩坑分享

在工作上需要重構場景相機的程式碼，用的是Threejs的Arcball control來控制視角旋轉平移。

由於初始模型方向通常上下顛倒，所以重構時在初始化有設定相機up為0,0,-1。

問題說明

ArcballControl文檔有提醒修改相機後要呼叫ArcballControl的update方法，但是發現旋轉模型視角後呼叫update，視角被翻轉

問題尋找

到ArcballControl套件的update方法逐行註解進行偵錯，發現是最後1576行camera.lookAt函式造成的問題

聯想到視角亂跳時，都是相機視野的旋轉（相當於歪著頭看東西），於是猜到可能是camera.up的問題

但在初始化相機時明明有設定正確的up，難道是camera.up被什麼地方自動改掉了？

於是檢查後發現，移動模型視角後，up的值就會被翻轉

又找了套件原始碼有關移動模型視角的地方，發現在旋轉視角時會更新camera.up，更新方法是用我們初始化相機的camera.up方向，應用上當前相機的旋轉量。

問題解決

到這裡已經猜到問題出在我在初始化相機時，就設定了camera.up，

於是試了在ArcballControl初始化後，再設定camera.up，終於就正常了

結論：

如果要設定camera.up，一定要放在ArcballControl初始化完成之後。

但不確定ArcballControl作者本意是不是這樣，或者其實更好的做法。

附上範例歡迎大家demo：ThreeJS ArcballControl視角旋轉踩坑範例