ThreeJs模拟工厂生产过程五

        上节中，我们给车间添加了警戒线，越来越接近雏形了，不过目前车间都还是物品，没有人，这不正常，这节就给车间添加一个人，还得是来回走动的人，如果需要人来回走动的话就需要去找一个带有走路动画的模型，让把人添加到适当的位置，然后循环播放走路动画的同时，不断的修改人的位置，首先找到人的模型，加载进来。

initPerson(x,y,z){
      //在场景中加载一个人站在产线的尽头，并对于产线稍微往内偏移一点，
      const loader = new GLTFLoader()
      loader.load("/static/models/person/scene.gltf", (gltf) => {
        this.person = gltf.scene;
        this.person.position.set(x,y+30,z)   // 模型位置
        this.scene.add(this.person)   // 加入场景
      })
    },

得到这样的场景

加载进来的人太大了，而且是躺着的，这里就需要调整下大小，且做一些旋转来让人面对前方，

initPerson(x,y,z){
      //在场景中加载一个人站在产线的尽头，并对于产线稍微往内偏移一点，
      const loader = new GLTFLoader()
      loader.load("/static/models/person/scene.gltf", (gltf) => {
        this.person = gltf.scene;
        this.person.position.set(x,y+30,z)   // 模型位置
        this.person.rotation.x = Math.PI/2  // 模型位置
        this.person.rotation.y = Math.PI/2  // 模型位置
        this.person.scale.set(0.1,0.1,0.1)
        this.scene.add(this.person)   // 加入场景
      })
    },

修改后效果：

现在就好很多了，像个正常的人了，然后给他播放动画看效果：

 initPerson(x,y,z){
      //在场景中加载一个人站在产线的尽头，并对于产线稍微往内偏移一点，
      const loader = new GLTFLoader()
      loader.load("/static/models/person/scene.gltf", (gltf) => {
        this.person = gltf.scene;
        this.person.position.set(x,y+30,z)   // 模型位置
        this.person.rotation.x = Math.PI/2  // 模型位置
        this.person.rotation.y = Math.PI/2  // 模型位置
        this.person.scale.set(0.1,0.1,0.1)
        this.scene.add(this.person)   // 加入场景

        this.mixer = new THREE.AnimationMixer(this.person);
        const action = this.mixer.clipAction(gltf.animations[0])//把该物体需要的动画拿出来
        action.setLoop(THREE.LoopRepeat);//设置只播放一次,THREE.LoopRepeat设置播放多次
        action.play();
      })
    },

效果如下

车间人物动画

但是暂时只是单纯的太空漫步，下面需要让他一边走路一边移动起来，所以要不断的改变人的位置，这个部分和传送带的产品移动原理类似，只不过这里要实现来回踱步的效果，所以走到一头后要掉头回来，那么效果应该是，从产线开始往另一头走，走到头，转头再走回来，循环往复。首先分析移动就是改变模型y的位置，在initAanimal的动画中不断改变y位置，从开始位置出发，不断增加y的位置，当到达一定距离后对模型进行旋转180度，再对y轴进行不断缩小，达到一定距离后再转头，再增大y的值，代码如下：

 mixer: null,
      person:null,
      personAddress:31,
      personRange:{
        direction:true,
        begin:30,
        end:220
      }

//移动人员位置
      if(this.person){
        if(this.personAddress > this.personRange.end){
          this.person.rotation.y = -Math.PI/2  // 模型朝向
          this.personRange.direction = false //修改y轴增大还是缩小
        }else if (this.personAddress < this.personRange.begin){
          this.person.rotation.y = Math.PI/2  // 模型朝向
          this.personRange.direction = true //修改y轴增大还是缩小
        }
        if(this.personRange.direction){//根据不同朝向设置增大还是缩小y的值
          this.personAddress += 0.2 
        }else{
          this.personAddress -= 0.2
        }
        this.person.position.x = this.personAddress;
      }

效果如下：

车间来回踱步动画

不过主要的设备没用模型代替，显得还是很demo，不过我只是个普通程序员不会3D建模，哪位建模大佬能私聊发个合适的设备模型给我，我就感激不尽了