6 图扑软件

尚未进行身份认证

HT for Web 3D.HT for modern web and mobile app development.

等级
TA的排名 8k+

基于 HTML5 + WebGL 的太阳系 3D 展示系统

前言近年来随着引力波的发现、黑洞照片的拍摄、火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如《三体》、《流浪地球》、《星际穿越》等的传播普及,宇宙空间中那些原本遥不可及的事物离我们越来越近,人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度。站在更高的立足点上,作为人类这个物种中的一员,我们理所应当对我们生活的星球、所在的太阳系有一定的认识,对 8 大行星各自的运行轨道、质...

2019-12-04 16:37:46

基于 HTML5 WebGL 的 3D 挖掘机

前言在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求。如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因为这会帮助一个不了解这个机械的小白可以直观的了解机械的运行情况,以及机械的所有可能发生的动作,对于三一或者其它国内国外重工机械的公司能够有一个更好的展示或者推广。挖掘机,又称挖掘机械(excava...

2019-11-28 22:28:38

基于 HTML5 WebGL 构建智能城市 3D 场景

前言随着城市规模的扩大,传统的方式很难彻底地展示城市的全貌,但随着 3D 技术的应用,出现了 3D 城市群的方式以动态,交互式地把城市全貌呈现出来。配合智能城市系统,通过 Web 可视化的方式,使得城市管理者可以更及时地了解交通情况,城市消防,电力管理等方面的运行情况,做出处理。本 demo 使用HT for Web产品轻量化 HTML5/WebGL 建模的方案,传统的 智慧楼宇/楼宇...

2019-11-25 10:18:26

基于 HTML5 WebGL 的垃圾分类系统

前言垃圾分类,一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运,从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值,力争物尽其用。垃圾在分类储存阶段属于公众的私有品,垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源,垃圾分类搬运到垃圾集中点或转运站后成为没有排除性的公共资源。从国内外各城市对生活垃圾分类的方法来看,大致都是根据垃圾的成分、产生量...

2019-11-15 14:41:04

基于 HTML5 Canvas 的楼宇自控系统

前言楼宇自控是指楼宇中电力设备,如电梯、水泵、风机、空调等,其主要工作性质是强电驱动。通常这些设备是开放性的工作状态,也就是说没有形成一个闭环回路。只要接通电源,设备就在工作,至于工作状态、进程、能耗等,无法在线及时得到数据,更谈不上合理使用和节约能源。现在楼宇自控是将上述的电器设备进行在线监控,通过设置相应的传感器、行程开关、光电控制等,对设备的工作状态进行检测,并通过线路返回控制机房的中心...

2019-11-13 17:07:30

通过矩阵变化实现的 3D 模型自动布局

在数学中,矩阵是以行和列排列的数字,符号或表达式的矩形阵列,任何矩阵都可以通过相关字段的标量乘以元素。矩阵的主要应用是表示线性变换,即 f(x)= 4 x 等线性函数的推广。例如,旋转的载体在三维空间是一个线性变换,这可以通过一个表示旋转矩阵:如果v是一个列向量描述(只有一列的矩阵)的位置在空间中的点,该产品器 Rv 是列矢量描述旋转后该点的位置。两个变换矩阵的乘积是表示两个变换组成的矩阵。矩阵的...

2019-11-01 09:17:15

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

前言在数据量很大的 2D 场景下,要找到具体的模型比较困难,并且只能显示出模型的的某一部分,显示也不够直观,这种时候能快速搭建出 3D 场景就有很大需求了。但是搭建 3D 应用场景又依赖于通过 3ds Max 或 Maya 的专业 3D 设计师来建模,Unity 3D 引擎做图形渲染等,这对用户来说都是挑战!不过,HT 一站式的提供了从建模到渲染,包括和 2D 组件呈现和数据融合的一站式解决方案...

2019-10-30 11:33:38

基于HTML5 WebGL 将拓扑图和图表绘制在 3D 六面体上

突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开。我用 HT 实现了我的想法,代码一百多行,这么少的代码能实现这种效果我觉得还是牛的。先来看看效果图:这个例子最基础的就是最外层的盒子了,所以我们先来看看如何实现它:var box = new ht.CSGBox();dataModel.ad...

2019-10-29 11:53:36

基于 HTML5 Canvas 的电信机柜 U 位动态管理

前言U 是一种表示服务器外部尺寸的单位,是 unit 的缩略语,详细的尺寸由作为业界团体的美国电子工业协会(EIA)所决定。之所以要规定服务器的尺寸,是为了使服务器保持适当的尺寸以便放在铁质或铝质的机架上。机架上有固定服务器的螺孔,以便它能与服务器的螺孔对上号,再用螺丝加以固定好,以方便安装每一部服务器所需要的空间。规定的尺寸是服务器的宽(48.26cm=19 英寸)与高(4...

2019-10-28 10:08:24

基于 HTML5 WebGL 的 3D 模型斜面生成

前言3D 场景中的面不只有水平面这一个,空间是由无数个面组成的,所以我们有可能会在任意一个面上放置物体,而空间中的面如何确定呢?我们知道,空间中的面可以由一个点和一条法线组成。这个 Demo 左侧为面板,从面板中拖动物体到右侧的 3D 场景中,当然,我鼠标拖动到的位置就是物体放置的点,但是这次我们的重点是如何在斜面上放置模型。效果图:代码生成创建场景dm = new ht.DataMo...

2019-10-25 10:17:40

基于 HTML5 Canvas 实现的 TP-LINK 电信拓扑设备面板

前言今天我们以真实的 TP-LINK 设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动。先来目睹下最终的实现效果:http://www.hightopo.com/demo/blog_tplink_20170511/index.html代码实现TP-LINK面板我们从 TP-LINK 的设备面板开始,设备面板的示意图如下:显而易见,设备面板基本上能由 HT for Web...

2019-10-24 09:35:47

基于 HTML5 WebGL 的 3D 工控裙房系统

前言工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。中国工业物联网企业目前呈现两种发展形式并存状况:一方面是大型通讯、IT企业的布局;一方面是传统工业软件和工业网络企业自发地延伸,由产品提供商发展为方案供应商。什么叫做裙房?裙房是指附属于主高楼并与之连成一体的低层建筑。本文的 Demo 是针对于裙房做的,但是在工业监控系统中有很多雷同...

2019-10-23 11:17:32

基于HTML5的WebGL实现的2D3D迷宫小游戏

为了实现一个基于HTML5的场景小游戏,我采用了HT for Web来实现,短短200行代码,我就能实现用“第一人称”来操作前进后退上下左右,并且实现了碰撞检测。先来看下实现的效果:http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_collision或者http://v.youku.com/v_show/id_XMz...

2019-10-22 20:33:30

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

前言文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读。动态效果图http://www.hightopo.com/demo/GraphAnimation/index.html这个 Demo 是不断重复地设置文字的大小和透明度,这些英文字...

2019-10-21 08:52:05

分享数百个 HT 工业互联网的 2D 3D 可视化应用案例

过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化、2D/3D 化的项目在工业界应用落地,我们觉得有必要在此分享下过去一年,基于 HT 实施的数百个工业互联网 2D 3D 可视化应用案例,希望能激发行业和学术工作者对可视化的深度思考,为推进国内工业互联网发展出份薄力。数百个工业互联网2D/3D可视化案例集:...

2019-10-18 10:58:21

基于 HTML5 Canvas 的元素周期表的展示

前言之前在网上看到别人写的有关元素周期表的文章,深深的勾起了一波回忆,记忆里初中时期背的“氢氦锂铍硼,碳氮氧氟氖,钠镁铝硅磷,硫氯氩钾钙”、“养(氧)龟(硅)铝铁盖(钙),哪(钠)家(钾)没(镁)青(氢)菜(钛)”,高中时期记的质量守恒、元素守恒、原子守恒、电子守恒,时间过的飞快,转眼我们都已经这么大了。现在我用HT来实现它,HT 有 2D 拓扑和 3D 模型场景,两种形式我都实现了,...

2019-10-17 10:15:03

基于 HTML5 WebGL 实现的 3D “弹力”布局

分子力(molecular force),又称分子间作用力、范得瓦耳斯力,是指分子间的相互作用。当二分子相距较远时,主要表现为吸引力,这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用;当二分子非常接近时,则排斥力成为主要的,这是由于各分子的外层电子云开始重叠而产生的排斥作用。HT for Web 提供了弹力布局(也称为力导向布局)的功能,即根据节点之间存在互斥力...

2019-10-16 09:33:24

B/S 工业互联网 地铁行业

前言近几年,互联网与交通运输的融合,改变了交易模式,影响着运输组织和经营方式,改变了运输主体的市场结构、模糊了运营与非营运的界限,也更好的实现了交通资源的集约共享,同时使得更多依靠外力和企业推动交通信息化成为可能。互联网交通具有巨大的潜力、发展迅速、生态浩大,需要政府顺势而为,紧跟发展态势,加强引导、转变职能、创新政府管理与市场监管的模式。而城市轨道交通的投资体量巨大,一条线路动辄上百亿元,如...

2019-10-15 10:51:36

基于 HTML5 的计量站三维可视化监控系统 Web 组态工控应用

得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应!如本案例所示,是一个基于 HTML5 WebGL 技术实现的计量站三维可视化监控系统,在本案例中,具体宏观的展示一个油田站点的整体场景,然后点击可以进入内景看到油田计量站内景的具体情况,同时可以看到各...

2019-10-14 09:24:22

电信资源管理系统:基于 H5 叠加 OpenLayers3 GIS

前言通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能够涉及的一款应用。虽然这个 Demo 是结合 OpenLayers3 的,其实还可推广到与 ArcGIS、百度地图以及 GoogleMap 等众多 GIS 地图引擎融合。http://www...

2019-10-13 15:25:22

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 勤写标兵Lv2
    勤写标兵Lv2
    授予每个自然周发布4篇到6篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。