最近使用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();
设置完后我就能摄取到我想要的对象了