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关于拾取的问题

 

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据