raycaster 拾取模型
最近使用threejs展示3D模型,在滑鼠選中模型的時候怎麼也獲取不到,用arrowHelper 顯示射線也是和滑鼠擊點偏差很大???
參考:
https://segmentfault.com/a/1190000010490845
Raycaster原理: webgl把中心點設定為0,然後把世界座標分成高(-1,1)之間,寬也如此,所以首先把滑鼠點選的位置轉換成(-1,1)之間,然後從相機所在位置到滑鼠點選的位置的連線畫一條射線,射線穿過的物體就會被拾取。
重點是: 很多教程裡,計算mouse.x和mouse.y的時候都是認為canvas佔據整個螢幕計算的,所以用的window.innerWidth和window.innerHeight。但是:
mouse.x和mouse.y是相對繪製的canvas計算,也就是說canvas的中心是(0,0),canvas的高和寬被分成(-1,1),所以如果你的canvas不是整個螢幕,用上述程式碼是無法正確拾取物體的。
參考:
https://blog.csdn.net/u013090676/article/details/77188088
通過參考上篇文章,我知道在滑鼠點選世界座標獲取的時候出了問題,我是按照全屏來計算的;我的模型展示是放在
<div id="webgl-output"></div>
我取到div的寬高,並計算了擊點的座標,發現還是選取不到,擊點和射線偏差還是很大。
var dom = document.getElementById("webgl-output");
var left = dom.getBoundingClientRect().left;
var top = dom.getBoundingClientRect().top;
var width = dom.offsetWidth;
var height = dom.offsetHeight;
//計算
mouse.x = ((e.clientX - left) / width) * 2 - 1;
mouse.y = -((e.clientY - top) / height) *2 +1;
我用DevTools 檢視到,子元素canvas的寬高比父元素 webgl-ouput 都要大,感覺問題可能出現在這裡?
但是為什麼會比父元素的大呢,我發現有一個地方我設定了canvas的寬、高
renderer.setSize(width, height);
這個地方的寬高應該不能大於它的父元素webgl-output;所以我這裡重新設定了值
var width = $('#webgl-output').width();
var height = $('#webgl-output').height();
設定完後我就能攝取到我想要的物件了
相關文章
- Cesium 滑鼠拾取橢球、地形、模型座標點(經度+緯度+高程)模型
- Android技巧拾取Android
- unity案例入門(拾取遊戲)Unity遊戲
- 騰訊地圖拾取座標地圖
- WebGL自學課程(13):獲得三維拾取向量Web
- 透過滑鼠事件獲取滑鼠位置在3d中的座標mouse/Raycaster事件3DAST
- Unreal Cook Book:VR應用中的焦點目標拾取UnrealVR
- 探索Robotiq夾爪|2F-85在拾取和放置的應用
- 一篇文章帶你用jquery mobile設計顏色拾取器jQuery
- 百度地圖拾取座標工具-toolfk程式設計師線上工具地圖程式設計師
- 軟體測試模型-其他模型 (W 模型|H 模型|X 模型)模型
- 模型壓縮-模型蒸餾、模型剪枝、模型量化模型
- 機器學習引數模型與非引數模型/生成模型與判別模型機器學習模型
- 軟體開發模型/原型法/瀑布模型/螺旋模型模型原型
- 10django模型[模型類]Django模型
- 生成模型與判別模型模型
- 軟體測試模型-瀑布模型模型
- 軟體測試模型-V 模型模型
- 軟體測試模型-敏捷模型模型敏捷
- 從貧血模型到充血模型模型
- DOM 模型(文件物件模型)重點模型物件
- 理解BW資料模型 - DSO模型模型
- 軟體測試中的V模型、W模型和H模型模型
- 因果模型:邊緣結構模型MSM模型
- 【模型推理】Tengine 模型轉換及量化模型
- OSI模型 與 DOD模型的比較模型
- 鴻蒙HarmonyOS實戰-Stage模型(程序模型)鴻蒙模型
- 四 阿里大模型接入:模型微調阿里大模型
- Reactor模型React模型
- 索引模型索引模型
- IO模型模型
- 【JVM】模型JVM模型
- NIO模型模型
- MCV模型模型
- Django 模型Django模型
- 機器學習模型機器學習模型
- 遊戲化三部曲:核心模型、輔助模型和成長模型遊戲模型
- 資料倉儲 - 星座模型、星型模型和雪花模型的介紹模型