three.js创建骨骼动画，使用SkinnedMesh制作蒙皮(vue中使用three.js69)

1.demo效果

2.骨骼蒙皮动画介绍

人体有骨骼肌肉和皮肤，在three.js中骨骼的作用和人体的骨骼相同就是骨架，蒙皮即人类的皮肤，只不过它不需要肌肉，骨骼蒙皮动画其实就是通过骨骼的变形蒙皮联动而产生一系列的动画

3. 实现要点

3.1 加载模型文件

与之前一样这里要用到JSONLoader加载器，需要在 public目录下的index.html 文件中引入旧版three.js

<script type="text/javascript" src="./libs/three.js"></script>

在当前vue文件中注释掉引入本地依赖的代码

// import * as THREE from 'three'

加载模型代码如下

// 创建模型
createModels() {
   
   
  const THIS = this
  const publicPath = process.env.BASE_URL
  const loader = new THREE.JSONLoader()
  loader.load(`${
     
     publicPath}models/hand-1.js`, (geometry, material) => {
   
   
    //创建蒙皮
    const mat = new THREE.MeshLambertMaterial({
   
   
      color: 0xf0c8c9,
      skinning: true
    })
    THIS.mesh = new THREE.SkinnedMesh(geometry, mat)

    THIS.mesh.rotation.x = 0.5 * Math.PI
    THIS.mesh.rotation.z = 0.7 * Math.PI
    THIS.scene.add(THIS.mesh)
    //初始化tween动画
    THIS.initTween()
  })
}

3.2 创建tween动画

initTween() {
   
   
  this.animationMap = {
   
    pos: 1 } // 动画变量
  this.tween = new TWEEN.Tween(this.animationMap)
    .to({
   
    pos: 0 }, 3000)
    .easing(TWEEN.Easing.Cubic.InOut)
    .yoyo(true)
    .repeat(Infinity)
    .onUpdate(this.onUpdate)
  this.tween.start()
},
onUpdate() {
   
   
  // 手指弯曲
  const pos = -this.animationMap.pos
  this.mesh.skeleton.bones[5].rotation.set