raycaster 拾取模型

jianghuaijie發表於2018-08-29
AST模型

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

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

 

相關文章