关于three.js:Threejs-raycaster当canvas不是满屏幕时点击捕捉模型

let a = document.getElementsByTagName("canvas")
        var canvas
        for(let i of a){
          if(i.parentElement&&i.parentElement.id&&i.parentElement.id =="modelBox"){
            canvas = i
          }
        }
        let x = ((event.clientX - canvas.getBoundingClientRect().left) / canvas.offsetWidth) *2-1;// 规范设施横坐标

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

        let y = -((event.clientY - canvas.getBoundingClientRect().top) / canvas.offsetHeight) *2+1;// 规范设施纵坐标

        let standardVector =new THREE.Vector3(x, y,1);// 规范设施坐标

        // 规范设施坐标转世界坐标

        let worldVector = standardVector.unproject(camera);

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

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

        // 创立射线投射器对象

        let raycaster =new THREE.Raycaster(camera.position, ray);

        // 获取raycaster直线和所有模型相交的数组汇合
        var intersects = raycaster.intersectObjects(scene.children, true);

这里定位的modelBox是threejs的canvas的父辈div的id