Chinaunix首页 | 论坛 | 博客
  • 博客访问: 950911
  • 博文数量: 110
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1997
  • 用 户 组: 普通用户
  • 注册时间: 2013-12-15 22:39
个人简介

HT for Web 3D. HT for modern web and mobile app development. www.hightopo.com

文章分类

全部博文(110)

文章存档

2020年(1)

2018年(28)

2017年(21)

2016年(10)

2015年(28)

2014年(19)

2013年(3)

我的朋友

分类: HTML5

2018-03-23 07:10:45

前言

在前端中,视图层和数据层需要进行单向或者双向数据绑定,大家都已经不陌生了,有时候 2D 做的比较顺了之后,就会想要挑战一下 3D,不然总觉得痒痒的。这个 3D 机架的 Demo 我觉得非常有代表性,首先,3D 机架用途非常广,尤其是在电信行业,就算不是机架,在比如工业方面 3D 模型以及数据绑定的应用也是非常广泛的,毕竟现在工业物联网已经是大趋势了。

效果图



上面动图中,闪烁灯是在不断变化的,由于需要显示的效果美观一点,也实际一点,我截的图还是比较完整的,但是这个闪烁的部分有点看不清楚(cnblog 中放太明显的外链容易被移出首页啊!!!等会再发!)。

代码实现

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

场景搭建

搭建一个 3D 场景是非常快速的,只需要三行代码:

点击(此处)折叠或打开

  1. dm = new ht.DataModel();//创建一个数据容器 数据容器也可以通过 g3d.getDataModel() 获取
  2. g3d = new ht.graph3d.Graph3dView(dm);//创建一个 3D 场景,将数据容器作为参数传递进去,这样数据容器中的内容就可以显示在 3D 场景中了
  3. g3d.addToDOM();


3D 机架模型构建

虽然可以叫设计师直接给我一个 obj 格式的模型,但是我觉得这个比较简答,还是不要麻烦人家了。。。首先是创建一个六面体,模型上面的贴图是我以前用的一个 json 格式的文件,用来作为这个六面体的正面贴图,这些部分都是写在 json 文件里面的,我先截取一小部分的 json 内容,然后用 js 代码复现:

点击(此处)折叠或打开

  1. {
  2.   "c": "ht.Node", //一个 ht.Node 类型的元素
  3.   "i": 1277,//id
  4.   "p": {//通过 set/get 来设置/获取的元素的部分。如 setPosition/getPosition
  5.     "tag": "service",//设置元素标签 用来作为唯一标识
  6.     "image": "symbols/机柜.json",//设置节点图片
  7.     "rotationX": 1.5708,//设置节点 X 轴旋转角度
  8.     "position": {//设置节点位置
  9.       "x": 0,
  10.       "y": 225
  11.     },
  12.     "anchor": {//设置节点锚点
  13.       "x": 0.5,
  14.       "y": 0.54
  15.     },
  16.     "anchorElevation": 1, //设置节点 y 轴锚点
  17.     "width": 507,//设置节点宽度
  18.     "height": 980, //设置节点长度
  19.     "tall": 450, //设置节点高度
  20.     "elevation": 451 //控制Node图元中心位置所在3D坐标系的y轴位置
  21.   },
  22.   "s": {//设置图元的 style 样式,HT 预定义的一些样式属性,通过 node.s('all.color') 获取和设置节点的样式
  23.     "all.color": "#DDDDDD", //设置节点六面颜色
  24.     "top.image": "symbols/机柜.json",//设置节点顶部图片
  25.     "front.visible": true, //设置节点正面是否可见
  26.     "back.visible": true,
  27.     "left.visible": true,
  28.     "right.visible": true,
  29.     "bottom.visible": true
  30.   }
  31. }


这部分的 json 内容大体上就是创建了一个 ht.Node 节点,然后对这个节点设置了一些属性,包括节点坐标,节点的大小,以及一些 style 样式设置。

那么,如何用代码来创建这样一个节点呢?

点击(此处)折叠或打开

  1. var node = new ht.Node();//创建一个 ht.Node 类型的节点
  2. node.setTag('service'); //设置节点的标签
  3. node.setImage('symbols/机柜.json'); //设置节点图片
  4. node.setRotationX(Math.PI/2);//设置节点x轴旋转
  5. node.setPosition(0, 225);//设置节点位置
  6. node.setAnchor(0.5, 0.54);//设置节点锚点
  7. node.setAnchorElevation(1);//设置节点y轴方向的锚点

  8. node.setWidth(507);//设置节点的宽度
  9. node.setHeight(980);//设置节点的长度
  10. node.Tall(450);//设置节点的高度
  11. node.setElevation(451);//控制Node图元中心位置所在3D坐标系的y轴位置

  12. node.s({ //设置节点样式
  13.     'all.color': '#ddd', //六面颜色
  14.     'top.image': 'symbols/机柜.json'//节点顶部图片
  15.     'front.visible': true,//设置节点正面可见
  16.     'back.visible': true,
  17.     'left.visible': true,
  18.     'right.visible': true,
  19.     'bottom.visible': true
  20. });


其实整个 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 数组,每个数组对象为一个独立的组件类型,数组的顺序为组件绘制先后顺序

由于这张图绘制的还是比较复杂的,所以我就将设置了数据绑定的矩形部分的矢量绘制代码粘贴出来:

点击(此处)折叠或打开

  1. {
  2.     "width": 48, //一个矢量图标必备的宽度 矢量详细内容请参考 HT for Web 矢量手册
  3.     "height": 262,//一个矢量图标必备的高度
  4.     "comps": [//一个矢量图标必备的 Array 数组组件
  5.         {//数组组件中的第一个元素
  6.             "type": "rect",//类型为矩形
  7.             "background": {//设置矩形背景色
  8.                 "func": "attr@rectBg1", //HT 用一个带func属性的对象替换以前的参数值 这里就是进行数据绑定的地方
  9.                 "value": "rgb(255,0,0)"//如果 func 值为 undefined 或者 null 时,采用这个值
  10.             },
  11.             "shadow": true,//设置“阴影”
  12.             "shadowColor": { //“阴影”颜色
  13.                 "func": "attr@shadowColor1", // 这边将“阴影”也进行了数据绑定,为的是能够实现灯“发光”的效果
  14.                 "value": "rgba(255,0,0,0.35)"//设置备选值
  15.             },
  16.             "shadowOffsetX": 0, //设置阴影横轴偏移量
  17.             "shadowOffsetY": 0,//设置阴影纵轴偏移量
  18.             "rect": [//设置该组件的宽高以及坐标
  19.                 4.38544,//x 轴坐标
  20.                 23.52679,//y 轴坐标
  21.                14.46481, //width 组件宽度
  22.                6.1554//height 组件高度
  23.            ]
  24.        }
  25.     ]
  26. }


因为一个矢量图形中有 5 个“闪烁灯”,所以我添加了 5 个组件,也就是在 comps 参数里面添加了五个元素,绑定的数据不同,为了省事,我将绑定的数据名都设置为“rectBg”后面加一个数字,这些数字依次递增。

我们就是将这样一张矢量图设置为节点的 front.image 作为节点正面显示图的:node.s('front.image', 'symbols/内部设备2.json')。

JSON 反序列化

会不会有人好奇 json 文件里面的内容是如何转换成 3D 模型的?

说实在的,步骤依然很简单:

点击(此处)折叠或打开

  1. ht.Default.xhrLoad('scene/service3d.json', function(text) {//xhrLoad 函数是一个异步加载文件的函数
  2.     dm.deserialize(text);//反序列化数据容器,解析用于生成对应的Data对象并添加到数据容器 这里相当于把 json 文件中生成的 ht.Node 节点反序列化到数据容器中,这样数据容器中就有这个节点了
  3. });


由于 xhrLoad 函数是一个异步加载函数,所以如果 dm 数据容器反序列化未完成就直接调用了其中的节点,那么会造成数据获取不到的结果,所以一般来说我是将一些逻辑代码写在这个函数内部,或者给逻辑代码设置 timeout 错开时间差。

首先,由于数据都是存储在 dm 数据容器中的(通过 dm.add(node) 添加的),所以我们要获取数据除了可以通过 id、tag 等独立的方式,还可以通过遍历数据容器来获取多个元素:

点击(此处)折叠或打开

  1. var infos = [
  2.     { shadowColor: 'shadowColor1', background: 'rectBg1' },
  3.     { shadowColor: 'shadowColor2', background: 'rectBg2' },
  4.     { shadowColor: 'shadowColor3', background: 'rectBg3' },
  5.     { shadowColor: 'shadowColor4', background: 'rectBg4' },
  6.     { shadowColor: 'shadowColor5', background: 'rectBg5' }
  7. ];
  8. var len = infos.length; //获取数组中的长度
  9. var datas = dm.toDatas(function(d) { return d.getDisplayName() === 'device'; });//以过滤函数构建新的元素集合并返回(ht.List 数组类型)
  10. setInterval(function() {
  11.     datas.forEach(function(data) {
  12.         var info = infos[Math.floor(Math.random() * len)];
  13.         var shadowName = info.shadowColor;
  14.         var bgName = info.background;

  15.         if (data.a(shadowName) === 'rgba(255, 0, 0, 0.35)') {//若节点业务属性“阴影”颜色为红色,则设置为绿色
  16.             data.a(shadowName, 'rgba(0, 255, 0, 0.35)');
  17.         }
  18.         else {//若节点业务属性“阴影”颜色为绿色,则设置为红色
  19.             data.a(shadowName, 'rgba(255, 0, 0, 0.35)');
  20.         }

  21.         if (data.a(bgName) === 'rgb(255, 0, 0)') {//若节点业务属性背景颜色为红色,则设置为绿色
  22.             data.a(bgName, 'rgb(0, 255, 0)');
  23.         }
  24.         else {//若节点业务属性背景颜色为绿色,则设置为红色
  25.             data.a(bgName, 'rgb(255, 0, 0)');
  26.         }
  27.     });
  28. }, 1000);


结束语

整体来说这个 Demo 还是比较有价值的,一是快速实现了 3D 机柜模型,二是对模型上的元素进行了数据绑定。只是想让你们知道,清晰的图片绘制没有那么难~ 3D 的世界没有那么难~ 数据绑定也没有那么难!我希望也能让您发现这并不是件难事。


阅读(2487) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~