three.js raycaster射线碰撞的坑（当canvas大小不是屏幕大小是解决拾取物体的办法）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这里只是记录一下坑,方便查阅,内容主要援引自:three.js Raycaster 射线拾取 canvas不占满整屏时射线拾取存在偏差

1. 世界坐标系: 世界坐标系位于屏幕的中心(0,0,0),往右侧是x轴,往上是y轴,垂直屏幕朝向的是z轴.所以屏幕的左下角是(-1,-1),右上角是(1,1);

2. 屏幕坐标系: webgl会将三维的坐标经过计算,在屏幕里正常显示.

在根据模型或者网格去进行碰撞测试时,我们选择的点一般就是摄像机的位置(相当于人眼的位置,在屏幕上点击的位置,组成一条射线)

初始化,比如:

var mouse = new THREE.Vector2();

var raycaster = new THREE.Raycaster();

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;

mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

raycaster.setFromCamera(mouse,camera) // 也可以给构造函数传参的形式写

var intersects = raycaster.intersectObjects( scene.children ); // 这里的children,如果你是引入的模型,那么模型加载parse的时候,可以使用一个变量存储你需要检测的对象,这里必须传入

但是当你的浏览器屏幕的缩放比不一致的时候,你就会看到一个很奇葩的现象,你的模型偏了,你的鼠标永远都选不到目标,然后审查一下元素,可能会出现winner.innerHeight,window.innerWidth 远大于或者小于屏幕视口实际尺寸的情况(我当时还以为是无限鼠标的锅,后来才想到可能是屏幕的缩放导致的).这时需要重新去定义射线的初始化.我在开始部分原因的那段代码就可以很好的解决:

functioninitRay(){

// 屏幕坐标转标准设备坐标

let x = ((event.clientX - mainCanvas.getBoundingClientRect().left) / mainCanvas.offsetWidth) *2-1;// 标准设备横坐标

// 这里的mainCanvas是个dom元素,getBoundingClientRectangle会返回当前元素的视口大小.

let y = -((event.clientY - mainCanvas.getBoundingClientRect().top) / mainCanvas.offsetHeight) *2+1;// 标准设备纵坐标

let standardVector =newTHREE.Vector3(x, y,1);// 标准设备坐标

// 标准设备坐标转世界坐标

let worldVector = standardVector.unproject(camera);

// 射线投射方向单位向量(worldVector坐标减相机位置坐标)

let ray = worldVector.sub(camera.position).normalize();

// 创建射线投射器对象

letrayCaster =newTHREE.Raycaster(camera.position, ray);