Three.js 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

你可能感兴趣的:(three.js)