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,終於就正常了

vocus|新世代的創作平台

結論:

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

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

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

留言
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
很多AI只要輸入相關的鏡頭的關鍵字,視覺畫面會隨著鏡頭移動。 鏡頭與視角的關鍵字: 微觀|Microscopic view 焦點,對焦|Focus 第一人稱|First person perspective 第三人稱|Third person perspective 特寫|Close
Thumbnail
很多AI只要輸入相關的鏡頭的關鍵字,視覺畫面會隨著鏡頭移動。 鏡頭與視角的關鍵字: 微觀|Microscopic view 焦點,對焦|Focus 第一人稱|First person perspective 第三人稱|Third person perspective 特寫|Close
Thumbnail
Ae 小技巧:Adjustment Layer 調整圖層 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Adjustment Layer 調整圖層 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
Ae 小技巧:Null Object 控制物體旋轉 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Null Object 控制物體旋轉 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
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
Ae 小技巧:Orbit 環繞效果 + 物件面對鏡頭 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Orbit 環繞效果 + 物件面對鏡頭 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
ThreeJS ArcballControl呼叫update方法後,視角被翻轉問題的解決記錄
Thumbnail
ThreeJS ArcballControl呼叫update方法後,視角被翻轉問題的解決記錄
Thumbnail
介紹Unreal Sequencer鏡頭工具,CG動畫的學習經驗,並提供相關教程,適合想學習Cinematic Designer的人。
Thumbnail
介紹Unreal Sequencer鏡頭工具,CG動畫的學習經驗,並提供相關教程,適合想學習Cinematic Designer的人。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News