- 博客(21)
- 资源 (7)
- 收藏
- 关注
WebGL 3D 工业隧道监控实战
前言监控隧道内的车道堵塞情况、隧道内的车祸现场,在隧道中显示当前车祸位置并在隧道口给与提示等等功能都是非常有必要的。这个隧道 Demo 的主要内容包括:照明、风机、车道指示灯、交通信号灯、情报板、消防、火灾报警、车行横洞、风向仪、微波车检、隧道紧急逃生出口的控制以及事故模拟等等。效果图 http://www.hightopo.com/demo/tunnel2/index.html...
2018-03-26 07:51:52 320
原创 WebGL 3D 工业隧道监控实战
前言监控隧道内的车道堵塞情况、隧道内的车祸现场,在隧道中显示当前车祸位置并在隧道口给与提示等等功能都是非常有必要的。这个隧道 Demo 的主要内容包括:照明、风机、车道指示灯、交通信号灯、情报板、消防、火灾报警、车行横洞、风向仪、微波车检、隧道紧急逃生出口的控制以及事故模拟等等。效果图http://www.hightopo.com/demo/tunnel2/index.html上图中的各种设备都可...
2018-03-26 07:41:32 905
原创 WebGL 3D 工业隧道监控实战
前言监控隧道内的车道堵塞情况、隧道内的车祸现场,在隧道中显示当前车祸位置并在隧道口给与提示等等功能都是非常有必要的。这个隧道 Demo 的主要内容包括:照明、风机、车道指示灯、交通信号灯、情报板、消防、火灾报警、车行横洞、风向仪、微波车检、隧道紧急逃生出口的控制以及事故模拟等等。效果图http://www.hightopo.com/demo/tunnel2/index.html上图中的各种设备都可...
2018-03-26 07:01:34 2002 3
原创 WebGL 3D 电信机架实战之数据绑定
前言在前端中,视图层和数据层需要进行单向或者双向数据绑定,大家都已经不陌生了,有时候 2D 做的比较顺了之后,就会想要挑战一下 3D,不然总觉得痒痒的。这个 3D 机架的 Demo 我觉得非常有代表性,首先,3D 机架用途非常广,尤其是在电信行业,就算不是机架,在比如工业方面 3D 模型以及数据绑定的应用也是非常广泛的,毕竟现在工业物联网已经是大趋势了。效果图上面动图中,闪烁灯是在不断变化的,由于...
2018-03-23 07:10:39 755 5
原创 WebGL 3D 电信机架实战之数据绑定
前言在前端中,视图层和数据层需要进行单向或者双向数据绑定,大家都已经不陌生了,有时候 2D 做的比较顺了之后,就会想要挑战一下 3D,不然总觉得痒痒的。这个 3D 机架的 Demo 我觉得非常有代表性,首先,3D 机架用途非常广,尤其是在电信行业,就算不是机架,在比如工业方面 3D 模型以及数据绑定的应用也是非常广泛的,毕竟现在工业物联网已经是大趋势了。效果图上面动图中,闪烁灯是在不断变化的,由于...
2018-03-23 07:10:32 226
WebGL 3D 电信机架实战之数据绑定
前言在前端中,视图层和数据层需要进行单向或者双向数据绑定,大家都已经不陌生了,有时候 2D 做的比较顺了之后,就会想要挑战一下 3D,不然总觉得痒痒的。这个 3D 机架的 Demo 我觉得非常有代表性,首先,3D 机架用途非常广,尤其是在电信行业,就算不是机架,在比如工业方面 3D 模型以及数据绑定的应用也是非常广泛的,毕竟现在工业物联网已经是大趋势了。效果图 上面动图中,闪烁...
2018-03-22 23:18:41 166
快速创建 HTML5 Canvas 电信网络拓扑图
前言电信网络拓扑图确实实用性很强,最近有个项目是基于这个的,为了写得丰富一点,还加了自动布局已经属性栏部分,不过这个 Demo 真的写得很用心,稍微改改都能直接运用到项目中去,还可以进行数据交互,总之希望能对大家有所帮助。效果图 拓扑图从上面的效果图中我们可以看到,整个页面分为 3 个部分,左边的 graphView 拓扑图部分,右下角的 tableView 表格部分,...
2018-03-21 10:45:59 306
原创 快速创建 HTML5 Canvas 电信网络拓扑图
前言电信网络拓扑图确实实用性很强,最近有个项目是基于这个的,为了写得丰富一点,还加了自动布局已经属性栏部分,不过这个 Demo 真的写得很用心,稍微改改都能直接运用到项目中去,还可以进行数据交互,总之希望能对大家有所帮助。效果图拓扑图从上面的效果图中我们可以看到,整个页面分为 3 个部分,左边的 graphView 拓扑图部分,右下角的 tableView 表格部分,以及右上角的 property...
2018-03-21 10:26:37 1635 1
原创 快速创建 HTML5 Canvas 电信网络拓扑图
前言电信网络拓扑图确实实用性很强,最近有个项目是基于这个的,为了写得丰富一点,还加了自动布局已经属性栏部分,不过这个 Demo 真的写得很用心,稍微改改都能直接运用到项目中去,还可以进行数据交互,总之希望能对大家有所帮助。效果图拓扑图从上面的效果图中我们可以看到,整个页面分为 3 个部分,左边的 graphView 拓扑图部分,右下角的 tableView 表格部分,以及右上角的 property...
2018-03-21 10:19:23 341
原创 快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇
前言发现大家对于我从 json 文件中直接操作节点属性来控制界面的动态变化感到比较好奇,所以这篇就针对数据绑定以及如何使用这些绑定的数据做一篇说明,我写了一个简单的例子,基于机房工控的服务器上设备的灯闪烁现象。我们从 2d 和 3d 两个角度来分析数据绑定的问题。效果图 2d ...
2018-03-19 09:17:17 404
快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇
前言发现大家对于我从 json 文件中直接操作节点属性来控制界面的动态变化感到比较好奇,所以这篇就针对数据绑定以及如何使用这些绑定的数据做一篇说明,我写了一个简单的例子,基于机房工控的服务器上设备的灯闪烁现象。我们从 2d 和 3d 两个角度来分析数据绑定的问题。效果图 2d ...
2018-03-19 09:06:50 145
原创 快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇
前言发现大家对于我从 json 文件中直接操作节点属性来控制界面的动态变化感到比较好奇,所以这篇就针对数据绑定以及如何使用这些绑定的数据做一篇说明,我写了一个简单的例子,基于机房工控的服务器上设备的灯闪烁现象。我们从 2d 和 3d 两个角度来分析数据绑定的问题。效果图2d 代码实现其实不管是 2d 还是 3d,在 HT 中,数据绑定不分维度的,所以两者在实现上非常类似。代码下载地址:htt...
2018-03-19 09:05:11 761
原创 基于 HTML5 WebGL 的 3D 机房
前言用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了,这篇文章的主要目的是说明一下,3D 机房中的 eye 和 center 的问题,刚好在项目中用上了,好生思考了一番,最终觉得这个例子最符合我的要求,就拿来作为记录。效果图http://hightopo.com/demo/3DRoom/index.html这个 3D 机房的 Demo 做的还不错,比较美观,基础的交互也都满足,接下来看看...
2018-03-16 07:59:28 3223 2
基于 HTML5 WebGL 的 3D 机房
前言用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了,这篇文章的主要目的是说明一下,3D 机房中的 eye 和 center 的问题,刚好在项目中用上了,好生思考了一番,最终觉得这个例子最符合我的要求,就拿来作为记录。效果图 http://hightopo.com/demo/3DRoom/index.html这个 3D 机房的 Demo 做的还不错,比较美观,基础的交...
2018-03-16 07:48:50 391
原创 基于 HTML5 WebGL 的 3D 机房
前言用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了,这篇文章的主要目的是说明一下,3D 机房中的 eye 和 center 的问题,刚好在项目中用上了,好生思考了一番,最终觉得这个例子最符合我的要求,就拿来作为记录。效果图 http://hightopo.com/demo/3DRoom/index.html 这个 3D 机房的 Demo 做的还不错,比较美观,基础的交互也都满足,接...
2018-03-16 07:47:12 523
原创 快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型
前言3D 场景中的面不只有水平面这一个,空间是由无数个面组成的,所以我们有可能会在任意一个面上放置物体,而空间中的面如何确定呢?我们知道,空间中的面可以由一个点和一条法线组成。这个 Demo 左侧为面板,从面板中拖动物体到右侧的 3D 场景中,当然,我鼠标拖动到的位置就是物体放置的点,但是这次我们的重点是如何在斜面上放置模型。效果图代码生成创建场景dm = new ht.DataModel();/...
2018-03-13 09:30:26 1082
原创 快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型
前言3D 场景中的面不只有水平面这一个,空间是由无数个面组成的,所以我们有可能会在任意一个面上放置物体,而空间中的面如何确定呢?我们知道,空间中的面可以由一个点和一条法线组成。这个 Demo 左侧为面板,从面板中拖动物体到右侧的 3D 场景中,当然,我鼠标拖动到的位置就是物体放置的点,但是这次我们的重点是如何在斜面上放置模型。效果图 代码生成创建场景dm = new ht.DataModel();...
2018-03-13 07:57:20 680
快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型
前言3D 场景中的面不只有水平面这一个,空间是由无数个面组成的,所以我们有可能会在任意一个面上放置物体,而空间中的面如何确定呢?我们知道,空间中的面可以由一个点和一条法线组成。这个 Demo 左侧为面板,从面板中拖动物体到右侧的 3D 场景中,当然,我鼠标拖动到的位置就是物体放置的点,但是这次我们的重点是如何在斜面上放置模型。效果图代码生成创建场景dm = new ...
2018-03-13 07:45:26 310
原创 基于 HTML5 Canvas 的交互式地铁线路图
感觉目前地铁上的地铁线路图也不是很人性化,很多交互方面没有考虑到用户的需求?感觉总是有各种容易看串的信息,利用 html5 canvas 完成的这个交互式地铁线路图 Demo,如果地铁上的展示信息稍微有点交互会怎么样?不用忙着上车下车,轻轻一点,就能省去很多时间。
2018-03-05 06:11:38 3761 7
基于 HTML5 Canvas 的交互式地铁线路图
前言前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个,这篇文章记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现,希望能够帮到一些朋友。当然,如果有什么意见的可以直接跟我说,大家一起交流才会进步。效果图http:...
2018-03-05 05:59:35 413 1
原创 基于 HTML5 Canvas 的交互式地铁线路图
前言前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个,这篇文章记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现,希望能够帮到一些朋友。当然,如果有什么意见的可以直接跟我说,大家一起交流才会进步。效果图http://www.high...
2018-03-05 05:58:37 1165 1
ajax 全套安装软件包
2021-03-31
快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇
2018-03-16
快速开发基于 HTML5 网络拓扑图应用--入门篇(四)
2018-01-18
Web SCADA 电力接线系统图
2018-01-15
基于 HTML5 快速构建拓扑图1
2018-01-08
基于 HTML5 WebGL 的 3D 仓储管理系统
2017-11-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人