今天小编给大家分享一下医疗物流系统如何在HTML5 WebGL中实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

实现过程

增加光源

整个原场景其实是非常暗的，所以需要使用灯光的效果照亮整个场景，使其接近真实世界的场景。

light 的一些属性：

type 代表灯光的类型

color 代表灯光的颜色

intensity 代表灯光的强度（1是最大值）

range 代表范围

addLight(){constskyBox=this.dm.getDataByTag('skyBox')//限制视野在天空球之内this.gv.setSkyBox(skyBox)constlight=newht.Light()constlightSource=this.dm.getDataByTag('sunlight').p3()constconfig={'light.type':'point','light.color':'white','light.intensity':0.3,'light.range':10000}light.s(config)light.p3(lightSource)this.dm.add(light)}

看向物体

看到左下角的一个小窗口，其实是另一个3d场景，把它定位到左下角的，两个场景都使用了反序列化（ deserialize ）。

因为要定位医疗箱移动，所以这里使用到了 flyTo 方法 。

varrenderCanvas=function(medical,duration){ht.Default.startAnim({duration,easing(v,t){returnt},action(v,t){outScreenG3d.flyTo(medical,{direction:[-5,3,5],distance:300})}})}

封装动画

如果要实现这么多的动画，首先想到的是一个个物体进行移动的过程。医疗箱的行走、电梯的升降、传送带运送医疗箱等我们都可以对它们的动作进行封装。

如图可以看到医疗箱总是在动，所以定义了一个行走的动画，每次医疗箱行走的距离、行走方向、动画的配置都进行传参。

这里要说明的参数：

1.node（对应的元素）

2.fn（动画执行完进行回调的函数）

3.config（动画配置）

4.coord（方向轴）

//行走动画walkAnim(node,fn,config,coord){　　const{duration,space}=config　　constpositionArray=node.p3()　　letisShadow=false　letShadowNode=null//如果移动的元素是icu车或者供应车的话获取它的阴影跟随元素移动if(node.getTag()==='supply'||node.getTag()==='icuCar'){　　isShadow=true　　ShadowNode=this.dm.getDataByTag(`${node.getTag()}Shadow`)}ht.Default.startAnim({　　duration,　　easing:function(t){　　returnt},action(v,t){　　if(coord==='x'){　　node.p3(positionArray[0]+t*space,positionArray[1],positionArray[2])　　isShadow&&ShadowNode.p3(positionArray[0]+t*space,positionArray[1],positionArray[2])　　}elseif(coord==='y'){　　node.p3(positionArray[0],positionArray[1]+t*space,positionArray[2])　　isShadow&&ShadowNode.p3(positionArray[0],positionArray[1]+t*space,positionArray[2])}else{　　node.p3(positionArray[0],positionArray[1],positionArray[2]+t*space)　　isShadow&&ShadowNode.p3(positionArray[0],positionArray[1],positionArray[2]+t*space)}},finishFunc(){typeoffn==='function'&&fn(node)}})}

物体之间的影响

电梯的升降会影响很多东西，比如频台的移动会带着传送带和医疗箱，这里我用到了 sethost 吸附方法（吸附：节点指定宿主，宿主进行改变会影响节点）。

很多场景下非常合适，我需要电梯升降的过程中带用医疗箱和频台一起上升，还有医疗箱放到传送带的时候，医疗箱要动起来，感觉是这真的传送带在带动医疗箱进行运动。

这里要说明的参数：

1.node（操作的电梯元素）

2.medicalKit（医疗箱）

3.fn（动画执行完进行回调的函数）

4.status （电梯上升和下降的状态）

5.config（动画配置）

//电梯升降动画elevatorAnim(node,medicalKit,fn,status,config){constself=this//获取电梯的index让对应的频台也跟着动constelevatorIndex=node.getTag().replace(/[^0-9]/ig,'')-0//获取医疗箱的index控制电梯升降的距离constmedicalKitIndex=medicalKit.getTag().replace(/[^0-9]/ig,'')-0constpositionArray=node.p3()conststation=self.dm.getDataByTag(`station${elevatorIndex}`)//吸附宿主station.setHost(node)medicalKit.setHost(node)//设置升降状态if(elevatorIndex===3)self.elevatorRunning=true//升降距离status为0的时候是下降最低部位的距离是固定的所以只需要控制上升的距离constmedicalKitLevel=self.returnMedicalKitLevel(medicalKitIndex)//电梯的属性//最低点的位置Lowest//如果有轨道的话就去轨道的位置否则就按照层数orbitalP//第一层的位置distanceletspaceconstaddSpace=medicalKitIndex===7?100:0if(status==1){space=config.orbitalP?config.orbitalP:config.distance+addSpace+(400*medicalKitLevel)}else{space=config.Lowest}//下降状态时医疗箱不会做动作if(status===0){medicalKit.setHost()}returnht.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()typeoffn==='function'&&fn(node)}})}

动画方法

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

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

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

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

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

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

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

constanim=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();　　　　constt=setInterval(()=>{　　　　　　if(self.elevatorRunning===false){　　　　　　anim.resume();　　　　　　clearInterval(t);　　　　}　　　　},100);　　　　}　　　}},finishFunc(){　　typeoffn==="function"&&fn();}});

事件监听（发布、订阅）

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

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

下面是 eventBus 的使用，第一个参数代表要监听的注册函数名，第二个是回调函数。

//事件总线监听事件eventbus.on('animation1',_=>{constmedical=dm.getDataByTag('medicalKit1')renderView(medical,dm,gv)})

下面是 eventBus 发射的使用，第一个参数代表要触发的函数名，第二个是发射给函数的参数。

//触发事件eventbus.emit("animation1",null);

以上就是“医疗物流系统如何在HTML5 WebGL中实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。