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
留言分享你的想法!
avatar-img
s_SoNg的沙龍
4會員
12內容數
s_SoNg的沙龍的其他內容
2025/04/28
在工作上遇到nodejs呼叫執行檔執行失敗問題,最後發現是由於nodejs專案本身有用nssm包成服務,在服務環境的nodejs呼叫的執行檔也執行在服務中,造成程式不會跳出視窗而導致失敗。
Thumbnail
2025/04/28
在工作上遇到nodejs呼叫執行檔執行失敗問題,最後發現是由於nodejs專案本身有用nssm包成服務,在服務環境的nodejs呼叫的執行檔也執行在服務中,造成程式不會跳出視窗而導致失敗。
Thumbnail
2025/04/08
準備專案 這邊首先準備一個新的專案,可以參考react官網,完成後參考README.md輸入npm run dev就可以啟動並在瀏覽器看到畫面 準備nssm工具 在google上搜nssm,第一個項目點進去後,找到並下載穩定版,附上下載鏈接 壓縮檔下載完畢後,解壓縮到喜歡的地方,然後進入資料
Thumbnail
2025/04/08
準備專案 這邊首先準備一個新的專案,可以參考react官網,完成後參考README.md輸入npm run dev就可以啟動並在瀏覽器看到畫面 準備nssm工具 在google上搜nssm,第一個項目點進去後,找到並下載穩定版,附上下載鏈接 壓縮檔下載完畢後,解壓縮到喜歡的地方,然後進入資料
Thumbnail
2024/10/30
如果有個算法是2秒以上很耗時的長任務,希望在執行長任務前後修改state渲染loading畫面,可能會難以達到預期效果,會看到loading畫面一閃而過。 把setState改非同步的方法...
2024/10/30
如果有個算法是2秒以上很耗時的長任務,希望在執行長任務前後修改state渲染loading畫面,可能會難以達到預期效果,會看到loading畫面一閃而過。 把setState改非同步的方法...
看更多
你可能也想看
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
介紹Unreal Sequencer鏡頭工具,CG動畫的學習經驗,並提供相關教程,適合想學習Cinematic Designer的人。
Thumbnail
介紹Unreal Sequencer鏡頭工具,CG動畫的學習經驗,並提供相關教程,適合想學習Cinematic Designer的人。
Thumbnail
這篇文章介紹了作者的2.5D Camera Projection Mapping效果練習。文中還提供了一些有用的教程資源和相關技術,如電影產業中的數位繪景(Matte Painting)。後記分享了在Unreal遊戲引擎中使用Camera Matte Painting技術的網路教學和研究過程。
Thumbnail
這篇文章介紹了作者的2.5D Camera Projection Mapping效果練習。文中還提供了一些有用的教程資源和相關技術,如電影產業中的數位繪景(Matte Painting)。後記分享了在Unreal遊戲引擎中使用Camera Matte Painting技術的網路教學和研究過程。
Thumbnail
ThreeJS ArcballControl呼叫update方法後,視角被翻轉問題的解決記錄
Thumbnail
ThreeJS ArcballControl呼叫update方法後,視角被翻轉問題的解決記錄
Thumbnail
Ae 小技巧:Adjustment Layer 調整圖層 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Adjustment Layer 調整圖層 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Orbit 環繞效果 + 物件面對鏡頭 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Orbit 環繞效果 + 物件面對鏡頭 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Null Object 控制物體旋轉 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Null Object 控制物體旋轉 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
很多AI只要輸入相關的鏡頭的關鍵字,視覺畫面會隨著鏡頭移動。 鏡頭與視角的關鍵字: 微觀|Microscopic view 焦點,對焦|Focus 第一人稱|First person perspective 第三人稱|Third person perspective 特寫|Close
Thumbnail
很多AI只要輸入相關的鏡頭的關鍵字,視覺畫面會隨著鏡頭移動。 鏡頭與視角的關鍵字: 微觀|Microscopic view 焦點,對焦|Focus 第一人稱|First person perspective 第三人稱|Third person perspective 特寫|Close
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News