raycaster 拾取模型

jianghuaijie發表於2018-08-29

最近使用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();

設定完後我就能攝取到我想要的物件了

 

相關文章