threejs给模型绑定点击或者鼠标移入事件，兼容mobile和pc

最新推荐文章于 2024-07-31 07:48:45 发布

马娟

最新推荐文章于 2024-07-31 07:48:45 发布

阅读量4.6k

点赞数 1

分类专栏： threejs

本文链接：https://blog.csdn.net/weixin_41077029/article/details/108616264

版权

threejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

//投影获取点击或鼠标移入的模型
var raycaster = new THREE.Raycaster()
var mouse = new THREE.Vector2()
function findIntersectedModule(e, arrMesh) {
    var intersected;
    //将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义
    if (isMobile) {
        if (e.changedTouches) {
            var touch = e.changedTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
            if (Math.abs(touch.pageX-touchStartX) + Math.abs(touch.pageY-touchStartY) >= 3) {
                return undefined;
            }
            mouse.x = (touch.pageX / window.innerWidth) * 2 - 1;
            mouse.y = -(touch.pageY / window.innerHeight) * 2 + 1;
        }
        if (!isOrientationLandscape()) mouse.rotateAround(new THREE.Vector2(0, 0), 1.57);
    } else {
        mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
    }
    //新建一个三维单位向量 假设z方向就是0.5
    //根据照相机，把这个向量转换到视点坐标系
    var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
    //在视点坐标系中形成射线,射线的起点向量是照相机， 射线的方向向量是照相机到点击的点，这个向量应该归一标准化。
    var raycaster = new THREE.Raycaster(
        camera.position,
        vector.sub(camera.position).normalize()
      );
    //射线和模型求交，选中一系列直线
    var intersects = raycaster.intersectObjects(arrMesh);
    if (intersects.length > 0) {
        //选中第一个射线相交的物体
        intersected = intersects[0].object;
    }
    return intersected;
}