threejs自定义引入模型进行点击获取

最近编辑点击事件时发现:
threejs的 raycaster只对mesh有感应,而引入模型类型是group,那么要对引入模型进行获取就要把
raycaster.intersectObjects(children)里children对象设置为group的children这样就可以编辑对引入模型的点击事件。
如果目标模型的同级模型干扰严重,可以直接外部建立一个透明mesh进行点击绑定

// 获取与射线相交的对象数组
function getIntersects(event) {
  event.preventDefault();
  // 声明 raycaster 和 mouse 变量
  var raycaster = new THREE.Raycaster();
  var mouse = new THREE.Vector2();
  // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  //通过鼠标点击的位置和当前相机的矩阵计算出射线位置
  raycaster.setFromCamera(mouse, three.camera);
  // 获取与射线相交的对象数组,按照距离排序,越近的越靠前
  //scene下的children,--
  var intersects = raycaster.intersectObjects(scene.children);
  //当射线接触到导入的gltf模型,且没有点击到其他模型时(这是我项目里的内容,理解了方法的用法,就可以自定义了)
  if(intersects.length==0){
  //group的children
  //重新对获取的intersects的参数进行匹配,即group的children
    intersects =  raycaster.intersectObjects(scene.children[6].children);
    console.log(intersects);
  }
  //返回选中的对象
  return intersects;
}

原理即更改 intersects = raycaster.intersectObjects(参数);的参数将scene.children替换成scene内group(引入模型)的children。
注意特殊例子:如果group的children对象是3D内的object类型也是不行的,这个时候有两种方法:
一、再深入子对象。

二、建立一个透明可设别对象进行点击绑定。

  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值