ThreeJs控制模型骨骼实现数字人

        之前章节有讲过ThreeJs加载pmd模型和vmd动作文件，实现动画人物根据vmd中的动作跳舞，不过缺点是只能按照文件中指定动作跳舞，如果要让一个模型做出多种动作的话，就需要做很多个动作文件，如果动作文件很多，加载势必也会变的慢了，所以这节讲ThreeJs用threejs代码控制模型中骨骼运动，实现动态控制人物做出指定动作。

        首先我们还是需要搭建出场景，这部分可以按照之前的章节提供的方法搭建，然后在场景中添加pmd模型，我们还拿之前的初音人物模型演示。

//加载pmd模型，模型为一个girl
initGirl() {
      this.helper = new MMDAnimationHelper()
      const loader = new MMDLoader()
      const _this = this
      loader.load('/static/animal/miku_v2.pmd', function(object) {
        const mesh = object
        if (object) {
          _this.bodyBone = object.skeleton.bones;
          console.log(_this.bodyBone)
        }
        _this.face = mesh.morphTargetInfluences
        _this.scene.add(mesh)
      }, null, null)
    },

加载完成后就可以得到一个静止的卡通女孩模型，因为没有加载动作文件，所以任务是不会动的，接下来就要使用js修改骨骼模型位置让她动起来，首先我们需要把加载的人物模型骨骼打印出来看下，刚才加载的方法中已经添加了打印骨骼的方法，可以看到一共140个骨骼，每个骨骼的name标示了这个骨骼属于哪部分，这样就更方便我们等会操作指定的骨骼了。

假设我们先让她的头发随风飘动，先找到他的头发骨骼模型，这里找到是下标12,13,14,15,16为左侧头发，44,45,46,47,48为右侧头发，下面可以控制头发摆动，先创建一个控制数组actions元素为bool类型，假设第三个为控制头发飘动，为true的时候朝向一个方向移动，为false往另一个方向移动回来，代码如下，

    //动漫渲染
    initAnimate() {
      requestAnimationFrame(this.initAnimate)
      this.renderer.render(this.scene, this.camera)
      if(this.bodyBone.length>0){
        if(this.bodyBone[12].rotation.z<0.1 && this.actions[3]===true) {
          this.bodyBone[12].rotation.z += 0.001
          this.bodyBone[13].rotation.z += 0.001
          this.bodyBone[14].rotation.z -= 0.001
          this.bodyBone[15].rotation.z += 0.001
          this.bodyBone[16].rotation.z -= 0.001
          this.bodyBone[44].rotation.z += 0.001
          this.bodyBone[45].rotation.z += 0.001
          this.bodyBone[46].rotation.z -= 0.001
          this.bodyBone[47].rotation.z += 0.001
          this.bodyBone[48].rotation.z -= 0.001
        }else{
          this.actions[3] = false
        }
        if(this.bodyBone[12].rotation.z>0 && this.actions[3]===false){
          this.bodyBone[12].rotation.z -=0.001
          this.bodyBone[13].rotation.z -=0.001
          this.bodyBone[14].rotation.z +=0.001
          this.bodyBone[15].rotation.z -=0.001
          this.bodyBone[16].rotation.z +=0.001
          this.bodyBone[44].rotation.z -=0.001
          this.bodyBone[45].rotation.z -=0.001
          this.bodyBone[46].rotation.z +=0.001
          this.bodyBone[47].rotation.z -=0.001
          this.bodyBone[48].rotation.z +=0.001
        }else{
          this.actions[3] = true
        }
      }
    },

看下效果

threejs控制头发摆动

但是身体还比较僵硬，下面再给其他部分添加一点动态效果，比如嘴巴说话，因为嘴巴说话不同的文字嘴型是不一样的，而不是像头发一样可以左右摆动，所以这里给嘴巴的偏移设置随机数但是见骨骼模型中发现并没有嘴巴的部分，然后发现是在morphTargetInfluences中。注：morphTargetInfluences是 Three.js 中的一个属性，主要用于控制网格（Mesh）的变形目标（morph targets）的权重。Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它允许开发者在网页上创建和显示 3D 图形。

那么可以通过threejs改变morphTargetInfluences的嘴巴参数，来控制嘴巴活动，我们还可以添加按钮控制嘴巴开始说话和停止说话，这里引入了element-ui，添加两个按钮来实现。

    <el-button style="position:absolute;right:20px;top:120px;" @click="getHand(1)">说话</el-button>
    <el-button style="position:absolute;right:20px;top:160px;" @click="getBackHand(1)">停止说话</el-button>

 talkAction()  {
      if (this.actions[1]) { //如果说话被开启
        if (this.actionDistance[1] > 15) { //这个15用来控制说话的快慢
          this.actionDistance[1] = 0
          this.face[24] = Math.random() * 0.6
          this.face[25] = Math.random() * 0.6
          this.face[26] = Math.random() * 0.6
        }
        this.actionDistance[1] += 1; //每次叠加，到一定基数就随机改变一次嘴巴形状
      }
      if(this.rebackActions[1]){ // 如果回复就把嘴巴重置为0
        this.face[24] = 0
        this.face[25] = 0
        this.face[26] = 0
      }
    },

最终效果如下：

threejs控制嘴巴和头发动

        以上就先演示两个部分的运动，有兴趣可以写方法分别控制140个骨骼模型做各种运动，如果再配合大模型获取说话嘴巴的大小和形状就可以做成数字人说话了，不过还需要对接前面章节的CosyVoice和SenseVoice才可以实现语音对话。

需要源码的同学可以评论区留下邮箱。我会持续更新此模型的功能