Three.js中的raycaster射线获取不准确问题

Three.js中的raycaster射线获取不准确问题

初始写法

操作的是整个界面的时候

代码块1.1

//通过射线与对象相交来获取对象
function getIntersects(event) {
        event.preventDefault();

        // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
        raycaster.setFromCamera(mouse, camera);

        //这里的objects是一个对象数组
        // 获取objects与射线相交的对象数组,其中的元素按照距离排序,越近的越靠前,
        var intersects = raycaster.intersectObjects(objects);

        //返回选中的对象数组
        return intersects;
    }

代码块1.2

//对数组中的对象进行处理得到需要的对象
    function getObject(event) {
        var intersects = getIntersects(event);
        // 获取选中最近的 Mesh 对象
        if (intersects.length != 0 && intersects[0].object instanceof THREE.Mesh) {
        	//得出selectObject,是射线与objects数组相交的第一个对象
			selectObject = intersects[0].object;
            //下面进行你要进行的操作




        }
    }

改进写法

但是如果canvas的大小并不是整个界面的大小(比如有其他的div,而canvas只是嵌入其中),那么按照初始写法就会获取不到物体,此时应该改进一下代码块1.1.

代码块2.1

//通过射线与对象相交来获取对象
function getIntersects(event) {
        event.preventDefault();
        
        // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
        //这里的container就是画布所在的div,也就是说,这个是要拿整个scene所在的容器来界定的
        let getBoundingClientRect = container.getBoundingClientRect()
        mouse.x = ((event.clientX - getBoundingClientRect .left) / container.offsetWidth) * 2 - 1;
        mouse.y = -((event.clientY - getBoundingClientRect .top) / container.offsetHeight) * 2 + 1;

        //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
        raycaster.setFromCamera(mouse, camera);

        // 获取与射线相交的对象数组,其中的元素按照距离排序,越近的越靠前
        var intersects = raycaster.intersectObjects(objects);

        //返回选中的对象
        return intersects;
    }
  • 13
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值