基于HTML5WebGL实现工控风机json叶轮转动直接显示，盒子必须能打开。我用HT实现了我的想法，代码一百多行，这么少的代码就能达到这样的效果，我觉得很了不起。演示地址：http://www.hightopo.com/demo/...先来看效果图：varbox=newht.CSGBox();dataModel.add(box);这个用HT很容易实现盒子在HT中封装了很多基本的原始类型，我们经常使用的ht.Node也是其中之一，这样我们就可以完成基本的实现，而不用重复写相同的代码。本例中使用的封装的基本原语是ht.CSGBox，一个盒子模型，可以参考HTforWebModelingManual，我们在手册中可以看到CSGBox中我们只能对盒子的所有面进行操作，如果你想自己设置一些特殊功能，只需要操作ht.Style（HTforWebstyle手册）即可。给盒子的一个表面添加纹理，我能想到的就是HT封装的ht.Default.setImage函数。想必大家都注意到了，盒子上有一个模型水泵，风扇叶片在转动，那么这个水泵是怎么来的呢？我用我们的二维编辑器写了一个水泵模型，通过graphView.serialization(datamodel)把模型序列化成json文件，然后调用graphView.deserialize(json)将json文件导出到可视化二维模型中，设置animation动画，然后立即刷新到水泵上，否则即使设置了动画，水泵上的扇叶旋转也不会生效。ht.Default.xhrLoad('displays/demo/pump.json',function(text){constjson=ht.Default.parse(text);pumpDM.deserialize(json);varcurrentRotation=0;varlastTime=newDate().getTime();setInterval(function(){vartime=newDate().getTime();vardeltaTime=time-lastTime;currentRotation+=deltaTime*Math.PI/180*0.3;lastTime=time;pumpDM.getDataByTag('fan1').setRotation(currentRotation);pumpDM.getDataByTag('fan2').setRotation(currentRotation);box.iv();//g3d.iv();你也可以在这里刷新g3d，但是在本地刷新并保存pumpGV.validateImpl();},10);},10);这个时候我不能把水泵的graphView和g3d加到最下面的div，我的本意是把水泵的graphView加到g3d的CSGBox的一侧，为了让水泵能够显示时，必须设置水泵所在的graphView的宽高，而且这个宽高必须大于我json绘制的图形所占的面积，否则显示不完整。如果想看这个宽高在显示上的效果，可以自己改一下玩玩。pumpGV.getWidth=function(){return600;}pumpGV.getHeight=function(){return600;}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）。一般我们建议id属性由HT自动赋值。用户业务意义的唯一标识可以存在于tag属性上。data.setTag(tag)函数允许任意动态改变tag值，通过dataModel.getDataByTag(tag)可以找到对应的tag。Data对象，支持通过dataModel.removeDataByTag(tag)删除Data对象。您可能很好奇我们没有在代码中提到标签“fan1”。这个标签设置在水泵的json中。关于扇叶的标签，我们获取扇叶，然后设置它的旋转。echarts图表的显示也是很基础的，但是我们会发现当echarts图表添加到graphView后，它的动画效果是不会显示的，所以我们首先需要设置echarts图表所在的图表的动态located为true，即设置为fordynamic:functioncharts(option){v??arinfo={canvas:document.createElement('canvas')};info.canvas.dynamic=true;//设置info.canvas为动态info.chart=echarts.init(info.canvas);info.chart.setOption（选项）；returninfo.canvas;}最后只需要将返回的两个canvas传入ht.Default.setImage即可：ht.Default.setImage('echart',charts(option));ht.Default.setImage('pump',pumpGV.getCanvas());ht.Default.drawImage函数生成一张新图片其实就是在canvas上绘制，所以我们只需要将已经绘制好的canvas传给ht.Default.setImage就可以生成图片了。
