基于HTML5 WebGL实现 json工控风机叶轮旋转

忽然有个想法，若是能把一些用到不一样的知识点放到同一个界面上，而且放到一个盒子里，这样我若是要看什么东西就能够很直接显示出来，并且这个盒子必定要能打开。我用HT实现了个人想法，代码一百多行，这么少的代码能实现这种效果我以为仍是牛的。

demo地址： http://www.hightopo.com/demo/Wall3D/index.html

先来看看效果图：

这个例子最基础的就是最外层的盒子了，因此咱们先来看看如何实现它：

1 var box = new ht.CSGBox();
2 dataModel.add(box);

用HT能够很轻易地实现这个盒子，在HT中封装了不少基础图元类型，咱们常常用到的ht.Node也是其中一个，这样咱们能够不用反复地写相同的代码来完成基础的实现。

这个例子中用的封装好的基础图元是ht.CSGBox，一个盒子模型，能够参考HT for Web 建模手册，咱们在手册中能够看到，在CSGBox中咱们只能操做这个盒子的各个面，若是你想要本身设置一些特殊的功能，只须要操做ht.Style（HT for Web 风格手册）便可。

要想实如今盒子上的一个面上添加贴图，我能想到的只有HT封装的ht.Default.setImage函数了。

我想大家都注意到了盒子上有模型化的水泵，上面有扇叶在旋转，那么这个水泵是怎么生成的呢？我用咱们的2d编辑器写了一个水泵模型经过graphView.serialization(datamodel)将模型序列化成json格式的文件，而后在这边引用的时候我再调用graphView.deserialize(json)来将json文件导出成可视化的2d模型并设置animation动画，再当即刷新到这个水泵，不然就算设置了动画，水泵上的扇叶旋转也不会生效。

 1 ht.Default.xhrLoad('displays/demo/pump.json', function(text){
 2     const json = ht.Default.parse(text);
 3     pumpDM.deserialize(json);
 4     var currentRotation = 0;
 5     var lastTime = new Date().getTime();
 6 
 7     setInterval(function(){
 8         var time = new Date().getTime();
 9         var deltaTime = time - lastTime;
10         currentRotation += deltaTime * Math.PI / 180 * 0.3;
11         lastTime = time;
12 
13         pumpDM.getDataByTag('fan1').setRotation(currentRotation);
14         pumpDM.getDataByTag('fan2').setRotation(currentRotation);
15         box.iv();
16         // g3d.iv();这边也能够刷新g3d，可是局部刷新更省
17         pumpGV.validateImpl();
18     }, 10);
19 }, 10);

这个时候我不能把水泵的graphView和g3d都加到底层div上，而且个人意图是把水泵的graphView加到g3d中的CSGBox中的一面上，因此为了让水泵显示出来 必须设置水泵所在的graphView的宽高，而这个宽高必须比我json画出来的图占的面积要大，否则显示不完整。若是想看这个宽高对显示的影响，能够本身改改看来玩玩。

1 pumpGV.getWidth = function() { return 600;}
2 pumpGV.getHeight = function(){ return 600;}
3 pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示

这边还要特别说明一个函数getDataByTag(tagName)这个函数是获取标识号，在HT中tag属性是惟一标识，虽然HT中也有id，可是id是HT中Data类型对象构造时内部自动被赋予的一个id属性，能够经过data.getId()和data.setId(id)获取和设置，Data对象添加到DataModel以后不容许修改id值，能够经过dataModel.getDataById(id)快速查找Data对象。

通常咱们建议id属性由HT自动分配，用户业务意义的惟一标示可存在于tag属性上，经过data.setTag(tag)函数容许任意动态改变tag值，经过dataModel.getDataByTag(tag)可查找到对应的Data对象，并支持经过dataModel.removeDataByTag(tag)删除Data对象。

你可能会好奇在代码中咱们并无提到“fan1”这个tag标识，这个标识是在水泵的json中设置的，关于扇叶的一个标识，咱们获取到扇叶，而后设置其旋转。

echarts图表的显示也是很基础的，可是咱们会发现，在将echarts图表添加进graphView中它的动画效果会不显示，因此咱们首先要将这个echarts图表所在的图表的dynamic设置为true，即将其设置为动态：

1 function charts(option){
2     var info = {
3         canvas: document.createElement('canvas')
4     };
5     info.canvas.dynamic = true;//设置info.canvas为动态
6     info.chart = echarts.init(info.canvas);
7     info.chart.setOption(option);
8     return info.canvas;
9 }

最后，只须要将这两个回传的canvas传入ht.Default.setImage中便可：

1 ht.Default.setImage('echart', charts(option));
2 ht.Default.setImage('pump', pumpGV.getCanvas());

ht.Default.drawImage函数生成新的图实际上就是在canvas上画图，因此咱们只要把咱们已经画好的canvas传到ht.Default.setImage就能够生成图片了。