WebGL 3D 电信机架实战之数据绑定

前言

在前端中，视图层和数据层须要进行单向或者双向数据绑定，你们都已经不陌生了，有时候 2D 作的比较顺了以后，就会想要挑战一下 3D，否则总以为痒痒的。这个 3D 机架的 Demo 我以为很是有表明性，首先，3D 机架用途很是广，尤为是在电信行业，就算不是机架，在好比工业方面 3D 模型以及数据绑定的应用也是很是普遍的，毕竟如今工业物联网已是大趋势了。

效果图

上面动图中，闪烁灯是在不断变化的，因为须要显示的效果美观一点，也实际一点，我截的图仍是比较完整的，可是这个闪烁的部分有点看不清楚，在 http://www.hightopo.com/demo/serviceShow/  上能够直接运行查看效果。

代码实现

 虽然上面 gif 图中显示的一个是 2D 的一个是 3D 的，可是构建的步骤以及须要的内容是同样的，因此本文只针对 3D 的模型进行代码实现。

场景搭建

搭建一个 3D 场景是很是快速的，只须要三行代码：

dm = new ht.DataModel();//建立一个数据容器 数据容器也能够经过 g3d.getDataModel() 获取
g3d = new ht.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 样式设置。

那么，如何用代码来建立这样一个节点呢？

var node = new ht.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 内容中建立的部分），剩下的九个都是须要动态变化闪烁灯的设备，也就是我红框框起来的部分：

这些设备的建立方式跟上面的 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 等独立的方式，还能够经过遍历数据容器来获取多个元素：

var infos = [
    { shadowColor: 'shadowColor1', background: 'rectBg1' },
    { shadowColor: 'shadowColor2', background: 'rectBg2' },
    { shadowColor: 'shadowColor3', background: 'rectBg3' },
    { shadowColor: 'shadowColor4', background: 'rectBg4' },
    { shadowColor: 'shadowColor5', background: 'rectBg5' }
];
var len = infos.length; //获取数组中的长度
var datas = dm.toDatas(function(d) { return d.getDisplayName() === 'device'; });//以过滤函数构建新的元素集合并返回（ht.List 数组类型）
setInterval(function() {
    datas.forEach(function(data) {
        var info = infos[Math.floor(Math.random() * len)];
        var shadowName = info.shadowColor;
        var bgName = 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 的世界没有那么难~ 数据绑定也没有那么难！我但愿也能让您发现这并非件难事。