HTML5 WebGL怎么实现的医疗物流系统

　　介绍

小编给大家分享一下HTML5 WebGL怎么实现的医疗物流系统,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

<强>前言

物联网(物联网),简单的理解就是物体之间通过互联网进行链接。世界上的万事万物,都可以通过数据的改变进行智能化管理.IoT的兴起在医疗行业中具有拯救生命的潜在作用。
不断的收集用户信息并且实时的进行诊断,所以未来,物联网肯定在医疗行业的应用会呈覆盖性。下面是我最近做的一个医疗物流系统,用来观察医疗物流过程。

HTML5 WebGL怎么实现的医疗物流系统

ht官网链接:http://www.hightopo.com/cn-index.html

演示链接:https://www.hightopo.com/demo/pivas/
,

<强>实现过程

增加光源

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

,我们看下对比。

HTML5 WebGL怎么实现的医疗物流系统

光的一些属性:

类型代表灯光的类型

颜色代表灯光的颜色

强度代表灯光的强度(1是最大值)

范围代表范围

addLight (), { 　　,,,,,,,const  skyBox =, this.dm.getDataByTag(& # 39;天空体# 39;) 　　 　　,,,,,,,//,限制视野在天空球之内 　　,,,,,,,this.gv.setSkyBox(天空体) 　　,,,,,,,const  light =, new  ht.Light () 　　,,,,,,,const  lightSource =, this.dm.getDataByTag(& # 39;阳光# 39;).p3 () 　　 　　,,,,,,,const  config =, { 　　,,,,,,,,,,,& # 39;light.type& # 39;:, & # 39;点# 39; 　　,,,,,,,,,,,& # 39;light.color& # 39;:, & # 39;白色# 39; 　　,,,,,,,,,,,& # 39;light.intensity& # 39;:, 0.3, 　　,,,,,,,,,,,& # 39;light.range& # 39;: 10000 　　,,,,,,,} 　　 　　,,,,,,,处(配置) 　　,,,,,,,light.p3(光源)this.dm.add(光) 　　以前,}

<强>看向物体

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

HTML5 WebGL怎么实现的医疗物流系统

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

var  renderCanvas =, function (医疗,持续时间),{ 　　,,,ht.Default.startAnim ({ 　　,,,,,,, 　　,,,,,,宽松(v, t), { 　　,,,,,,,,return  t 　　,,,,,,}, 　　,,,,,,行动(v, t), { 　　,,,,,,,,outScreenG3d.flyTo(医疗、,{,方向:[5,,3,,5],,距离:,300,}) 　　,,,,,,} 　　,,,}) 　　以前,}

<强>封装动画

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

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

这里要说明的参数:

1.节点(对应的元素)

2. fn(动画执行完进行回调的函数)

3.配置(动画配置)

4。coord(方向轴)

//,行走动画 　　walkAnim (fn,节点,还以为,配置,coord), { 　　const {持续时间的不同之处是,space },=,配置 　　const  positionArray =, node.p3 () 　　let  isShadow =false 　　,,let  ShadowNode =零 　　,,,//,如果移动的元素是icu车或者供应车的话,获取它的阴影跟随元素移动 　　,,if  (node.getTag(),===, & # 39;供应# 39;,| |,node.getTag (),===, & # 39; icuCar& # 39;), { 　　,,isShadow =,真的 　　,,时间=ShadowNode  this.dm.getDataByTag (“$ {node.getTag()}的影子”) 　　,,} 　　 　　,,ht.Default.startAnim ({ 　　,,持续时间、 　　,,宽松:function  (t), { 　　,,,,,return  t 　　,,,,,}, 　　,,,,,行动(v, t), { 　　,,,,,if  (coord ===, & # 39; x # 39;), { 　　,,,,,,,,,node.p3 (positionArray [0], +, t  *,空间,,positionArray [1],, positionArray [2]) 　　,,,,,,,,,isShadow ,,, ShadowNode.p3 (positionArray [0], +, t  *,空间,,positionArray [1],, positionArray [2]) 　　,,,,,},else  if  (coord ===, & # 39; y # 39;), { 　　,,,,,,,,,node.p3 (positionArray [0], positionArray [1], +, t  *,空间,,positionArray [2]) 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

HTML5 WebGL怎么实现的医疗物流系统