threejs射线拾取不准确的解决方法？

初始写法

操作的是整个界面的时候

代码块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;

    }

改进写法

但是如果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;

}

参考链接:blog.csdn.net/hard_reward…