小編給大家分享一下HTML5 WebGL怎么實(shí)現(xiàn)的醫(yī)療物流系統(tǒng),相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
站在用戶的角度思考問(wèn)題,與客戶深入溝通,找到鼓樓網(wǎng)站設(shè)計(jì)與鼓樓網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:做網(wǎng)站、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋鼓樓地區(qū)。
前言
物聯(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 代表燈光的類型
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車或者供應(yīng)車的話 獲取它的陰影跟隨元素移動(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);
以上是“HTML5 WebGL怎么實(shí)現(xiàn)的醫(yī)療物流系統(tǒng)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前題目:HTML5WebGL怎么實(shí)現(xiàn)的醫(yī)療物流系統(tǒng)
網(wǎng)站網(wǎng)址:http://muchs.cn/article48/jpijhp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化、商城網(wǎng)站、自適應(yīng)網(wǎng)站、外貿(mào)建站、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)