最近编辑点击事件时发现:
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类型也是不行的,这个时候有两种方法:
一、再深入子对象。
二、建立一个透明可设别对象进行点击绑定。