首页 > Web开发 > 详细

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

时间:2021-07-31 22:13:08      阅读:18      评论:0      收藏:0      [点我收藏+]

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 onMouseMove( event ) {

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

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

}

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

技术分享图片

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


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

 

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

原文:https://www.cnblogs.com/huzhuhua/p/15084670.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!