ThreeJS ArcballControl視角旋轉踩坑分享
更新於 2024/06/18閱讀時間約 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 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
除了聚焦在台灣的土地或對我們有著深遠影響的中國，曾經在大航海時代佔有一席之地的島嶼，是否能用更巨觀的視角來探究這塊島嶼的歷史？在更全面了解台灣史的同時，如今也在國際上能見度日增的台灣人們，能不能經由過去的經驗，來引導我們探索未來的方向？
嘉義縣文化觀光局「慢遊嘉義」粉專公布年度前10名熱門景點，第一名由阿里山國家森林遊樂區奪下，其他的熱點分別是奮起湖、觀音瀑布、太平雲梯、故宮南院、二延平步道、獨立山、隙頂、梅山、二尖山步道、蒜頭糖廠和布袋漁港。
TOP1阿里山國家森林遊樂區
阿里山日出（圖片來源：阿里山日出印象音樂會FB
可轉換債券選擇權是一種創新的衍生金融工具，源自於可轉換公司債的資產交換機制（簡稱CBAS）。
這種工具涉及將公司債拆分成兩部分：「可轉換債券選擇權」和「標準公司債」。這樣的分割使得投資者可以根據自己的投資策略選擇投資其中的一部分或兩者。
類似於交易權證，投資者通過支付一定的利息或權利金，獲得在特
戰亂..不斷，很想知道這些策劃者心裡的感受，是否攪動一杯咖啡，跟下令行動是一樣的優雅。
啜飲鮮血是否無感呢？喝下惡魔的釀造，是下肚後才發現，抑或是原本就是滿瓶餵養。
每年暑假都是孩子們最輕鬆的時刻，不必熬夜唸書，也不需要早上拖著黑眼圈趕到學校。學期間，每每看著孩子疲憊的模樣，讓我既心疼又擔心。但在暑假時，每天看著孩子四處玩樂也是令人頭痛。幸好孩子遇見了丁宣智老師，才讓她的學習狀態漸漸變得有規律。
羊羊目前就讀國中一年級，學校離家只有10分鐘的距離。每天早上叫她
《八尺門的辯護人》是由鏡文學和中華電信出品，改編自同名原著小說。該劇集為小說作者唐福睿自編自導，也是導演的首部劇集。《八尺門的辯護人》專業且精彩的法庭戲，多元議題的內容，成功地把臺劇律政劇集推向新的標竿。
當你決定出國留遊學時，選擇一所優秀的語言學校至關重要。在愛爾蘭，擁有豐富的語言學習資源和美麗的自然風光，你將能夠享受學習的同時體驗異國文化。我們為您提供全方位的愛爾蘭語言學校推薦，從專業的視角為您的海外留遊學之旅打下堅實的基礎。
近日越來越多賣場被詐騙集團入侵，包含蝦皮和旋轉拍賣都有受害案例。賣家收到買家私訊稱「下不了單」，附上的截圖寫「您訂購的賣場尚未簽署協議」，並要賣家聯繫客服，其實這個客服、賣家通通是假的，目的就是要騙你付款！
「因為曾經淋過雨，所以急著替人撐傘。」
不知道這是誰說過的話，但非常呼應接下來要說的這件事情。
我在幾個禮拜前的周末，參加整整兩天的「職涯諮詢師」培訓課程。
當然不諱言的直說，一部份是因為……
關於人貓關係，子軒醫師有個相當浪漫的詮釋：
「貓咪其實是自願走入人類家庭，牠們比你想像中還要依賴人類，是樂意與你一起生活的野生動物。」
貓咪樂於與人類為伍，與你分享生活中的資源，若我們多做一點，願意了解貓咪的天性與行為，打造出適合其生活的環境，在人貓中便能夠享受彼此相安、更加和諧溫馨的生活品質。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
除了聚焦在台灣的土地或對我們有著深遠影響的中國，曾經在大航海時代佔有一席之地的島嶼，是否能用更巨觀的視角來探究這塊島嶼的歷史？在更全面了解台灣史的同時，如今也在國際上能見度日增的台灣人們，能不能經由過去的經驗，來引導我們探索未來的方向？
嘉義縣文化觀光局「慢遊嘉義」粉專公布年度前10名熱門景點，第一名由阿里山國家森林遊樂區奪下，其他的熱點分別是奮起湖、觀音瀑布、太平雲梯、故宮南院、二延平步道、獨立山、隙頂、梅山、二尖山步道、蒜頭糖廠和布袋漁港。
TOP1阿里山國家森林遊樂區
阿里山日出（圖片來源：阿里山日出印象音樂會FB
可轉換債券選擇權是一種創新的衍生金融工具，源自於可轉換公司債的資產交換機制（簡稱CBAS）。
這種工具涉及將公司債拆分成兩部分：「可轉換債券選擇權」和「標準公司債」。這樣的分割使得投資者可以根據自己的投資策略選擇投資其中的一部分或兩者。
類似於交易權證，投資者通過支付一定的利息或權利金，獲得在特
戰亂..不斷，很想知道這些策劃者心裡的感受，是否攪動一杯咖啡，跟下令行動是一樣的優雅。
啜飲鮮血是否無感呢？喝下惡魔的釀造，是下肚後才發現，抑或是原本就是滿瓶餵養。
每年暑假都是孩子們最輕鬆的時刻，不必熬夜唸書，也不需要早上拖著黑眼圈趕到學校。學期間，每每看著孩子疲憊的模樣，讓我既心疼又擔心。但在暑假時，每天看著孩子四處玩樂也是令人頭痛。幸好孩子遇見了丁宣智老師，才讓她的學習狀態漸漸變得有規律。
羊羊目前就讀國中一年級，學校離家只有10分鐘的距離。每天早上叫她
《八尺門的辯護人》是由鏡文學和中華電信出品，改編自同名原著小說。該劇集為小說作者唐福睿自編自導，也是導演的首部劇集。《八尺門的辯護人》專業且精彩的法庭戲，多元議題的內容，成功地把臺劇律政劇集推向新的標竿。
當你決定出國留遊學時，選擇一所優秀的語言學校至關重要。在愛爾蘭，擁有豐富的語言學習資源和美麗的自然風光，你將能夠享受學習的同時體驗異國文化。我們為您提供全方位的愛爾蘭語言學校推薦，從專業的視角為您的海外留遊學之旅打下堅實的基礎。
近日越來越多賣場被詐騙集團入侵，包含蝦皮和旋轉拍賣都有受害案例。賣家收到買家私訊稱「下不了單」，附上的截圖寫「您訂購的賣場尚未簽署協議」，並要賣家聯繫客服，其實這個客服、賣家通通是假的，目的就是要騙你付款！
「因為曾經淋過雨，所以急著替人撐傘。」
不知道這是誰說過的話，但非常呼應接下來要說的這件事情。
我在幾個禮拜前的周末，參加整整兩天的「職涯諮詢師」培訓課程。
當然不諱言的直說，一部份是因為……
關於人貓關係，子軒醫師有個相當浪漫的詮釋：
「貓咪其實是自願走入人類家庭，牠們比你想像中還要依賴人類，是樂意與你一起生活的野生動物。」
貓咪樂於與人類為伍，與你分享生活中的資源，若我們多做一點，願意了解貓咪的天性與行為，打造出適合其生活的環境，在人貓中便能夠享受彼此相安、更加和諧溫馨的生活品質。