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視角旋轉踩坑範例

4會員
9內容數
留言0
查看全部
發表第一個留言支持創作者!
s_SoNg的沙龍 的其他內容
setter和getter能把狀態改變時需做的事情包裝起來,讓外部只需簡單修改參數就能達到預想的效果
在程式任何地方都能修改各種react組件狀態的做法分享
網格擴散可以就像剪紙一樣,把紙上想要的部分剪下來。 通過模型的一個點,找到周圍相鄰的點;其他點又能找到周圍相鄰的點,就像水波一樣擴散出去。 許多3D的算法,如裁切、干涉深度偵測等都會用到。
在THREE r125版本開始,THREE.Geometry就被棄用。 自己的職位是IT前端,由於套件安全性的原因,需要對THREE套件進行升級,但自己所在公司的程式內還有大量的Geometry。 因為前輩們開發了一些複雜強大的算法,如果用Threejs官方建議的正規方法,自己必須要看懂並且改寫算法
setter和getter能把狀態改變時需做的事情包裝起來,讓外部只需簡單修改參數就能達到預想的效果
在程式任何地方都能修改各種react組件狀態的做法分享
網格擴散可以就像剪紙一樣,把紙上想要的部分剪下來。 通過模型的一個點,找到周圍相鄰的點;其他點又能找到周圍相鄰的點,就像水波一樣擴散出去。 許多3D的算法,如裁切、干涉深度偵測等都會用到。
在THREE r125版本開始,THREE.Geometry就被棄用。 自己的職位是IT前端,由於套件安全性的原因,需要對THREE套件進行升級,但自己所在公司的程式內還有大量的Geometry。 因為前輩們開發了一些複雜強大的算法,如果用Threejs官方建議的正規方法,自己必須要看懂並且改寫算法
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
除了聚焦在台灣的土地或對我們有著深遠影響的中國,曾經在大航海時代佔有一席之地的島嶼,是否能用更巨觀的視角來探究這塊島嶼的歷史?在更全面了解台灣史的同時,如今也在國際上能見度日增的台灣人們,能不能經由過去的經驗,來引導我們探索未來的方向?
嘉義縣文化觀光局「慢遊嘉義」粉專公布年度前10名熱門景點,第一名由阿里山國家森林遊樂區奪下,其他的熱點分別是奮起湖、觀音瀑布、太平雲梯、故宮南院、二延平步道、獨立山、隙頂、梅山、二尖山步道、蒜頭糖廠和布袋漁港。 TOP1阿里山國家森林遊樂區 阿里山日出(圖片來源:阿里山日出印象音樂會FB
Thumbnail
可轉換債券選擇權是一種創新的衍生金融工具,源自於可轉換公司債的資產交換機制(簡稱CBAS)。 這種工具涉及將公司債拆分成兩部分:「可轉換債券選擇權」和「標準公司債」。這樣的分割使得投資者可以根據自己的投資策略選擇投資其中的一部分或兩者。 類似於交易權證,投資者通過支付一定的利息或權利金,獲得在特
Thumbnail
戰亂..不斷,很想知道這些策劃者心裡的感受,是否攪動一杯咖啡,跟下令行動是一樣的優雅。 啜飲鮮血是否無感呢?喝下惡魔的釀造,是下肚後才發現,抑或是原本就是滿瓶餵養。
Thumbnail
每年暑假都是孩子們最輕鬆的時刻,不必熬夜唸書,也不需要早上拖著黑眼圈趕到學校。學期間,每每看著孩子疲憊的模樣,讓我既心疼又擔心。但在暑假時,每天看著孩子四處玩樂也是令人頭痛。幸好孩子遇見了丁宣智老師,才讓她的學習狀態漸漸變得有規律。 羊羊目前就讀國中一年級,學校離家只有10分鐘的距離。每天早上叫她
Thumbnail
  《八尺門的辯護人》是由鏡文學和中華電信出品,改編自同名原著小說。該劇集為小說作者唐福睿自編自導,也是導演的首部劇集。《八尺門的辯護人》專業且精彩的法庭戲,多元議題的內容,成功地把臺劇律政劇集推向新的標竿。
當你決定出國留遊學時,選擇一所優秀的語言學校至關重要。在愛爾蘭,擁有豐富的語言學習資源和美麗的自然風光,你將能夠享受學習的同時體驗異國文化。我們為您提供全方位的愛爾蘭語言學校推薦,從專業的視角為您的海外留遊學之旅打下堅實的基礎。
Thumbnail
近日越來越多賣場被詐騙集團入侵,包含蝦皮和旋轉拍賣都有受害案例。賣家收到買家私訊稱「下不了單」,附上的截圖寫「您訂購的賣場尚未簽署協議」,並要賣家聯繫客服,其實這個客服、賣家通通是假的,目的就是要騙你付款!
Thumbnail
「因為曾經淋過雨,所以急著替人撐傘。」 不知道這是誰說過的話,但非常呼應接下來要說的這件事情。 我在幾個禮拜前的周末,參加整整兩天的「職涯諮詢師」培訓課程。 當然不諱言的直說,一部份是因為……
Thumbnail
關於人貓關係,子軒醫師有個相當浪漫的詮釋: 「貓咪其實是自願走入人類家庭,牠們比你想像中還要依賴人類,是樂意與你一起生活的野生動物。」 貓咪樂於與人類為伍,與你分享生活中的資源,若我們多做一點,願意了解貓咪的天性與行為,打造出適合其生活的環境,在人貓中便能夠享受彼此相安、更加和諧溫馨的生活品質。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
除了聚焦在台灣的土地或對我們有著深遠影響的中國,曾經在大航海時代佔有一席之地的島嶼,是否能用更巨觀的視角來探究這塊島嶼的歷史?在更全面了解台灣史的同時,如今也在國際上能見度日增的台灣人們,能不能經由過去的經驗,來引導我們探索未來的方向?
嘉義縣文化觀光局「慢遊嘉義」粉專公布年度前10名熱門景點,第一名由阿里山國家森林遊樂區奪下,其他的熱點分別是奮起湖、觀音瀑布、太平雲梯、故宮南院、二延平步道、獨立山、隙頂、梅山、二尖山步道、蒜頭糖廠和布袋漁港。 TOP1阿里山國家森林遊樂區 阿里山日出(圖片來源:阿里山日出印象音樂會FB
Thumbnail
可轉換債券選擇權是一種創新的衍生金融工具,源自於可轉換公司債的資產交換機制(簡稱CBAS)。 這種工具涉及將公司債拆分成兩部分:「可轉換債券選擇權」和「標準公司債」。這樣的分割使得投資者可以根據自己的投資策略選擇投資其中的一部分或兩者。 類似於交易權證,投資者通過支付一定的利息或權利金,獲得在特
Thumbnail
戰亂..不斷,很想知道這些策劃者心裡的感受,是否攪動一杯咖啡,跟下令行動是一樣的優雅。 啜飲鮮血是否無感呢?喝下惡魔的釀造,是下肚後才發現,抑或是原本就是滿瓶餵養。
Thumbnail
每年暑假都是孩子們最輕鬆的時刻,不必熬夜唸書,也不需要早上拖著黑眼圈趕到學校。學期間,每每看著孩子疲憊的模樣,讓我既心疼又擔心。但在暑假時,每天看著孩子四處玩樂也是令人頭痛。幸好孩子遇見了丁宣智老師,才讓她的學習狀態漸漸變得有規律。 羊羊目前就讀國中一年級,學校離家只有10分鐘的距離。每天早上叫她
Thumbnail
  《八尺門的辯護人》是由鏡文學和中華電信出品,改編自同名原著小說。該劇集為小說作者唐福睿自編自導,也是導演的首部劇集。《八尺門的辯護人》專業且精彩的法庭戲,多元議題的內容,成功地把臺劇律政劇集推向新的標竿。
當你決定出國留遊學時,選擇一所優秀的語言學校至關重要。在愛爾蘭,擁有豐富的語言學習資源和美麗的自然風光,你將能夠享受學習的同時體驗異國文化。我們為您提供全方位的愛爾蘭語言學校推薦,從專業的視角為您的海外留遊學之旅打下堅實的基礎。
Thumbnail
近日越來越多賣場被詐騙集團入侵,包含蝦皮和旋轉拍賣都有受害案例。賣家收到買家私訊稱「下不了單」,附上的截圖寫「您訂購的賣場尚未簽署協議」,並要賣家聯繫客服,其實這個客服、賣家通通是假的,目的就是要騙你付款!
Thumbnail
「因為曾經淋過雨,所以急著替人撐傘。」 不知道這是誰說過的話,但非常呼應接下來要說的這件事情。 我在幾個禮拜前的周末,參加整整兩天的「職涯諮詢師」培訓課程。 當然不諱言的直說,一部份是因為……
Thumbnail
關於人貓關係,子軒醫師有個相當浪漫的詮釋: 「貓咪其實是自願走入人類家庭,牠們比你想像中還要依賴人類,是樂意與你一起生活的野生動物。」 貓咪樂於與人類為伍,與你分享生活中的資源,若我們多做一點,願意了解貓咪的天性與行為,打造出適合其生活的環境,在人貓中便能夠享受彼此相安、更加和諧溫馨的生活品質。