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();

设置完后我就能摄取到我想要的对象了