欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于 HTML5 WebGL 實(shí)現(xiàn)的醫(yī)療物流系統(tǒng)

  發(fā)布時(shí)間:2019-10-08 15:38:22   作者:佚名   我要評(píng)論
物聯(lián)網(wǎng)( IoT ),簡(jiǎn)單的理解就是物體之間通過(guò)互聯(lián)網(wǎng)進(jìn)行鏈接。這篇文章給大家介紹基于 HTML5 WebGL 實(shí)現(xiàn)的醫(yī)療物流系統(tǒng),感興趣的朋友跟隨小編一起看看吧

前言

物聯(lián)網(wǎng)( IoT ),簡(jiǎn)單的理解就是物體之間通過(guò)互聯(lián)網(wǎng)進(jìn)行鏈接。世界上的萬(wàn)事萬(wàn)物,都可以通過(guò)數(shù)據(jù)的改變進(jìn)行智能化管理。IoT 的興起在醫(yī)療行業(yè)中具有拯救生命的潛在作用。
不斷的收集用戶信息并且實(shí)時(shí)的進(jìn)行診斷,所以未來(lái)  IoT 肯定在醫(yī)療行業(yè)的應(yīng)用會(huì)呈覆蓋性。下面是我最近做的一個(gè)醫(yī)療物流系統(tǒng),用來(lái)觀察醫(yī)療物流過(guò)程。

ht官網(wǎng)鏈接:http://www.hightopo.com/cn-index.html

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

實(shí)現(xiàn)過(guò)程

增加光源

 整個(gè)原場(chǎng)景其實(shí)是非常暗的,所以需要使用燈光的效果照亮整個(gè)場(chǎng)景,使其接近真實(shí)世界的場(chǎng)景。

 我們看下對(duì)比。

light 的一些屬性:

type 代表燈光的類(lèi)型

color 代表燈光的顏色

intensity 代表燈光的強(qiáng)度(1是最大值)

range 代表范圍

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

        // 限制視野在天空球之內(nèi)
        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)
 }

 

看向物體

 看到左下角的一個(gè)小窗口,其實(shí)是另一個(gè)3d場(chǎng)景,把它定位到左下角的,兩個(gè)場(chǎng)景都使用了反序列化( deserialize )。

 因?yàn)橐ㄎ会t(yī)療箱移動(dòng),所以這里使用到了 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 })
       }
    })
 }

 

封裝動(dòng)畫(huà)

如果要實(shí)現(xiàn)這么多的動(dòng)畫(huà),首先想到的是一個(gè)個(gè)物體進(jìn)行移動(dòng)的過(guò)程。醫(yī)療箱的行走、電梯的升降、傳送帶運(yùn)送醫(yī)療箱等我們都可以對(duì)它們的動(dòng)作進(jìn)行封裝。

如圖可以看到醫(yī)療箱總是在動(dòng),所以定義了一個(gè)行走的動(dòng)畫(huà),每次醫(yī)療箱行走的距離、行走方向、動(dòng)畫(huà)的配置都進(jìn)行傳參。

這里要說(shuō)明的參數(shù):

1.node(對(duì)應(yīng)的元素)

2.fn(動(dòng)畫(huà)執(zhí)行完進(jìn)行回調(diào)的函數(shù))

3.config(動(dòng)畫(huà)配置)

4.coord(方向軸)

// 行走動(dòng)畫(huà)
walkAnim(node, fn, config, coord) {
  const { duration, space } = config
  const positionArray = node.p3()
  let isShadow = false
   let ShadowNode = null
    // 如果移動(dòng)的元素是icu車(chē)或者供應(yīng)車(chē)的話 獲取它的陰影跟隨元素移動(dòng)
   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)
      }
   })
}

物體之間的影響

電梯的升降會(huì)影響很多東西,比如頻臺(tái)的移動(dòng)會(huì)帶著傳送帶和醫(yī)療箱,這里我用到了 sethost 吸附方法(吸附:節(jié)點(diǎn)指定宿主,宿主進(jìn)行改變會(huì)影響節(jié)點(diǎn))。

很多場(chǎng)景下非常合適,我需要電梯升降的過(guò)程中帶用醫(yī)療箱和頻臺(tái)一起上升,還有醫(yī)療箱放到傳送帶的時(shí)候,醫(yī)療箱要?jiǎng)悠饋?lái),感覺(jué)是這真的傳送帶在帶動(dòng)醫(yī)療箱進(jìn)行運(yùn)動(dòng)。

這里要說(shuō)明的參數(shù):

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

2.medicalKit(醫(yī)療箱)

3.fn(動(dòng)畫(huà)執(zhí)行完進(jìn)行回調(diào)的函數(shù))

4.status (電梯上升和下降的狀態(tài))

5.config(動(dòng)畫(huà)配置)

 

// 電梯升降動(dòng)畫(huà)
    elevatorAnim(node, medicalKit, fn, status, config) {
        const self = this
        // 獲取電梯的index 讓對(duì)應(yīng)的頻臺(tái)也跟著動(dòng)
        const elevatorIndex = node.getTag().replace(/[^0-9]/ig, '') - 0
        // 獲取醫(yī)療箱的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)
        // 設(shè)置升降狀態(tài)
        if (elevatorIndex === 3) self.elevatorRunning = true
        // 升降距離 status 為 0 的時(shí)候是下降 最低部位的距離是固定的 所以只需要控制上升的距離
        const medicalKitLevel = self.returnMedicalKitLevel(medicalKitIndex)
        // 電梯的屬性
        // 最低點(diǎn)的位置 Lowest
        // 如果有軌道的話 就去軌道的位置  否則就按照層數(shù) 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
        }
        // 下降狀態(tài)時(shí) 醫(yī)療箱不會(huì)做動(dòng)作
        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)
            }
        })
    }

 

動(dòng)畫(huà)方法

 動(dòng)畫(huà)的過(guò)程中有個(gè)問(wèn)題需要處理就是等待電梯的動(dòng)畫(huà),醫(yī)療箱在動(dòng)畫(huà)過(guò)程中,需要判斷電梯是否在上升,如果不在地面的話,需要等待。

 我的思路是,當(dāng)醫(yī)療箱走到離電梯一點(diǎn)距離的時(shí)候,需要判斷電梯是否在上升狀態(tài),如果是的話,需要調(diào)用動(dòng)畫(huà)暫停的方法。

 當(dāng) elevatorRunning 為 false 的時(shí)候代表電梯沒(méi)有運(yùn)動(dòng),否則在運(yùn)動(dòng)中。

 電梯動(dòng)畫(huà)開(kāi)始的時(shí)候設(shè)置為 true,結(jié)束后設(shè)置變量為 false,  就可以監(jiān)控它的狀態(tài)了。

 ht.Default.startAnim 方法返回一個(gè)實(shí)例,利用 action 方法, 實(shí)現(xiàn)輪詢監(jiān)聽(tīng)動(dòng)畫(huà)狀態(tài),然后進(jìn)行操作。

 當(dāng) elevatorRunning 為 true 的話, 使用 anim.pause() 暫停當(dāng)前動(dòng)畫(huà)。

 當(dāng) elevatorRunning 為 false 的話, 使用 anim.resume() 繼續(xù)當(dāng)前動(dòng)畫(huà)。

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();
   }
});

 

事件監(jiān)聽(tīng)(發(fā)布、訂閱)

 因?yàn)樾枰O(jiān)聽(tīng)某個(gè)當(dāng)前動(dòng)畫(huà)的結(jié)束,然后進(jìn)行相機(jī)位移。

 如圖,我需要監(jiān)聽(tīng)第一個(gè) 3d 場(chǎng)景中顯示提示文字動(dòng)畫(huà)結(jié)束,然后執(zhí)行第二個(gè) 3d 場(chǎng)景的顯示。因?yàn)?個(gè)是不同的場(chǎng)景,是不能用回調(diào)的方法監(jiān)聽(tīng)到的,所以這里就用到了 eventBus 事件總線。

 下面是 eventBus 的使用,第一個(gè)參數(shù)代表要監(jiān)聽(tīng)的注冊(cè)函數(shù)名,第二個(gè)是回調(diào)函數(shù)。

// 事件總線 監(jiān)聽(tīng)事件
eventbus.on('animation1', _ => {
  const medical = dm.getDataByTag('medicalKit1')
  renderView(medical, dm, gv)
})

 

下面是 eventBus 發(fā)射的使用,第一個(gè)參數(shù)代表要觸發(fā)的函數(shù)名,第二個(gè)是發(fā)射給函數(shù)的參數(shù)。

// 觸發(fā)事件
eventbus.emit("animation1", null); 

總結(jié)

 做完這個(gè) demo 之后,除了對(duì) HT for Web 更加熟練之外,對(duì)物聯(lián)網(wǎng)也有了更深刻的概念。

 我身為一名前端工作者,在這個(gè)時(shí)代感覺(jué)非常的自豪,因?yàn)槲夷芡ㄟ^(guò)自己的技能創(chuàng)造出許多能造福和改善人們生活的東西。

 希望大家看到我的 demo 能夠得到一些啟發(fā),同時(shí)也要相信自己能夠創(chuàng)造不可能,為社會(huì)做出貢獻(xiàn)。

相關(guān)文章

  • HTML5播放實(shí)現(xiàn)rtmp流直播

    這篇文章主要介紹了HTML5播放實(shí)現(xiàn)rtmp流直播,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-16
  • html5用video標(biāo)簽流式加載的實(shí)現(xiàn)

    這篇文章主要介紹了html5用video標(biāo)簽流式加載的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)
    2020-05-20
  • Html5 實(shí)現(xiàn)微信分享及自定義內(nèi)容的流程

    這篇文章主要介紹了Html5 實(shí)現(xiàn)微信分享及自定義內(nèi)容的流程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-08-20
  • HTML5 canvas 瀑布流文字效果的示例代碼

    這篇文章主要介紹了HTML5 canvas 瀑布流文字效果的示例代碼的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-31
  • HTML5移動(dòng)端手機(jī)網(wǎng)站開(kāi)發(fā)流程

    這篇文章主要為大家介紹了HTML5移動(dòng)端手機(jī)網(wǎng)站開(kāi)發(fā)流程,想要進(jìn)行移動(dòng)端手機(jī)網(wǎng)站開(kāi)發(fā)的朋友可以參考一下
    2016-04-25
  • HTML5實(shí)現(xiàn)的圖片無(wú)限加載的瀑布流效果另帶邊框圓角陰影

    一款網(wǎng)頁(yè)瀑布流效果,可以實(shí)現(xiàn)圖片的無(wú)限制加載?;跁r(shí)下流行的HTML5技術(shù)編寫(xiě)而成,除了實(shí)現(xiàn)瀑布流,還加入了CSS5的圖片修飾效果,比如圖片的圓角邊框、圖片陰影立體效果
    2014-03-07
  • HTML5夢(mèng)幻之旅——炫麗的流星雨效果實(shí)現(xiàn)過(guò)程

    流星出現(xiàn)的時(shí)候,人們都喜歡對(duì)著它們?cè)S愿,因?yàn)閭髡f(shuō)對(duì)著流星許下愿望后,愿望就能實(shí)現(xiàn),最近出于興趣,制作一個(gè)拖尾效果,后來(lái)想到可以通過(guò)拖尾效果來(lái)實(shí)現(xiàn)一下流星雨的效果
    2013-08-06
  • HTML5 離線應(yīng)用之打造零請(qǐng)求、無(wú)流量網(wǎng)站的解決方法

    今天Web應(yīng)用程序已經(jīng)很復(fù)雜了,以現(xiàn)在的發(fā)展,會(huì)將越來(lái)越復(fù)雜,但他有一個(gè)致命缺點(diǎn),不能脫離internet鏈接,因此在HTML中新增了一API,它使用一個(gè)本地存儲(chǔ)機(jī)制很好地解決了
    2013-04-25
  • Html5之webcoekt播放JPEG圖片流

    這篇文章主要介紹了Html5之webcoekt播放JPEG圖片流,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)
    2020-09-22

最新評(píng)論