- 综合排序
- 最热优先
- 最新优先
- 来自专栏HT
基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控
WebGL 建模的方案，实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果。 预览地址：基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控 http://www.hightopo.com/demo/ht-smart-building/ 界面简介及效果预览 界面通过 2d 图纸叠加在 3d 场景上来实现 2d 界面 与 3d 场景的融合，2d 界面通过自动布局的机制实现了手机端与电脑端的响应式呈现。 5. 3d 镜头推进代码分析 3d 场景中视野的推进后退都是通过 HT api 提供的修改 eye 以及 center 的数值方法来实现，通过不断调用 setEye 以及 setCenter 方法来达到修改视角的目的 ，智慧校园等场景监控之后设备可视化，资产可视化带给我们的直观性。
1.4K20发布于 2019-09-29 - 来自专栏HT
基于 WebGL 的 HTML5 楼宇自控 3D 可视化监控
WebGL 建模的方案，实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果。 预览地址：基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控 http://www.hightopo.com/demo/ht-smart-building/ 界面简介及效果预览 界面通过 2d 图纸叠加在 3d 场景上来实现 2d 界面 与 3d 场景的融合，2d 界面通过自动布局的机制实现了手机端与电脑端的响应式呈现。 5. 3d 镜头推进代码分析 3d 场景中视野的推进后退都是通过 HT api 提供的修改 eye 以及 center 的数值方法来实现，通过不断调用 setEye 以及 setCenter 方法来达到修改视角的目的 ，智慧校园等场景监控之后设备可视化，资产可视化带给我们的直观性。
1.7K20发布于 2019-09-29 - 来自专栏HT
基于 HTML5 WebGL 的发动机 3D 可视化系统
为了解决这些行业痛点，本篇文章采用 Hightopo 的 HT for Web 产品实现了一个发动机设备 3D 可视化案例。 系统预览 预览地址：基于 HTML5 WebGL 的发动机 3D 可视化系统 场景搭建 发动机模型是设计师通过 3ds Max 建模，然后导出 obj 与 mtl 文件，在 HT 中解析 obj 与 * (t * t * (((BACK_CONST *= (1.525)) + 1) * t - BACK_CONST)); } return .5 * ((t -= 2) * t * ( 而且比起普通的工业动画，Web 上的可视化系统展示内容更丰富、自由度更高，后续需求更改也更为灵活、成本更低。 有兴趣可以参考我们另一个案例《基于 HTML5 WebGL + WebVR 的 3D 虚拟现实可视化培训系统》。
1.6K10发布于 2020-03-19 - 来自专栏行业科技知识分享
基于 HTML5 WebGL 的发动机 3D 可视化系统
为了解决这些行业痛点，本篇文章采用 Hightopo 的 HT for Web 产品实现了一个发动机设备 3D 可视化案例。 Easing.easeOutStrong = function (t) { var BACK_CONST = 1.70158; if ((t *= 2) < 1) { return .5 * (t * t * (((BACK_CONST *= (1.525)) + 1) * t - BACK_CONST)); } return .5 * ((t -= 2) * t * ( 而且比起普通的工业动画，Web 上的可视化系统展示内容更丰富、自由度更高，后续需求更改也更为灵活、成本更低。 有兴趣可以关注我，下一期小编将给大家带来另一个基于 HTML5 WebGL + WebVR 的 3D 虚拟现实可视化培训系统 的案例。更多有趣的工业可视化案例可至图扑官网进行了解~
1.3K30发布于 2020-06-15 - 来自专栏HT
基于HTML5的WebGL呈现A星算法的3D可视化
http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现， javascript-astar 的javascript实现，其实作者也有个不错的2D例子实现 http://www.briangrinstead.com/files/astar/ ，只不过觉得所有A*算法的可视化实现都是平面的不够酷 ，另外还有不少参数需要调节控制，还是值得好好搞个全面的Demo，先上张2D和3D例子的对照图。 label: 'Allow Diagonal' } } ], [0.1, 0.1]); } 只从iOS8支持WebGL后在移动终端上测试3D iOS系统下呈现和算法都挺流畅，http://v.youku.com/v_show/id_XODMzOTU1Njcy.html，当然这个小例子数据量也不大，本质其实还是2D的最短路径算法，并非真正意义的3D
1.3K80发布于 2018-01-03 - 来自专栏HT
H5 + WebGL 实现的地铁站 3D 可视化系统
前言 工业互联网，物联网，可视化等名词在我们现在信息化的大背景下已经是耳熟能详，日常生活的交通，出行，吃穿等可能都可以用信息化的方式来为我们表达，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示了一个地铁站的现实场景，包括地铁的实时运行情况 本篇文章通过对地铁站可视化场景的搭建，动画代码的实现，交互模式的原理解析，以及主要功能点的实现进行阐述，帮助我们了解如何使用 HT 实现一个简单的地铁站可视化。 预览地址：基于 HTML5 WebGL 的地铁站 3D 可视化系统 http://www.hightopo.com/demo/ht-subway/ 界面简介及效果预览 地铁运行效果 ? 可视化系统则是一个很好的展现，HT 的轻量化，数据的可视化，机器的可视化，资产的管理化帮助我们更好的监控。
1K20发布于 2019-11-12 - 来自专栏HT
基于 HTML5 WebGL 的地铁站 3D 可视化系统
前言 工业互联网，物联网，可视化等名词在我们现在信息化的大背景下已经是耳熟能详，日常生活的交通，出行，吃穿等可能都可以用信息化的方式来为我们表达，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示了一个地铁站的现实场景，包括地铁的实时运行情况 本篇文章通过对地铁站可视化场景的搭建，动画代码的实现，交互模式的原理解析，以及主要功能点的实现进行阐述，帮助我们了解如何使用 HT 实现一个简单的地铁站可视化。 预览地址：基于 HTML5 WebGL 的地铁站 3D 可视化系统 http://www.hightopo.com/demo/ht-subway/ 界面简介及效果预览 地铁运行效果 ? 可视化系统则是一个很好的展现，HT 的轻量化，数据的可视化，机器的可视化，资产的管理化帮助我们更好的监控。
1.1K20发布于 2019-09-29 - 来自专栏hightopo
基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控 顶
WebGL 建模的方案，实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果。 预览地址：基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控 http://www.hightopo.com/demo/ht-smart-building/ 界面简介及效果预览 界面通过 2d 图纸叠加在 3d 场景上来实现 2d 界面 与 3d 场景的融合，2d 界面通过自动布局的机制实现了手机端与电脑端的响应式呈现。 5. 3d 镜头推进代码分析 3d 场景中视野的推进后退都是通过 HT api 提供的修改 eye 以及 center 的数值方法来实现，通过不断调用 setEye 以及 setCenter 方法来达到修改视角的目的 ，智慧校园等场景监控之后设备可视化，资产可视化带给我们的直观性。
1.5K30发布于 2019-05-09 - 来自专栏HT
基于 HTML5 WebGL 的加油站 3D 可视化监控
SCADA 系统的推广使用，大大提高了我国加油站的监控效率，本文所讲的则是通过对加油站的可视化建模，结合 HT 的 3D 可视化以及 2D 监控面板来实现对加油站的可视化监控。 三维可视化监控系统是将三维的可视化技术和数据采集与监控技术融合，充分发挥了两种技术的核心优势，并通过数据库进行数据共享，共同构成一种全新的 SCADA 系统。 数据采集与监控系统通过各类的传感器实时采集监控对象的各类数据，上传数据库并实时共享给三维可视化技术搭建的监控对象的三维可视化模型及场景，最后通过监控系统直观的展示出来，极大的提高了监控对象数据的表达能力和工作人员的工作效率 预览地址：基于 HTML5 WebGL 的加油站 3D 可视化监控 http://www.hightopo.com/demo/gas-station-demo/ 界面效果预览 视频监控效果 ? 5.优化场景 当 3d 场景中点或者面的数量较多时，3d 面板，公告板部分较多时，ht 中有几种优化策略可以进行优化，我们知道 3d 场景中的所有模型都是由三角面构成的，而三角面又是由三个顶点构成的，所以如果场景中的点或者面比较多的时候场景会出现一定的卡顿
1.3K20发布于 2019-09-29 - 来自专栏HT
基于 HTML5 + WebGL 的无人机 3D 可视化系统
本系统则是通过 Hightopo 的 HT for Web 产品来搭建的一款 无人机 3D 可视化系统，通过对无人机及其信息的全景展示来模拟无人机状态的监控。 与此同时改变图形在 3D 场景中位置来实现各形态的无人机合为一体以及将对应按钮分离。 这里的线框是根据模型的轮廓生成的，通过 3D 引擎自动计算描绘，非常便捷。 与此同时，工业互联网的概念也随之诞生，将人、数据、设备联系到了一起，而可视化界面则可以很好的将数据和设备进行展示，方便管理的同时也更加安全、高效。 HT for Web 提供了 2D、3D 两种模式的可视化方式，它功能强大的同时也易于学习使用，有兴趣的同学也可以来体验一下。
1.2K10发布于 2020-02-11 - 来自专栏hightopo
基于 HTML5 的工业互联网 3D 可视化应用
因此，工业生产可视化系统是工业制造业的最佳选择。 工业生产可视化是将虚拟现实技术有机融入了工业监控系统，系统展现界面以生产厂房的仿真场景为基础，对各个工段、重要设备的形态都进行复原，作业流转状态可以在厂房视图当中直接显示。 在单体设备视图中，机械设备的运行模式直接以仿真动画的形式展现，通过图像、三维动画以及计算机程控技术与实体模型相融合，实现对设备的可视化表达，使管理者对其所管理的设备有形象具体的概念。 3D 场景搭建 要将工业生产可视化，3D 的展现是必不可少，HT 需要创建一个 3D 组件，搭建靠 2 行代码来实现： var g3d = new ht.graph3d.Graph3dView();// 的可视化应用非常广泛，除了裙房监控系统，工业设备比如变压器的数据监控以及智能楼宇外还有很多很多，甚至可以运用到农业以及城市规划上......最后，有兴趣的朋友可以私信或留言交流一下技术或者交个朋友。
2.1K20发布于 2019-03-12 - 来自专栏HT
基于 HTML5 WebGL 的挖掘机 3D 可视化应用
前言 在工业互联网以及物联网的影响下，人们对于机械的管理，机械的可视化，机械的操作可视化提出了更高的要求。 所以该系统实现了对挖掘机的 3D 可视化，在传统行业一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，而且都是 2D 面板部分数据的监控，从后台获取数据前台显示数据，但是对于挖掘机本身来说 ，挖掘机的模型，挖掘机的动作，挖掘机的运行可视化却是更让人眼前一亮的，所以该系统对于挖机的 3D 模型做出了动作的可视化，大体包括以下几个方面： 前进后退 -- 用户可以通过键盘 wasd 实现前后左右 本篇文章通过对挖掘机可视化场景的搭建，挖机机械动作代码的实现进行阐述，帮助我们了解如何使用 HT 实现一个挖掘机的可视化。 预览地址：基于 HTML5 WebGL 的挖掘机 3D 可视化应用 http://www.hightopo.com/demo/ht-excavator/ 界面效果预览 挖机机械运动效果 ?
93110发布于 2019-09-29 - 来自专栏行业科技知识分享
智慧大坝 3D 可视化
而随着信息化的发展，结合物联网、5G、大数据等新兴技术形式的智慧水电站、智慧大坝应用，也给传统水利行业提供更大的价值体现，提升产业全面感知、共享整合、智慧管理。 今天将利用 Hightopo 的 HT 产品搭建出一个水墨风的山水大坝 3D 可视化场景。 预览-min.gif 系统分析 HT 三维可视化技术采用 B/S 架构，经过模型轻量化处理后，用户无需再花费高价钱去采购高性能的图形工作站来支撑三维可视化系统。 线条监测-min.gif 视频监控数据深度集成 HT 是基于 HTML5 标准的组件库，可以无缝结合 HTML5 各项多媒体功能，支持集成各类视频资源形成统一的视频访问平台，可在二三维态势地图上标注摄像头对象 图扑软件可视化赋能水利发电可视化、智慧发电站可视化、智慧光伏可视化等等产业都更加适应时代发展。
2.6K30发布于 2021-08-13 - 来自专栏hightopo
基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化
前言 在大数据盛行的现在，大屏数据可视化也已经成为了一个热门的话题。大屏可视化可以运用在众多领域中，比如工业互联网、医疗、交通、工业控制等等。 scene.json 是 3D 场景的内容，大部分模型都是通过 3dMax 建模生成的，该建模工具可以导出 obj 与 mtl 文件，在 HT 中可以通过解析 obj 与 mtl 文件来生成 3d 场景中的所有复杂模型 下 g3d.addToDOM(); // 将 2D 组件加入到 3D 组件的根 div 下，父子 DOM 事件会冒泡，这样不会影响 3D 场景的交互 g2d.addToDOM(g3d.getView( 矢量不仅可以用在 2D 图纸里，还可以用在 3D 贴图中，在我们 3D 场景中，以下截图的几个面板也是使用矢量实现， ? 四、其他细节优化 在点击 2D 有点到图元像素时，我们希望不触发 3D 的交互，比如拖动表格滚动时，3D 场景也会跟着旋转。
2.5K20发布于 2019-09-02 - 来自专栏hightopo
基于 HTML5 WebGL 的地铁站 3D 可视化系统 顶
的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示了一个地铁站的现实场景，包括地铁的实时运行情况 本篇文章通过对地铁站可视化场景的搭建，动画代码的实现，交互模式的原理解析，以及主要功能点的实现进行阐述，帮助我们了解如何使用 HT 实现一个简单的地铁站可视化。 预览地址：基于 HTML5 WebGL 的地铁站 3D 可视化系统 http://www.hightopo.com/demo/ht-subway/ 界面简介及效果预览 地铁运行效果 ? HT 来绘制，这样会比 obj 模型更轻量化，所以大部分简单的模型都是采用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案，具体的解析代码如下： // 分别为 obj 文件地址， 可视化系统则是一个很好的展现，HT 的轻量化，数据的可视化，机器的可视化，资产的管理化帮助我们更好的监控。
1.5K30发布于 2019-05-10 - 来自专栏code秘密花园
如何1人5天开发完3D数据可视化大屏
相信从事过数据可视化开发的你对大屏并不陌生，那么开发一个酷炫的大屏一定是很多数据可视化开发者想要做的事情。 我们使用three.js，大约一周的时间开发出了一个酷炫的数据可视化大屏： ? 由于篇幅问题，整篇会分为两个部分，围绕以下几个核心分享： 【一】 地球的实现 地球可点击的交互逻辑 飞线的实现 【二】 平面地图的实现 柱体的实现 性能优化 地图相关问题 涉及到的知识点： GLSL：着色器在各3D 2.2 点击交互 可视化不仅仅是静态的图形数据，还需要与人交互。 所以这个酷炫的地球就需要支持选中国家并且获取到国家名称。 交互逻辑 地球的交互逻辑如下： 监听到鼠标点击 填充整个画布为黑色 设置uniforms.flag.value = 0; 手动进行一次render（需要注意在这之前要隐藏其他所有3D对象） ? 下一章将会讲述传统3d平面地图的绘制方法和我们在实现地图相关产品时的其他注意事项。 点赞、在看、分享 支持作者 ❤️
4.1K41发布于 2020-10-30 - 来自专栏hightopo
基于 HTML5 WebGL 的挖掘机 3D 可视化应用 顶
前言 在工业互联网以及物联网的影响下，人们对于机械的管理，机械的可视化，机械的操作可视化提出了更高的要求。 所以该系统实现了对挖掘机的 3D 可视化，在传统行业一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，而且都是 2D 面板部分数据的监控，从后台获取数据前台显示数据，但是对于挖掘机本身来说 ，挖掘机的模型，挖掘机的动作，挖掘机的运行可视化却是更让人眼前一亮的，所以该系统对于挖机的 3D 模型做出了动作的可视化，大体包括以下几个方面： 前进后退 -- 用户可以通过键盘 wasd 实现前后左右 本篇文章通过对挖掘机可视化场景的搭建，挖机机械动作代码的实现进行阐述，帮助我们了解如何使用 HT 实现一个挖掘机的可视化。 预览地址：基于 HTML5 WebGL 的挖掘机 3D 可视化应用 http://www.hightopo.com/demo/ht-excavator/ 界面效果预览 挖机机械运动效果 ?
1.7K50发布于 2019-05-14 - 来自专栏HT
基于 HTML5 WebGL + VR 的 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中，随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中，尤其是高清时代的来临，更加快了网络摄像机的发展和应用。 ? 围绕如何提高、管理和有效利用前端设备采集的海量信息为公共安全服务，特别是在技术融合大趋势下，如何结合当前先进的视频融合，虚实融合、三维动态等技术，实现三维场景实时动态可视化监控，更有效的识别、分析、挖掘海量数据的有效信息服务公共应用 ，已成为视频监控平台可视化发展的趋势和方向。 以下是项目地址：基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型 效果预览 整体场景-摄像头效果图 ? 局部场景-摄像头效果图 ? 可以将该锥体看成由 5 个顶点，6 个三角形组成，具体图如下： ?
1.6K40发布于 2019-12-02 - 来自专栏hightopo
基于 HTML5 的 WebGL 3D 档案馆可视化管理系统
本文以当前流行的 H5 技术为主，为现代智慧档案馆提供一套 WEB 解决方案。 ? Graph3dView 加载 3D 场景 Graph3dView 是 HT 组件中加载 3D 模型的拓扑组件，RelativeLayout 则是 HT 提供的 UI 解决方案，UI 组件中提供 HTView 但是并不能直接将图元拖拽到 3D 场景中，实现思路是： 在拖拽时获取拖拽的图元信息 拖拽到对应位置时显示可摆放位置 结束拖拽后在对应位置创建对应的 3D 模型 对应代码实现如下： 拖拽时获取图元信息 g3dView.getView _focusData); }); 档案柜虚化效果实现 上面我们已经实现了档案袋拖拽至 3D 场景的效果，但是我们可以发现档案袋模型远小于柜子，要将档案袋摆放到正确的位置并不是那么容易。 这里只是简单地为大家提供了一个基于 HTML5 WEBGL 的 3D 解决方案。同样原理，智能楼宇、智能机房、智能城市也可以基于此来实现。 ?
1.7K10发布于 2019-03-12 - 来自专栏行业科技知识分享
基于 H5和 3D WebVR 的可视化虚拟现实培训系统
前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中，信息的分享与虚实的结合已经成为大势所趋，5G 是新一代信息通信技术升级的重要方向，工业互联网是制造业转型升级的发展趋势 在今年苹果的发布会上，相信大家都知道苹果的 5G 手机没有问世，说明 5G 的应用和发展还处在快速发展的阶段，但是手机结合 AR 功能的 APP 已经早就问世，5G 的速度加上 AR, VR 的身临其境 设计师知道这些配置规则之后便可以通过可视化编辑器进行不同零件的配置，这样程序方面只需要写一套通用的逻辑就可以对不同的设备进行拆解和还原。 目前随着 5G 网络的逐渐普及，VR/AR 产业正逐步走向复苏，市场热情在逐渐升温，虚拟现实游戏、虚拟现实现场直播等都是 5G 在 VR/AR 上的具体应用。 程序手机端运行截图： 2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集，在这里你能发现许多新奇的实例，也能发掘出不一样的工业互联网：《分享数百个 HT 工业互联网 2D 3D 可视化应用案例
1.2K00发布于 2020-06-16
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号