【Three.js】如何选中外部模型

    three.js中模型选中使用的是射线法，根据摄像机角度，鼠标点击位置和模型选中的distance参数判断来选中模型。对于原生的矢量模型完全没有问题，但是当遇到导入的外部模型，如obj、stl等的时候，就发现完全选中不了，本文就如果解决选中外部模型和原生模型问题进行解决。

    先说说射线法，参考文章：https://blog.csdn.net/qq_30100043/article/details/79054862

（图片偷自：https://segmentfault.com/a/1190000010490845 ）    

2.选中原生矢量模型

    直接上代码：

function click(e){ // 声明 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, camera); // 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前 var intersects = raycaster.intersectObjects(scene.children); var objs=[]; for (var i = 0; i < intersects.length; i++) { var intersect = intersects[i]; if (intersect.object instanceof THREE.Mesh) { var obj = intersect.object; //把距离加到模型用户数据里面，方便后面排序 obj.userData.distance = intersect.distance; objs.push(obj); } } //按照距离排序 objs = objs.sort(function (a, b) { return a.userData.distance - b.userData.distance; }); //objs就是按照距离由近到远排列的选中模型数组集合 //todo:后面操作渲染展示等等... //.... }