[置顶] 基于HTML5 WebGL实现 json工控风机叶轮旋转

最新推荐文章于 2024-08-15 09:44:52 发布
最新推荐文章于 2024-08-15 09:44:52 发布
阅读量392 收藏
点赞数
分类专栏： 3D</div> HTML5</div> Canvas</div> WebGL</div> SCADA</div>
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yixiaof/article/details/79010838
版权
本文介绍了如何利用HTML5 WebGL技术，结合HT框架，创建一个包含3D叶轮旋转效果的工控模型。通过json序列化和反序列化实现2D模型到3D的转换，并利用ht.CSGBox创建基础3D盒子。此外，文章还讨论了设置动画、图元标识以及与ECharts图表的集成技巧。
摘要由CSDN通过智能技术生成

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

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

先来看看效果图：


 

这个例子最基础的就是最外层的盒子了，所以我们

最低0.47元/天 解锁文章
吃货乙
关注
专栏目录
C#使用8张风扇png图片进行动态旋转，即制成一个可开关的风扇gif图片
10-06
8张png图片在DynamicPhoto/DynamicPhoto/bin/Debug目录下。基于c#的wpf框架进行演示，开箱即用。
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
HT for Web 3D
10-18 4405
如果，我能轻松写出一个盒子，这个盒子能打开，我还能在盒子上放一些我想要展现的东西，图片啊，json文件啊 ，图表啊，动态交互界面啊...这些有些单独做起来都觉得费劲，要把他们放到同一个界面的盒子上也并不容易，而且性能还要好，浏览器操作要流畅，100多行，很棒的效果！
json-scada:以MongoDB数据库服务器为中心的便携式可扩展SCADAIoT平台
03-06
{json：scada} 以MongoDB数据库服务器为中心的便携式可扩展SCADA / IoT平台。 使命宣言 通过利用主流开源IT工具提供易于使用，功能齐全，可扩展的便携式SCADA / IoT系统。 屏幕截图 主要特点 适用于SCADA / IoT的标准IT工具（MongoDB，PostgreSQL / TimescaleDB，Node.js，C＃，Golang，Grafana等）。 MongoDB作为实时核心数据库，持久层，配置存储，SOE历史记录。 在Linux，Windows，Mac OSX，x86 / 64，ARM上的可移植性和互操作性。 Windows安装程序可在。 从一台计算机到大型集群（MongoDB分片），Docker容器，VM，Kubernetes，云或混合部署的水平可伸缩性。 无限的标签，服务器和用户。 模块化分布式体系结构。 轻量级冗余数据采集节点
json-scada:以MongoDB数据库服务器为中心的便携式SCADA / IoT平台。-开源
04-29
适用于SCADA / IoT的标准IT工具（MongoDB，PostgreSQL / TimescaleDB，Node.js，C＃，Golang，Grafana等）。 MongoDB作为实时核心数据库，持久层，配置存储，SOE历史记录。 在Linux，Windows，x86 / 64，ARM上的可移植性和互操作性。 从一台计算机到大型群集（MongoDB分区），Bare Metal，Docker容器，VM，云或混合部署的水平可伸缩性。 无限的标签，服务器和用户。 HTML5 Web界面。 UTF-8 / I18N。 协议：IEC60870-101 / 104客户端和服务器，DNP3客户端，Telegraf（用于监视的各种数据源，例如Modbus，MQTT，OPC-UA，SNMP等）Github。 项目https://github.com/riclolsen/json-scada Windows Installer的要求：Windows 10 64位或Server 2016，Windows PowerShell。 打开适用于64位Windows的SSL二进制文件，网址为https://s
探秘新一代开源SCADA系统：{json:scada}
gitblog_00086的博客
05-26 604
探秘新一代开源SCADA系统：{json:scada} json-scadaA portable and scalable SCADA/IIoT-I4.0 platform centered on the MongoDB database server.项目地址:https://gitcode.com/gh_mirrors/js/json-scada 在工业自动化和物联网领域，数据采集与监控控制...
HTML5 WebGL实现酷炫的星云旋转背景动画特效源码.zip
11-03
这个"HTML5 WebGL实现酷炫的星云旋转背景动画特效源码.zip"文件，显然是一个使用WebGL技术创建的3D星云旋转背景动画的示例。 WebGL基于OpenGL ES 2.0规范，它提供了一种JavaScript API，用于在任何兼容的Web浏览器...
基于HTML5WebGL的3D仓储管理系统
02-20
仓储管理系统（WMS）是一个实时的计算机软件系统，它能够按照运作的业务规则和运算法则，对信息、资源、行为、存货和分销运作进行更完美地管理，使其最大化满足有效产出和精确性的要求。从财务软件、进销存软件CIMS...
基于HTML5 WebGL 3D樱花飘落动画
06-25
基于HTML5 WebGL 3D樱花飘落动画 1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。 2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、...
scada
lisiyun的专栏
06-02 400
GE-SCADA 数据库
03-09
GE-SCADA 数据库，oracle 数据如何连接GE-SCADA 数据库，及GE-SCADA 数据库如何发送数据
JSON SCADA 项目教程
最新发布
gitblog_00310的博客
08-15 625
JSON SCADA 项目教程 json-scadaA portable and scalable SCADA/IIoT-I4.0 platform centered on the MongoDB database server.项目地址:https://gitcode.com/gh_mirrors/js/json-scada 1. 项目的目录结构及介绍 JSON SCADA 项目的目录结构如下...
WebGL自学教程－－示例：图表控件
tiewen的专栏
11-22 3095
CCurvesCtrl 　　     一开始的时候，我在工作中碰到一个问题，我想把数据导出为Web格式的报表。唯一的问题是，我们的报表中需要一个显示曲线图、散点图、柱状图之类的图表，曲线图和散点图的数据规模在百万级别。我用VML实现了这个图表，但效果很不理想。我于是想找找能够在Web上高效绘图的东西，并且不能使用ActiveX之类的控件。我找到了Web3D，我选择了向标准靠拢。于是，我的Web
跨平台SCADA系统（组态软件）开发4
lweiyue的专栏
06-01 2348
四、数据采集 采集功能是整个系统最核心的功能，完成了这一功能，其他部分便水到渠成。数据采集的需求包括： （1）仪器各种各样，通信协议五花八门。 （2）软件开发完成以后，能够让不懂代码的人配置最终产品。 （3）使用多种链路，有些仪器共用一条链路。 （4）快速采集，有些链路或仪器出现问题不影响整个系统的采集。 （5）在采集的同时，反控能及时响应。 上述五个需求，我们在不同的模块中完成，每个模块只要做好自己的事情即可。 4.1设备配置和通信协议 这一部分完成的是需求1和2。 ...
JSON Schema
zai329979994639的博客
08-09 280
JSON Schema JSON Schema称为JSON模式。JSON Schema是描述你的JSON数据格式； 主要有以下作用： 对现有的json数据格式进行描述（字段类型、内容长度、是否必须存在、取值示例等）； 是一个描述清晰、人机可读的文档； 自动测试、验证客户端提交的数据； JSON Schema 简单示例 把需要被验证的json文档称为instance，用来校验它的文档就是schema； // 数据结构 { "name": "xiaoming", "city": "hangzhou",
echart图与JSON整合
weixin_43843164的博客
10-02 1003
echart图与JSON整合 写pojo、povo、interface、interfaceImpl、controller实现数据库数据转为Json数据 povo public class Country_A extends CTA_Attribute { private int cId; private String countryName; private int CAI...
HTML5 WebGL 3D 俄罗斯方块实现解析
本文详细讲解了基于HTML5的WebGL技术开发3D俄罗斯方块游戏的过程。WebGL是一种在浏览器中渲染3D图形的API，它允许开发者在网页上创建交互式的三维场景，而无需依赖任何插件。在这个项目中，开发者首先构建了一个2D版...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吃货乙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值