前言
在前端中，视图层和数据层需要进行单向或者双向数据绑定，大家都已经不陌生了，有时候 2D 做的比较顺了之后，就会想要挑战一下 3D，不然总觉得痒痒的。这个 3D 机架的 Demo 我觉得非常有代表性，首先，3D 机架用途非常广，尤其是在电信行业，就算不是机架，在比如工业方面 3D 模型以及数据绑定的应用也是非常广泛的，毕竟现在工业物联网已经是大趋势了。
效果图
上面动图中，闪烁灯是在不断变化的，由于需要显示的效果美观一点，也实际一点，我截的图还是比较完整的，但是这个闪烁的部分有点看不清楚（cnblog 中放太明显的外链容易被移出首页啊！！！等会再发！）。
代码实现
虽然上面 gif 图中显示的一个是 2D 的一个是 3D 的，但是构建的步骤以及需要的内容是一样的，所以本文只针对 3D 的模型进行代码实现。
场景搭建
搭建一个 3D 场景是非常快速的，只需要三行代码：
dm = newht.DataModel(); //创建一个数据容器 数据容器也可以通过 g3d.getDataModel() 获取g3d = newht.graph3d.Graph3dView(dm); //创建一个 3D 场景，将数据容器作为参数传递进去，这样数据容器中的内容就可以显示在 3D 场景中了g3d.addToDOM(); //将 3D 场景添加到 body 体中3D 机架模型构建
虽然可以叫设计师直接给我一个 obj 格式的模型，但是我觉得这个比较简答，还是不要麻烦人家了。。。首先是创建一个六面体，模型上面的贴图是我以前用的一个 json 格式的文件，用来作为这个六面体的正面贴图，这些部分都是写在 json 文件里面的，我先截取一小部分的 json 内容，然后用 js 代码复现：
{ "c": "ht.Node", //一个 ht.Node 类型的元素"i": 1277, //id"p": { //通过 set/get 来设置/获取的元素的部分。如 setPosition/getPosition"tag": "service", //设置元素标签 用来作为唯一标识"image": "symbols/机柜.json", //设置节点图片"rotationX": 1.5708, //设置节点 X 轴旋转角度"position": { //设置节点位置"x": 0, "y": 225}, "anchor": { //设置节点锚点"x": 0.5, "y": 0.54}, "anchorElevation": 1, //设置节点 y 轴锚点"width": 507, //设置节点宽度"height": 980, //设置节点长度"tall": 450, //设置节点高度"elevation": 451//控制Node图元中心位置所在3D坐标系的y轴位置}, "s": { //设置图元的 style 样式，HT 预定义的一些样式属性，通过 node.s('all.color') 获取和设置节点的样式"all.color": "#DDDDDD", //设置节点六面颜色"top.image": "symbols/机柜.json", //设置节点顶部图片"front.visible": true, //设置节点正面是否可见"back.visible": true, "left.visible": true, "right.visible": true, "bottom.visible": true} }
这部分的 json 内容大体上就是创建了一个 ht.Node 节点，然后对这个节点设置了一些属性，包括节点坐标，节点的大小，以及一些 style 样式设置。
那么，如何用代码来创建这样一个节点呢？
varnode = newht.Node(); //创建一个 ht.Node 类型的节点node.setTag( 'service'); //设置节点的标签node.setImage( 'symbols/机柜.json'); //设置节点图片node.setRotationX( Math.PI/ 2); //设置节点x轴旋转node.setPosition( 0, 225); //设置节点位置node.setAnchor( 0.5, 0.54); //设置节点锚点node.setAnchorElevation( 1); //设置节点y轴方向的锚点node.setWidth( 507); //设置节点的宽度node.setHeight( 980); //设置节点的长度node.Tall( 450); //设置节点的高度node.setElevation( 451); //控制Node图元中心位置所在3D坐标系的y轴位置node.s({ //设置节点样式'all.color': '#ddd', //六面颜色'top.image': 'symbols/机柜.json'， //节点顶部图片'front.visible': true, //设置节点正面可见'back.visible': true, 'left.visible': true, 'right.visible': true, 'bottom.visible': true});
其实整个 json 就是由多个这种类型的图元组合而成的。我们来拆析一下，整个 3D 机架实际上是由十个图元组合而成的，第一个是整体的 3D 机柜（也就是我们上面 json 内容中创建的部分），剩下的九个都是需要动态变化闪烁灯的设备，也就是我红框框起来的部分：
http://www.hightopo.com/demo/serviceShow/
这些设备的创建方式跟上面的 3D 机架是类似的，只不过对应的节点尺寸小点，贴图不一样，坐标不一样罢了。但是下面的这九个节点的贴图似乎有点不一样？上面有闪烁的灯，并且不止一盏！怎么动态获取他们呢？
矢量–数据绑定
不得不说到矢量这个概念。矢量在 HT for Web 中是矢量图形的简称，常见的 png 和 jpg 这类的栅格位图， 通过存储每个像素的颜色信息来描述图形，这种方式的图片在拉伸放大或缩小时会出现图形模糊，线条变粗出现锯齿等问题。 而矢量图片通过点、线和多边形来描述图形，因此在无限放大和缩小图片的情况下依然能保持一致的精确度。
这些有点都是次要的，最重要的是这个矢量可以进行数据绑定（这个数据绑定是绑定到节点中的），而且绑定方式非常容易！
矢量采用 json 格式描述，使用方式和普通的栅格位图一致，通过 node.setImage(‘hightopo.json’) 或者 node.setIcon(‘hightopo.json’) 等设置到数据模型中。
矢量 json 描述必需包含 width、height 和 comps 参数信息：
width 矢量图形的宽度
height 矢量图形的高度
comps 矢量图形的组件 Array 数组，每个数组对象为一个独立的组件类型，数组的顺序为组件绘制先后顺序
由于这张图绘制的还是比较复杂的，所以我就将设置了数据绑定的矩形部分的矢量绘制代码粘贴出来：
{ "width": 48, //一个矢量图标必备的宽度 矢量详细内容请参考 HT for Web 矢量手册"height": 262, //一个矢量图标必备的高度"comps": [ //一个矢量图标必备的 Array 数组组件{ //数组组件中的第一个元素"type": "rect", //类型为矩形"background": { //设置矩形背景色"func": "attr@rectBg1", //HT 用一个带func属性的对象替换以前的参数值 这里就是进行数据绑定的地方"value": "rgb(255,0,0)"//如果 func 值为 undefined 或者 null 时，采用这个值}, "shadow": true, //设置“阴影”"shadowColor": { //“阴影”颜色"func": "attr@shadowColor1", // 这边将“阴影”也进行了数据绑定，为的是能够实现灯“发光”的效果"value": "rgba(255,0,0,0.35)"//设置备选值}, "shadowOffsetX": 0, //设置阴影横轴偏移量"shadowOffsetY": 0, //设置阴影纵轴偏移量"rect": [ //设置该组件的宽高以及坐标4.38544, //x 轴坐标23.52679, //y 轴坐标14.46481, //width 组件宽度6.1554//height 组件高度] } ] }
因为一个矢量图形中有 5 个“闪烁灯”，所以我添加了 5 个组件，也就是在 comps 参数里面添加了五个元素，绑定的数据不同，为了省事，我将绑定的数据名都设置为“rectBg”后面加一个数字，这些数字依次递增。
我们就是将这样一张矢量图设置为节点的 front.image 作为节点正面显示图的：node.s(‘front.image’, ‘symbols/内部设备2.json’)。
JSON 反序列化
会不会有人好奇 json 文件里面的内容是如何转换成 3D 模型的？
说实在的，步骤依然很简单：
ht. Default.xhrLoad( 'scene/service3d.json', function(text){//xhrLoad 函数是一个异步加载文件的函数dm.deserialize(text); //反序列化数据容器，解析用于生成对应的Data对象并添加到数据容器 这里相当于把 json 文件中生成的 ht.Node 节点反序列化到数据容器中，这样数据容器中就有这个节点了});
由于 xhrLoad 函数是一个异步加载函数，所以如果 dm 数据容器反序列化未完成就直接调用了其中的节点，那么会造成数据获取不到的结果，所以一般来说我是将一些逻辑代码写在这个函数内部，或者给逻辑代码设置 timeout 错开时间差。
首先，由于数据都是存储在 dm 数据容器中的（通过 dm.add(node) 添加的），所以我们要获取数据除了可以通过 id、tag 等独立的方式，还可以通过遍历数据容器来获取多个元素：
varinfos = [ { shadowColor: 'shadowColor1', background: 'rectBg1'}, { shadowColor: 'shadowColor2', background: 'rectBg2'}, { shadowColor: 'shadowColor3', background: 'rectBg3'}, { shadowColor: 'shadowColor4', background: 'rectBg4'}, { shadowColor: 'shadowColor5', background: 'rectBg5'} ]; varlen = infos.length; //获取数组中的长度vardatas = dm.toDatas( function(d){returnd.getDisplayName() === 'device'; }); //以过滤函数构建新的元素集合并返回（ht.List 数组类型）setInterval( function(){datas.forEach( function(data){varinfo = infos[ Math.floor( Math.random() * len)]; varshadowName = info.shadowColor; varbgName = info.background; if(data.a(shadowName) === 'rgba(255, 0, 0, 0.35)') { //若节点业务属性“阴影”颜色为红色，则设置为绿色data.a(shadowName, 'rgba(0, 255, 0, 0.35)'); } else{ //若节点业务属性“阴影”颜色为绿色，则设置为红色data.a(shadowName, 'rgba(255, 0, 0, 0.35)'); } if(data.a(bgName) === 'rgb(255, 0, 0)') { //若节点业务属性背景颜色为红色，则设置为绿色data.a(bgName, 'rgb(0, 255, 0)'); } else{ //若节点业务属性背景颜色为绿色，则设置为红色data.a(bgName, 'rgb(255, 0, 0)'); } }); }, 1000);结束语
整体来说这个 Demo 还是比较有价值的，一是快速实现了 3D 机柜模型，二是对模型上的元素进行了数据绑定。只是想让你们知道，清晰的图片绘制没有那么难~ 3D 的世界没有那么难~ 数据绑定也没有那么难！我希望也能让您发现这并不是件难事。
MAC地址与交换机端口的绑定——交换机的端口安全配置
网络核心交换机与电脑IP地址绑定
bonding绑定技术