基于 HTML5 WebGL 实现的医疗物流系统

// 第一层的位置 distance
let space
const addSpace = medicalKitIndex === 7 ? 100 : 0
if (status == 1) {
space = config.orbitalP ? config.orbitalP : config.distance + addSpace + (400 * medicalKitLevel)
} else {
space = config.Lowest
}
// 下降状态时 医疗箱不会做动作
if (status === 0) {
medicalKit.setHost()
}
return ht.Default.startAnim({
duration: config.orbitalP ? 2000 : (medicalKitLevel === 0 && elevatorIndex == 3 ? 700 : 2500 + (medicalKitLevel * 1000)),
action(v, t) {
node.p3(
positionArray[0],
positionArray[1] + ((space - positionArray[1]) * t),
positionArray[2])
},
finishFunc() {
station.setHost()
typeof fn === 'function' && fn(node)
}
})
}

 

动画方法

 动画的过程中有个问题需要处理就是等待电梯的动画，医疗箱在动画过程中，需要判断电梯是否在上升，如果不在地面的话，需要等待。

 我的思路是，当医疗箱走到离电梯一点距离的时候，需要判断电梯是否在上升状态，如果是的话，需要调用动画暂停的方法。

 当 elevatorRunning 为 false 的时候代表电梯没有运动，否则在运动中。

 电梯动画开始的时候设置为 true，结束后设置变量为 false，  就可以监控它的状态了。

 ht.Default.startAnim 方法返回一个实例，利用 action 方法， 实现轮询监听动画状态，然后进行操作。

 当 elevatorRunning 为 true 的话， 使用 anim.pause() 暂停当前动画。

 当 elevatorRunning 为 false 的话， 使用 anim.resume() 继续当前动画。

const anim = ht.Default.startAnim({
　　duration,
　　action(v, t) {
　　　　node.p3(
　　　　positionArray[0],
　　　　positionArray[1],
　　　　positionArray[2] - (tpMax - positionArray[2]) * t
　　);
　　if (index > 1 && self.elevatorRunning === true) {
　　if (node.p3()[2] <= stopMax) {
　　　　anim.pause();
　　　　const t = setInterval(() => {
　　　　　　if (self.elevatorRunning === false) {
　　　　　　anim.resume();
　　　　　　clearInterval(t);
　　　　}
　　　　}, 100);
　　　　}
　　　}
},
finishFunc() {
　　typeof fn === "function" && fn();
}
});

 

事件监听（发布、订阅）

 因为需要监听某个当前动画的结束，然后进行相机位移。

 如图，我需要监听第一个 3d 场景中显示提示文字动画结束，然后执行第二个 3d 场景的显示。因为2个是不同的场景，是不能用回调的方法监听到的，所以这里就用到了 eventBus 事件总线。