three.js获取三维物体的点击事件

three.js文档里面有介绍到一个raycaster的属性 

文档地址:https://threejs.org/docs/index.html?q=raycaster#api/zh/core/Raycaster;

首先生成一条射线和二维空间的坐标

            var  raycaster = new THREE.Raycaster();
            var  mouse = new THREE.Vector2();

然后计算鼠标对对于三维空间的坐标

 

function onm ouseMove( event ) {

    // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

intersectObjects是判断它们有没有相交,返回的是一个数组格式,空数组就是没有相交;

three.js获取三维物体的点击事件

                var intersects = raycaster.intersectObjects(group.children);


                if (intersects.length > 0) {
                  console.log(intersects[0].object)
                }

 

上一篇:【经典面试题】给定一个由 n 个整数组成的数组 list,在 list 中是否有元素 a, b, c 这样的 a + b + c = 0?找出数组中所有唯一的三元组,得出总和等于0 注:得到的解集


下一篇:Three.js中实现场景雾化效果