threejs引入GLTF模型进行点击获取

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

// 获取与射线相交的对象数组

//this.renderer这是渲染器dom对象

this.renderer.domElement.addEventListener('click', this.getIntersects)

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, true); //如果加载的是gltf文件，这里一定要把tue加上，代表递归
//当射线接触到导入的gltf模型，且没有点击到其他模型时（这是我项目里的内容，理解了方法的用法，就可以自定义了）

console.log(intersects);

//返回选中的对象 return intersects; }

 

参考链接：https://blog.csdn.net/yunduanzhijie/article/details/113373093

参考链接：101 Three.js 场景世界坐标和平面二维坐标互转_现在学习也不晚-CSDN博客