three中蒙皮动画（skinnedMesh）的拾取（raycaster）问题

项目中遇到一个问题就是关于骨骼动画的拾取问题，我到现在也并没有解决这个问题，这个文章也只是作为我这个问题的探索过程，如果你看到并且解决方案，希望你可以给我留言，先感谢！

1 threejs中模型概述

从格式类型来看，three.js支持的模型格式有很多种，如下：

• JSON（*.js/ *.json） ：专门为Three.js自己设计的JSON格式，你可以使用它以声明的方式定义模型，及模型材质和动画。
• OBJ和MTL（*.obj/ *.mtl） ：OBJ是一种简单的三维文件格式，只用来定义对象的几何体。MTL文件通常和OBJ文件一起使用，在一个MTL文件中，定义对象的材质。
  Collada (*.dae)：用来定义XML类文件中数字内容的格式。差不多所有的三维软件和渲染引擎都支持这个格式。
• STL (*.stl) ：立体成型术 。 广泛用于快速成型。例如，三维打印机的模型文件通常是STL文件。Three.js有一个可定制的STL导出工具，STLExporter.js。可以将Three.js中的模型导出到一个STL文件。
• FBX (*.fbx) ：是FilmBoX这套软件所使用的格式，其最大的用途是用在诸如在max、maya、softimage等软件间进行模型、材质、动作和摄影机信息的互导，因此在创建三维内容的应用软件之间具有无与伦比的互用性。
• CTM (*.ctm) ：由openCTM创建的格式。可以用来压缩存储表示三维网格的三角形面片。
• VTK（*.vtk） ：Visualization Tookit 定义的文件格式，用来指定顶点和面。VTK有两种格式，Three.js支持旧的格式，即Asscii格式。
• PDB（*.pdb） ：特别的数据格式，由 蛋白质数据银行 场景，用来定义蛋白质的形状。Three.js可以加载并显示这种描述格式的蛋白质。
• PLY (*.ply) ：多边形文件格式。通常保存三维扫描仪的数据。

但是从模型带不带动画，基本上就两种，有动画和无动画的分为：

1. 带动画=》骨骼动画=》  Bone+skinnedMesh
2. 无动画=》Mesh+material/shaderMaterial

2 raycaster拾取

在3D场景中，你是没有办法获取元素然后添加一下交互事件，three则封装了raycaster，原理即从相机的位置为起点，到鼠标的位置，发出一条射线，然后这个射线与场景或模型检测是否发生碰撞，然后将遍历结果返回给你。你就可以从返回结果里面获取你想要的对象， 官网 很详细。这个拾取的点和数据是基于cpu计算的。

3 拾取蒙皮动画

蒙皮即skinnedMesh的定点绑定在骨骼上面，并可以被多个骨骼控制运动，骨骼依靠动画数据进行运动，

动画数据即顶点数据矩阵，是shader进行计算，在GPU中计算，因此skinnedMesh的网格变化即新的顶点位置是在GPU中完成的，而three的raycaster射线拾取是在js中遍历计算，即在CPU中完成的，因此拾取结果只是模型第一帧pose下的状态，后面的动画矩阵变换是拾取不到的

这是一些资料：

使用GPU计算骨骼动画（一）

unity3D研究之Skinned Mesh原理解析

stackoveflow关于拾取的问题