?2016-2026 Matools All rights reserved,
粵ICP備17059708號
前言
物聯(lián)網(wǎng)( IoT )，簡單的理解就是物體之間通過互聯(lián)網(wǎng)進行鏈接。世界上的萬事萬物，都可以通過數(shù)據(jù)的改變進行智能化管理。ioT
的興起在醫(yī)療行業(yè)中具有拯救生命的潛在作用。
不斷的收集用戶信息并且實時的進行診斷，所以未來 iot 肯定在醫(yī)療行業(yè)的應(yīng)用會呈覆蓋性。下面是我最近做的一個醫(yī)療物流系統(tǒng)，用來觀察醫(yī)療物流過程。
ht官網(wǎng)鏈接：http://www.hightopo.com/cn-index.html
<http://www.hightopo.com/cn-index.html>
demo鏈接：?https://www.hightopo.com/demo/pivas/
<https://www.hightopo.com/demo/pivas/>
<https://www.hightopo.com/demo/flight-monitor/>
?
實現(xiàn)過程
增加光源
?整個原場景其實是非常暗的，所以需要使用燈光的效果照亮整個場景，使其接近真實世界的場景。
?我們看下對比。
light?的一些屬性：
type?代表燈光的類型
color?代表燈光的顏色
intensity?代表燈光的強度（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) }
?
看向物體
?看到左下角的一個小窗口，其實是另一個3d場景，把它定位到左下角的，兩個場景都使用了反序列化（?deserialize?）。
?因為要定位醫(yī)療箱移動，所以這里使用到了?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 }) } }) }
?
封裝動畫
如果要實現(xiàn)這么多的動畫，首先想到的是一個個物體進行移動的過程。醫(yī)療箱的行走、電梯的升降、傳送帶運送醫(yī)療箱等我們都可以對他們的動作進行封裝。
如圖可以看到醫(yī)療箱總是在動，所以定義了一個行走的動畫，每次醫(yī)療箱行走的距離、行走方向、動畫的配置都進行傳參。
這里要說明的參數(shù)：
1.node（對應(yīng)的元素）
2.fn（動畫執(zhí)行完進行回調(diào)的函數(shù)）
3.config（動畫配置）
4.coord（方向軸）
// 行走動畫 walkAnim(node, fn, config, coord) { const { duration, space } =
config const positionArray= node.p3() let isShadow = false let ShadowNode = null
// 如果移動的元素是icu車或者供應(yī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) } }) }
?
物體之間的影響
電梯的升降會影響很多東西，比如頻臺的移動會帶著傳送帶和醫(yī)療箱，這里我用到了?sethost?吸附方法（吸附：節(jié)點指定宿主，宿主進行改變會影響節(jié)點）。
很多場景下非常合適，我需要電梯升降的過程中帶用醫(yī)療箱和頻臺一起上升，還有醫(yī)療箱放到傳送帶的時候，醫(yī)療箱要動起來，感覺是這真的傳送帶在帶動醫(yī)療箱進行運動。
?
這里要說明的參數(shù)：
1.node（操作的電梯元素）
2.medicalKit（醫(yī)療箱）
3.fn（動畫執(zhí)行完進行回調(diào)的函數(shù)）
4.status （電梯上升和下降的狀態(tài)）
5.config（動畫配置）
// 電梯升降動畫 elevatorAnim(node, medicalKit, fn, status, config) { const self =
this // 獲取電梯的index 讓對應(yī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 的時候是下降 最低部位的距離是固定的 所以只需要控制上升的距離 const medicalKitLevel =
self.returnMedicalKitLevel(medicalKitIndex)// 電梯的屬性 // 最低點的位置 Lowest //
如果有軌道的話 就去軌道的位置 否則就按照層數(shù) orbitalP // 第一層的位置 distance let space const addSpace =
medicalKitIndex === 7 ? 100 : 0if (status == 1) { space = config.orbitalP ?
config.orbitalP : config.distance + addSpace + (400 * medicalKitLevel) } else {
space= config.Lowest } // 下降狀態(tài)時 醫(yī)療箱不會做動作 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) } }) }
?
動畫暫停
?動畫的過程中有個問題需要處理就是等待電梯的動畫，醫(yī)療箱在動畫過程中，需要判斷電梯是否在上升，如果不在地面的話，需要等待。
?我的思路是，當醫(yī)療箱走到離電梯一點距離的時候，需要判斷電梯是否在上升狀態(tài)，如果是的話，需要調(diào)用動畫暫停的方法。
?當 elevatorRunning 為 false 的時候代表電梯沒有運動，否則在運動中。
?電梯動畫開始的時候設(shè)置為 true，結(jié)束后設(shè)置變量為 false，??就可以監(jiān)控它的狀態(tài)了。
?ht.Default.startAnim 方法會返回一個實例，通過實例的方法可以對當前動畫進行一些操作。
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(); } }); return anim;
?
事件監(jiān)聽（發(fā)布、訂閱）
?因為需要監(jiān)聽某個當前動畫的結(jié)束，然后進行相機位移。
?如圖，我需要監(jiān)聽第一個 3d 場景中顯示提示文字動畫結(jié)束，然后執(zhí)行第二個 3d
場景的顯示。因為2個是不同的場景，是不能用回調(diào)的方法監(jiān)聽到的，所以這里就用到了 eventBus 事件總線。
?下面是 eventBus 的使用，第一個參數(shù)代表要監(jiān)聽的注冊函數(shù)名，第二個是回調(diào)函數(shù)。
// 事件總線 監(jiān)聽事件 eventbus.on('animation1', _ => { const medical =
dm.getDataByTag('medicalKit1') renderView(medical, dm, gv) })
下面是?eventBus?發(fā)射的使用，第一個參數(shù)代表要觸發(fā)的函數(shù)名，第二個是發(fā)射給函數(shù)的參數(shù)。
// 觸發(fā)事件 eventbus.emit("animation1", null);
?
總結(jié)
?做完這個 demo 之后，除了對?HT for Web?更加熟練之外，對物聯(lián)網(wǎng)也有了更深刻的概念。
?我身為一名前端工作者，在這個時代感覺非常的自豪，因為我能通過自己的技能創(chuàng)造出許多能造福和改善人們生活的東西。
?希望大家看到我的 demo 能夠得到一些啟發(fā)，同時也要相信自己能夠創(chuàng)造不可能，為社會做出貢獻。
熱門工具 換一換