上节中，我们给车间添加了警戒线，越来越接近雏形了，不过目前车间都还是物品，没有人，这不正常，这节就给车间添加一个人，还得是来回走动的人，如果需要人来回走动的话就需要去找一个带有走路动画的模型，让把人添加到适当的位置，然后循环播放走路动画的同时，不断的修改人的位置，首先找到人的模型，加载进来。
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建模，哪位建模大佬能私聊发个合适的设备模型给我，我就感激不尽了
