物聯網( iot )，簡單的理解就是物體之間通過網際網路進行鏈結。世界上的萬事萬物，都可以通過資料的改變進行智慧型化管理。iot 的興起在醫療行業中具有拯救生命的潛在作用。
不斷的收集使用者資訊並且實時的進行診斷，所以未來 iot 肯定在醫療行業的應用會呈覆蓋性。下面是我最近做的乙個醫療物流系統，用來觀察醫療物流過程。
整個原場景其實是非常暗的，所以需要使用燈光的效果照亮整個場景，使其接近真實世界的場景。
我們看下對比。
light的一些屬性：
type代表燈光的型別
color代表燈光的顏色
intensity代表燈光的強度（1是最大值）
range代表範圍
addlight()看到左下角的乙個小視窗，其實是另乙個3d場景，把它定位到左下角的，兩個場景都使用了反序列化（deserialize）。light.s(config)
light.p3(lightsource)
this
.dm.add(light)
}
因為要定位醫療箱移動，所以這裡使用到了flyto方法 。
var rendercanvas = function如果要實現這麼多的動畫，首先想到的是乙個個物體進行移動的過程。醫療箱的行走、電梯的公升降、傳送帶運送醫療箱等我們都可以對它們的動作進行封裝。(medical, duration) ,
action(v, t) )}})
}
如圖可以看到醫療箱總是在動，所以定義了乙個行走的動畫，每次醫療箱行走的距離、行走方向、動畫的配置都進行傳參。
這裡要說明的引數：
1.node（對應的元素）
2.fn（動畫執行完進行**的函式）
3.config（動畫配置）
4.coord（方向軸）
//電梯的公升降會影響很多東西，比如頻台的移動會帶著傳送帶和醫療箱，這裡我用到了sethost吸附方法（吸附：節點指定宿主，宿主進行改變會影響節點）。行走動畫
walkanim(node, fn, config, coord) =config
const positionarray =node.p3()
let isshadow = false
let shadownode = null
//如果移動的元素是icu車或者**車的話 獲取它的陰影跟隨元素移動
if (node.gettag() === 'supply' || node.gettag() === 'icucar') shadow`)
}ht.default.startanim(,
action(v, t)
else
if (coord === 'y')
else
},finishfunc() })}
很多場景下非常合適，我需要電梯公升降的過程中帶用醫療箱和頻台一起上公升，還有醫療箱放到傳送帶的時候，醫療箱要動起來，感覺是這真的傳送帶在帶動醫療箱進行運動。
這裡要說明的引數：
1.node（操作的電梯元素）
2.medicalkit（醫療箱）
3.fn（動畫執行完進行**的函式）
4.status（電梯上公升和下降的狀態）
5.config（動畫配置）
//動畫的過程中有個問題需要處理就是等待電梯的動畫，醫療箱在動畫過程中，需要判斷電梯是否在上公升，如果不在地面的話，需要等待。電梯公升降動畫
elevatoranim(node, medicalkit, fn, status, config) `)
//吸附宿主
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)
else
//下降狀態時 醫療箱不會做動作
if (status === 0)
return
ht.default.startanim(,
finishfunc() })}
我的思路是，當醫療箱走到離電梯一點距離的時候，需要判斷電梯是否在上公升狀態，如果是的話，需要呼叫動畫暫停的方法。
當elevatorrunning為false 的時候代表電梯沒有運動，否則在運動中。
電梯動畫開始的時候設定為 true，結束後設定變數為 false， 就可以監控它的狀態了。
ht.default.startanim方法返回乙個例項，利用action方法， 實現輪詢監聽動畫狀態，然後進行操作。
當elevatorrunning為 true 的話， 使用anim.
pause()暫停當前動畫。
當elevatorrunning為 false 的話， 使用anim.resume()繼續當前動畫。
const anim =ht.default.startanim(因為需要監聽某個當前動畫的結束，然後進行相機位移。}, 100);}}
},finishfunc()
});
如圖，我需要監聽第乙個 3d 場景中顯示提示文字動畫結束，然後執行第二個 3d 場景的顯示。因為2個是不同的場景，是不能用**的方法監聽到的，所以這裡就用到了eventbus事件匯流排。
下面是eventbus的使用，第乙個引數代表要監聽的註冊函式名，第二個是**函式。
//下面是eventbus發射的使用，第乙個引數代表要觸發的函式名，第二個是發射給函式的引數。事件匯流排 監聽事件
eventbus.on('animation1', _ =>)
//做完這個 demo 之後，除了對 ht for web 更加熟練之外，對物聯網也有了更深刻的概念。觸發事件
eventbus.emit("animation1", null
);
我身為一名前端工作者，在這個時代感覺非常的自豪，因為我能通過自己的技能創造出許多能造福和改善人們生活的東西。
希望大家看到我的 demo 能夠得到一些啟發，同時也要相信自己能夠創造不可能，為社會做出貢獻。
基於 HTML5 WebGL 的 3D 機房
用 webgl 渲染的 3d 機房現在也不是什麼新鮮事兒了，這篇文章的主要目的是說明一下，3d 機房中的 eye 和 center 的問題，剛好在專案中用上了，好生思考了一番，最終覺得這個例子最符合我的要求，就拿來作為記錄。這個 3d 機房的 demo 做的還不錯，比較美觀，基礎的互動也都滿足，接下...
基於 HTML5 WebGL 的 3D 機房
用 webgl 渲染的 3d 機房現在也不是什麼新鮮事兒了，這篇文章的主要目的是說明一下，3d 機房中的 eye 和 center 的問題，剛好在專案中用上了，好生思考了一番，最終覺得這個例子最符合我的要求，就拿來作為記錄。這個 3d 機房的 demo 做的還不錯，比較美觀，基礎的互動也都滿足，接下...
使用 HTML5 WebGL 實現逼真的雲朵效果
這裡給大家展示乙個使用 html5 webgl 實現超逼真的雲朵效果。webgl是一項在網頁瀏覽器呈現3d畫面的技術，有別於過去需要安裝瀏覽器外掛程式，通過 webgl 的技術，只需要編寫網頁 即可實現3d影象的展示。webgl 可以為 html5 canvas 提供硬體3d加速渲染，這樣web開發...