ThreeJS ArcballControl視角旋轉踩坑分享

ThreeJS ArcballControl視角旋轉踩坑分享

更新於 發佈於 閱讀時間約 1 分鐘

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

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

問題說明

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

呼叫update函式後視角亂跑

呼叫update函式後視角亂跑

問題尋找

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

ArcballControl套件update函式原始碼

ArcballControl套件update函式原始碼


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

THREEJS Object.up文檔

THREEJS Object.up文檔


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

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

camera.up向量在移動模型視角後,y和z軸被翻轉

camera.up向量在移動模型視角後,y和z軸被翻轉


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

camera.up被改變的地方

camera.up被改變的地方

問題解決

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

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

raw-image

結論:

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

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

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

avatar-img
s_SoNg的沙龍
4會員
11內容數
留言
avatar-img
留言分享你的想法!
s_SoNg的沙龍 的其他內容
在工作上遇到nodejs呼叫執行檔執行失敗問題,最後發現是由於nodejs專案本身有用nssm包成服務,在服務環境的nodejs呼叫的執行檔也執行在服務中,造成程式不會跳出視窗而導致失敗。
準備專案 這邊首先準備一個新的專案,可以參考react官網,完成後參考README.md輸入npm run dev就可以啟動並在瀏覽器看到畫面 準備nssm工具 在google上搜nssm,第一個項目點進去後,找到並下載穩定版,附上下載鏈接 壓縮檔下載完畢後,解壓縮到喜歡的地方,然後進入資料
如果有個算法是2秒以上很耗時的長任務,希望在執行長任務前後修改state渲染loading畫面,可能會難以達到預期效果,會看到loading畫面一閃而過。 把setState改非同步的方法...
4/5React await setStat
在工作上遇到nodejs呼叫執行檔執行失敗問題,最後發現是由於nodejs專案本身有用nssm包成服務,在服務環境的nodejs呼叫的執行檔也執行在服務中,造成程式不會跳出視窗而導致失敗。
準備專案 這邊首先準備一個新的專案,可以參考react官網,完成後參考README.md輸入npm run dev就可以啟動並在瀏覽器看到畫面 準備nssm工具 在google上搜nssm,第一個項目點進去後,找到並下載穩定版,附上下載鏈接 壓縮檔下載完畢後,解壓縮到喜歡的地方,然後進入資料
如果有個算法是2秒以上很耗時的長任務,希望在執行長任務前後修改state渲染loading畫面,可能會難以達到預期效果,會看到loading畫面一閃而過。 把setState改非同步的方法...
4/5React await setStat