这里只是记录一下坑,方便查阅,内容主要援引自: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);
// 返回射线选中的对象 第二个参数如果不填 默认是false
letintersects = rayCaster.intersectObjects(scene.children,true);
if(intersects.length >0) {
// console.log(intersects[0].object);
}
}