序言
物连接网络( IoT )，简易的了解便是物件之间根据互联网技术开展连接。全球上的万事万物，都可以以根据数据信息的更改开展智能化化管理方法。IoT 的盛行在诊疗制造行业中具备解救性命的潜伏功效。
持续的搜集客户信息内容而且即时的开展确诊，因此将来 IoT 毫无疑问在诊疗制造行业的运用会呈遮盖性。下面是我近期做的1个诊疗物流系统软件，用来观查诊疗物流全过程。
ht官方网站连接：http://www.hightopo.com/cn-index.html
demo连接： https://www.hightopo.com/demo/pivas/
完成全过程
提升灯源
全部原情景实际上是是非非常暗的，因此必须应用灯光效果的实际效果照亮全部情景，使其贴近真正全球的情景。
大家看下比照。
light 的1些特性：
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)
}
看向物件
看到左下角的1个小对话框，实际上是另外一个3d情景，把它精准定位到左下角的，两个情景都应用了反编码序列化（ deserialize ）。
由于要精准定位诊疗箱挪动，因此这里应用到了 flyTo 方式 。
var renderCanvas = function (medical, duration) {
ht.Default.startAnim({
duration,
easing(v, t) {
return t
},
action(v, t) {
outScreenG3d.flyTo(medical, { direction: [⑸, 3, 5], distance: 300 })
}
})
}
封裝动漫
假如要完成这么多的动漫，最先想起的是1个个物件开展挪动的全过程。诊疗箱的行走、电梯的升降机、传输带运输诊疗箱等大家都可以以对它们的姿势开展封裝。
如图能够看到诊疗箱一直在动，因此界定了1个行走的动漫，每次诊疗箱行走的间距、行走方位、动漫的配备都开展传参。
这里要表明的主要参数：
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起升高，也有诊疗箱放到传输带的情况下，诊疗箱要动起来，觉得是这真的传输带在带动诊疗箱开展健身运动。
这里要表明的主要参数：
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⑼]/ig, '') - 0
// 获得诊疗箱的index 操纵电梯升降机的间距
const medicalKitIndex = medicalKit.getTag().replace(/[^0⑼]/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
// 第1层的部位 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)
}
})
}
动漫方式
动漫的全过程中有个难题必须解决便是等候电梯的动漫，诊疗箱在动漫全过程中，必须分辨电梯是不是在升高，假如不在路面的话，必须等候。
我的思路是，当诊疗箱走到离电梯1点间距的情况下，必须分辨电梯是不是在升高情况，假如是的话，必须启用动漫中止的方式。
当 elevatorRunning 为 false 的情况下意味着电梯沒有健身运动，不然在健身运动中。
电梯动漫刚开始的情况下设定为 true，完毕后设定自变量为 false， 便可以监管它的情况了。
ht.Default.startAnim 方式回到1个案例，运用 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();
}
});
恶性事件监视（公布、定阅）
由于必须监视某个当今动漫的完毕，随后开展照相机位移。
如图，我必须监视第1个 3d 情景中显示信息提醒文本动漫完毕，随后实行第2个 3d 情景的显示信息。由于2个是不一样的情景，是不可以用回调函数的方式监视到的，因此这里就用到了 eventBus 恶性事件系统总线。
下面是 eventBus 的应用，第1个主要参数意味着要监视的申请注册涵数名，第2个是回调函数涵数。
// 恶性事件系统总线 监视恶性事件
eventbus.on('animation1', _ => {
const medical = dm.getDataByTag('medicalKit1')
renderView(medical, dm, gv)
})
下面是 eventBus 发射的应用，第1个主要参数意味着要开启的涵数名，第2个是发射给涵数的主要参数。
// 开启恶性事件
eventbus.emit("animation1", null);
总结
做完这个 demo 以后，除对 HT for Web 更为娴熟以外，对物连接网络也是有了更刻骨铭心的定义。
我身为1名前端开发工作中者，在这个时期觉得十分的引以为豪，由于我能根据自身的专业技能造就出很多能造福和改进人们日常生活的物品。
期待大伙儿看到我的 demo 可以获得1些启迪，另外也要坚信自身可以造就不能能，为社会发展做出奉献。