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


Posted in HTML / CSS onOctober 08, 2019

前言

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

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

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

demo链接: https://www.hightopo.com/demo/pivas/
 

实现过程

增加光源

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

 我们看下对比。

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

light 的一些属性:

type 代表灯光的类型

color 代表灯光的颜色

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

range 代表范围

addLight() {
        const skyBox = this.dm.getDataByTag('skyBox')

        // 限制视野在天空球之内
        this.gv.setSkyBox(skyBox)
        const light = new ht.Light()
        const lightSource = this.dm.getDataByTag('sunlight').p3()

        const config = {
            '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 )。

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

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

var renderCanvas = function (medical, duration) {
    ht.Default.startAnim({
       duration,
       easing(v, t) {
         return t
       },
       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

const positionArray = node.p3()

let isShadow = false
   let ShadowNode = 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) {
      
return t
      },
      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])
      
} else if (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() {
         typeof fn === 'function' && fn(node)
      }
   })
}

物体之间的影响

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

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

这里要说明的参数:

1.node(操作的电梯元素)

2.medicalKit(医疗箱)

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

4.status (电梯上升和下降的状态)

5.config(动画配置)

 

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

 

动画方法

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

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

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

 当 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 事件总线。

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

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

 

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

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

总结

 做完这个 demo 之后,除了对 HT for Web 更加熟练之外,对物联网也有了更深刻的概念。

 我身为一名前端工作者,在这个时代感觉非常的自豪,因为我能通过自己的技能创造出许多能造福和改善人们生活的东西。

 希望大家看到我的 demo 能够得到一些启发,同时也要相信自己能够创造不可能,为社会做出贡献。

HTML / CSS 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
分享几个实用的CSS代码块
Jun 10 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 #HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 #HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 #HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 #HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 #HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 #HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 #HTML / CSS
You might like
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python传递参数方式小结
2015/04/17 Python
Python解析nginx日志文件
2015/05/11 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
春游踏青活动方案
2014/08/14 职场文书
员工趣味活动方案
2014/08/27 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
文员岗位职责范本
2015/04/16 职场文书
周一问候语大全
2015/11/10 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书