基于HTML5 WebGL实现 json工控风机叶轮旋转
2019独角兽企业重金招聘Python工程师标准>>>
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开。我用HT实现了我的想法,代码一百多行,这么少的代码能实现这种效果我觉得还是牛的。
demo地址: http://www.hightopo.com/demo/Wall3D/index.html
先来看看效果图:
这个例子最基础的就是最外层的盒子了,所以我们先来看看如何实现它:
var box = new ht.CSGBox(); 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动画,再立即刷新到这个水泵,否则就算设置了动画,水泵上的扇叶旋转也不会生效。
ht.Default.xhrLoad('displays/demo/pump.json', function(text){const json = ht.Default.parse(text);pumpDM.deserialize(json);var currentRotation = 0;var lastTime = new Date().getTime();setInterval(function(){var time = new Date().getTime();var deltaTime = 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() { return 600;} pumpGV.getHeight = function(){ return 600;} 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,即将其设置为动态:
function charts(option){var info = {canvas: document.createElement('canvas')};info.canvas.dynamic = true;//设置info.canvas为动态info.chart = echarts.init(info.canvas);info.chart.setOption(option);return info.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就可以生成图片了。
转载于:https://my.oschina.net/xhload3d/blog/1557082
基于HTML5 WebGL实现 json工控风机叶轮旋转相关推荐
- 基于HTML5 Canvas 实现矢量工控风机叶轮旋转
之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元--叶轮旋转. 先看看最后我们实现的效果:http://www.hightopo.com/demo/fan/index.html ...
- background 旋转_基于HTML5 Canvas 实现矢量工控风机叶轮旋转
之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元--叶轮旋转. 先看看最后我们实现的效果 我们先来看下这个叶轮模型长什么样 从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不 ...
- 基于 HTML5 WebGL 的 3D 工控裙房系统
前言 工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇.中国工业物联网企业目前呈现两种发展形式并存状况:一方面是大型通讯.IT企业的布局:一方 ...
- 基于HTML5的Web SCADA工控移动应用
在电力.油田燃气.供水管网等工业自己主动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这种重client ...
- 基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用
前言 得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应 ...
- c#web页面显示弹窗_基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用
前言 在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接,结合软件和大数据分析的工业互联网也将变得越来越容易实现! 国家也敏锐意识 ...
- 基于 HTML5 WebGL 的虚拟现实可视化培训系统
前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...
- 基于 HTML5 WebGL + WebVR 的 3D 虚实现实可视化培训系统
前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...
- 基于 HTML5 WebGL 的发动机 3D 可视化系统
前言 工业机械产品大多体积庞大.运输成本高,在参加行业展会或向海外客户销售时,如果没有实物展示,仅凭静态.简单的图片说明书介绍,无法让客户全面了解产品,不仅工作人员制作麻烦,客户看得也费力.如果能在 ...
最新文章
- 链表问题15——将搜索二叉树转换成双向链表
- 思科分析引擎助力大型数据中心应用发展
- 时间选择器 可以选择日期和时间
- 编程疑难杂症の设置正确却无效的事件代码
- 学号20145209《信息安全系统设计基础》第11周学习总结
- 自定义报错返回_MybatisPlus基础篇学习笔记(五)------自定义sql及分页查询
- 关于Cocos2d-x中init方法和onEnter方法的区别
- 数字孪生应用白皮书_【研究报告】数字孪生应用白皮书(2020版)
- 少谈设计模式,多谈基本功
- unity和python哪个好学_纠结学习Python还是unity3d_课课家教育
- 深入解析Windows操作系统(笔记2)
- tcp服务器测试网页版,tcp测试服务器
- 常用的非线性激励函数
- 关于“程序员996”,互联网大神发话了,能顶用吗?
- 用python根据年份判断生肖_C#中根据年份判断十二生肖
- 期货从业有哪些公式要背?
- Visual Leak Detector使用方法
- 低速接口之SPI接口,分类,四种模式,特点
- Java substr 用法_java中substring与substr的用法
- IBM欧洲裁员一万人、Salesforce 考虑收购 Slack​、杰夫·贝佐斯如何做决定等|Decode the Week...