基于 HTML5 WebGL 的 3D 棉花加工监控系统

远程监控系统主要是通过分布于棉花加工生产线各种设备的传感器、开关信号、视频监控设备、 PLC 控制器等装置,通过智能联网设备集成到互联网和局域网上面,实现对生产、运营情况的随时掌握,建立网络范围内的监控数据和网上知识资源库,根据现场采集的设备运行数据进行远程诊断和在线维修。 ... »

基于 HTML5 Canvas 的工控机柜 U 位动态管理

工控上运用到机柜 U 位的非常普遍,但是经常在创建 2D/3D 模型的时候,我们向内添加设备,每个设备占的 U 位不同,如果只是单纯地向机柜内部添加节点,在节点还未添加的时候我们没法直观地看到具体的效果,所以我就想能不能在添加的过程中就让大家直接看到设备的 U 位占位以及效果,这个 Demo 因此而... ... »

基于 HTML5 Canvas 实现的文字动画特效

文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读。 ... »

WebGL 3D 工业隧道监控实战

工业中的隧道我们可能接触的不多,但是在我看来,其中的实时监控是非常有必要的,事故的发生,事故发生地的事故内容,隧道中的排气,逃生通道等等,都是需要有外部人员监控操作的,会比真正事故发生的时候,现场操作这些会更好、更安全,这个 Demo 由此而生。 ... »

WebGL 3D 电信机架实战之数据绑定

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

快速创建 HTML5 Canvas 电信网络拓扑图

电信网络图的应用还是相当广泛的,因为这种网络结构相对简单,而且线路也少,基本建设和维护费用少;中心通信点增加了汇接交换功能,集中了业务量,提高了电路利用率;而且只经一次转接。所以现在电信行业人员广泛都采用这种网络结构。学会了这种绘制方法,以后绘制电信网络拓扑图都是分分钟的事~ ... »

基于 HTML5 WebGL 的 3D 机房

WebGL 渲染的 3D 机房?漂亮的 3D 机房配上流畅的切换,最喜欢镜头缓缓移动的感觉了!而且移动一定要自然!这个 Demo 就是为了纪念一下第一次搭配 eye 和 center 做出的“镜头感”! ... »

快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型

如何在一个斜面上创建 3D 模型?如何通过拖拽创建 3D 模型?这些我们在实际项目中用到的概率也着实不低。我们知道,空间中存在无数个面,一个点和一条法线就能创建一个面,如何利用好这两个部分? ... »

快速开发 HTML5 交互式地铁线路图

感觉目前地铁上的地铁线路图也不是很人性化,很多交互方面没有考虑到用户的需求?感觉总是有各种容易看串的信息,利用 html5 canvas 完成的这个交互式地铁线路图 Demo,如果地铁上的展示信息稍微有点交互会怎么样?不用忙着上车下车,轻轻一点,就能省去很多时间。 ... »

基于 HTML5 Canvas 的交互式地铁线路图

感觉目前地铁上的地铁线路图也不是很人性化,很多交互方面没有考虑到用户的需求?感觉总是有各种容易看串的信息,利用 html5 canvas 完成的这个交互式地铁线路图 Demo,如果地铁上的展示信息稍微有点交互会怎么样?不用忙着上车下车,轻轻一点,就能省去很多时间。 ... »

基于 HTML5 WebGL 的 3D SCADA 主站系统

服务端与客户端的通信可以说是经典的例子了,但是如何快速搭建 3D 的 SCADA 系统,还要加上鹰眼的部分,如果是纯手工 HTML5 来做的话,能完成,但是时间也消耗了许多,而这个例子的鹰眼部分只要 1 行代码。。。整个例子只有两百多行代码! ... »

基于 HTML5 的 3D 工控隧道案例

HTML5 WebGL 技术能够在浏览器里更流畅地展示 3D 场景和模型,还能创建复杂的导航和数据视觉化,所以在 3D 项目上被广泛采用,HTML5 采用插件型和原生型,很多插件的添加还是比较让人头疼的,所以我用原生的写了这个项目,也不复杂,大家可以参考一下~ ... »

基于 HTML5 WebGL 的 3D 仪表数据监控

工控仪表重点发展基于现场总线技术的主控系统装置及智能化仪表、特种和专用自动化仪表;全面扩大服务领域,推进仪器仪表系统的数字化、智能化、网络化,完成 自动化仪表从模拟技术向数字技术的转变;推进具有自主版权自动化软件的商品化。在实际应用中,我觉得能够通过操作 JSON 文件来操作 3D 上的场景变化是非... ... »

利用 HTML5 WebGL 构建的 3D 拓扑图

如果我们可以不用学习 unity3d 或者其他游戏开发工具就能实现 3D 效果,而且能够精准的靠代码来控制移动或者方向就好了。。。今天的例子希望能帮到一些开发 3D WebGL 的前端人员,更快速地开发项目! ... »

利用 HTML5 WebGL 构建的 3D 拓扑图

如果我们可以不用学习 unity3d 或者其他游戏开发工具就能实现 3D 效果,而且能够精准的靠代码来控制移动或者方向就好了。。。今天的例子希望能帮到一些开发 3D WebGL 的前端人员,更快速地开发项目! ... »

基于 HTML5 WebGL 的 3D 网络拓扑结构图

现在,3D 模型已经用于各种不同的领域。在医疗行业使用它们制作器官的精确模型;电影行业将它们用于活动的人物、物体以及现实电影;视频游戏产业将它们作为计算机与视频游戏中的资源;在科学领域将它们作为化合物的精确模型;建筑业将它们用来展示提议的建筑物或者风景表现;工程界将它们用于设计新设备、交通工具、结构... ... »

HTML5 Canvas 数据持久化存储之属性列表

属性列表想必大家都不会陌生,正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框,对传入的数据进行选择的功能,感觉整体实践起来还是比较简单方便的,所以在这边跟大家分享一下。 ... »

基于 HTML5 的电力接线图 SCADA 应用

在电力、油田燃气、供水管网等工业自动化领域 Web SCADA 的概念已经提出了多年,早些年的 Web SCADA 前端技术大部分还是基于 Flex、Silverlight 甚至 Applet 这样的重客户端方案,在 HTML5 流行前 VML 和 SVG 算是真正纯种 Web 方案也是有不少应用,... ... »

快速开发基于 HTML5 网络拓扑图应用--入门篇(二)

上一篇我们创建了一个拓扑场景,所有的代码加上换行和样式,总共也就50行不到的代码,今天我将手把手教你添加树!你会不会动心?因为加上前面的50代码,今天总共也就60行左右的代码,而且超级简单啊!不要错过~ ... »