美文网首页
three.js raycaster射线碰撞的坑

three.js raycaster射线碰撞的坑

作者: 洋洋袁 | 来源:发表于2018-09-18 16:59 被阅读0次

    这里只是记录一下坑,方便查阅,内容主要援引自: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);

      }

    }

    相关文章

      网友评论

          本文标题:three.js raycaster射线碰撞的坑

          本文链接:https://www.haomeiwen.com/subject/kewunftx.html