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

57次阅读

共计 780 个字符，预计需要花费 2 分钟才能阅读完成。

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

正文完