ThreeJS ArcballControl視角旋轉踩坑分享
更新於 發佈於 閱讀時間約 1 分鐘
在工作上需要重構場景相機的程式碼，用的是Threejs的Arcball control來控制視角旋轉平移。
由於初始模型方向通常上下顛倒，所以重構時在初始化有設定相機up為0,0,-1。
問題說明
ArcballControl文檔有提醒修改相機後要呼叫ArcballControl的update方法，但是發現旋轉模型視角後呼叫update，視角被翻轉
呼叫update函式後視角亂跑
問題尋找
到ArcballControl套件的update方法逐行註解進行偵錯，發現是最後1576行camera.lookAt函式造成的問題
ArcballControl套件update函式原始碼
聯想到視角亂跳時，都是相機視野的旋轉（相當於歪著頭看東西），於是猜到可能是camera.up的問題
THREEJS Object.up文檔
但在初始化相機時明明有設定正確的up，難道是camera.up被什麼地方自動改掉了？
於是檢查後發現，移動模型視角後，up的值就會被翻轉
camera.up向量在移動模型視角後，y和z軸被翻轉
又找了套件原始碼有關移動模型視角的地方，發現在旋轉視角時會更新camera.up，更新方法是用我們初始化相機的camera.up方向，應用上當前相機的旋轉量。
camera.up被改變的地方
問題解決
到這裡已經猜到問題出在我在初始化相機時，就設定了camera.up，
於是試了在ArcballControl初始化後，再設定camera.up，終於就正常了
結論：
如果要設定camera.up，一定要放在ArcballControl初始化完成之後。
但不確定ArcballControl作者本意是不是這樣，或者其實更好的做法。
附上範例歡迎大家demo：ThreeJS ArcballControl視角旋轉踩坑範例
4會員
9內容數
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
3D 沒有正反向，正／反／好／壞都是大腦去定義的。
很多人在顯化過程中，會跑來跟我說「狀況好像倒退了」、「狀況好像變差了」，這篇文章會告訴你這背後的原因、邏輯，以及告訴你該怎麼解決。
來找我 Coach 的人，部分都經歷過，在顯化後，3D 突然停滯、甚至倒退。
這篇文章介紹了作者的2.5D Camera Projection Mapping效果練習。文中還提供了一些有用的教程資源和相關技術，如電影產業中的數位繪景（Matte Painting）。後記分享了在Unreal遊戲引擎中使用Camera Matte Painting技術的網路教學和研究過程。
JavaScript30 傳送門：https://javascript30.com/
透過 JS 控制 CSS 變數
今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。
以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
Ae 小技巧：Orbit 環繞效果 + 物件面對鏡頭
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
很多AI只要輸入相關的鏡頭的關鍵字，視覺畫面會隨著鏡頭移動。
鏡頭與視角的關鍵字：
微觀｜Microscopic view
焦點，對焦｜Focus
第一人稱｜First person perspective
第三人稱｜Third person perspective
特寫｜Close
下面使用一些關鍵字，來看看是否能嘗試控制鏡頭角度。不過，請注意，Stable Diffusion 派的 AI 生圖系統能否看懂提示詞？能看懂多少？是要看模型的，所以...
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
3D 沒有正反向，正／反／好／壞都是大腦去定義的。
很多人在顯化過程中，會跑來跟我說「狀況好像倒退了」、「狀況好像變差了」，這篇文章會告訴你這背後的原因、邏輯，以及告訴你該怎麼解決。
來找我 Coach 的人，部分都經歷過，在顯化後，3D 突然停滯、甚至倒退。
這篇文章介紹了作者的2.5D Camera Projection Mapping效果練習。文中還提供了一些有用的教程資源和相關技術，如電影產業中的數位繪景（Matte Painting）。後記分享了在Unreal遊戲引擎中使用Camera Matte Painting技術的網路教學和研究過程。
JavaScript30 傳送門：https://javascript30.com/
透過 JS 控制 CSS 變數
今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。
以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
Ae 小技巧：Orbit 環繞效果 + 物件面對鏡頭
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
很多AI只要輸入相關的鏡頭的關鍵字，視覺畫面會隨著鏡頭移動。
鏡頭與視角的關鍵字：
微觀｜Microscopic view
焦點，對焦｜Focus
第一人稱｜First person perspective
第三人稱｜Third person perspective
特寫｜Close
下面使用一些關鍵字，來看看是否能嘗試控制鏡頭角度。不過，請注意，Stable Diffusion 派的 AI 生圖系統能否看懂提示詞？能看懂多少？是要看模型的，所以...