基于 HTML5 Canvas 的 3D 模型贴图问题
2017-12-06
阅读 8 分钟
3.1k之前注意到的一个例子，但是一直没有沉下心来看这个例子到底有什么优点，总觉得就是一个 list 列表，也不知道右边的 3d 场景放两个节点是要干嘛，今天突然想起来就仔细地看了一下这个例子的代码，实际操作中应该还是有用处的，就跟大家分享一下。
基于 HTML5 Canvas 的简易 2D 3D 编辑器
2017-12-03
阅读 8 分钟
7.7k不管在任何领域，只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的，今天我们不需要 3dMaxs 等设计软件，直接用 HT 就能自己写出一个 2D 3D 编辑器，实现这个功能我觉得成就感还是爆棚的，哈哈！只要你会想，能做，就能根据这个编辑器延展成 big thing！
基于 HTML5 WebGL 的 3D 仓储管理系统
2017-11-30
阅读 27 分钟
6.9k仓储管理系统（WMS）是一个实时的计算机软件系统，它能够按照运作的业务规则和运算法则，对信息、资源、行为、存货和分销运作进行更完美地管理，使其最大化满足有效产出和精确性的要求。从财务软件、进销存软件CIMS，从MRP、MRPII到ERP，代表了中国企业从粗放型管理走向集约管理的要求，竞争的激烈和对成本的要求使得管...
基于HTML5 Canvas 点击添加 2D 3D 机柜模型
2017-11-27
阅读 6 分钟
2.9k今天又返回好好地消化了一下我们的数据容器 DataModel，这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单，实际上结合了数据模型中非常重要的三个事件处理的部分：属性变化事件监听、选中变化事件监听以及数据模型变化事件监听。
基于 HTML5 WebGL 的 3D “弹力”布局
2017-11-22
阅读 5 分钟
5.4k分子力(molecular force)，又称分子间作用力、范得瓦耳斯力，是指分子间的相互作用。当二分子相距较远时，主要表现为吸引力，这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用；当二分子非常接近时，则排斥力成为主要的，这是由于各分子的外层电子云开始重叠而产生的排斥作用。
基于HTML5 Canvas 实现地铁站监控
2017-11-20
阅读 4 分钟
10.7k伴随国内经济的高速发展，人们对安全的要求越来越高。为了防止下列情况的发生，您需要考虑安装安防系统： 提供证据与线索：很多工厂银行发生偷盗或者事故相关机关可以根据录像信息侦破案件，这个是非常重要的一个线索。还有一些纠纷或事故，也可以通过录像很容易找出相关人员的责任。 人防成本高：现在很多地方想到安全...
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017-11-14
阅读 5 分钟
3.1k第一人称在 3D 中的用法要参考第一人称在射击游戏中的使用，第一人称射击游戏（FPS）是以第一人称视角为中心围绕枪和其他武器为基础的视频游戏类型 ; 也就是说，玩家通过主角的眼睛来体验动作。自从流派开始以来，先进的 3D 和伪 3D 图形已经对硬件发展提出了挑战，而多人游戏已经不可或缺。
根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局
2017-11-12
阅读 5 分钟
2.8k在数学中，矩阵是以行和列排列的数字，符号或表达式的矩形阵列，任何矩阵都可以通过相关字段的标量乘以元素。矩阵的主要应用是表示线性变换，即f（x）= 4 x等线性函数的推广。例如，旋转的载体在三维空间是一个线性变换，这可以通过一个表示旋转矩阵 [R ：如果v是一个列向量描述（只有一列的矩阵）的位置在空间中的点，...
玩转 HTML5 下 WebGL 的 3D 模型交并补
2017-11-09
阅读 6 分钟
4.4k建设性的立体几何具有许多实际用途，它用于需要简单几何对象的情况下，或者数学精度很重要的地方，几乎所有的工程 CAD 软件包都使用 CSG（可以用于表示刀具切削，以及零件必须配合在一起的特征）。CSG 是 Constructive Solid Geometry 建模技术的简称，通过裁剪 subtract、融合 union 和相交 intersect 的运算，组合出复...
基于HTML5 Canvas的CSG构造实体几何书架
2017-11-08
阅读 6 分钟
3kCSG 构造实体几何这个概念在工业水利水电施工上、游戏上已经有很多人使用了，最简单的实体表示叫作体元，通常是形状简单的物体，如立方体、圆柱体、棱柱、棱锥、球体、圆锥等。根据每个软件包的不同这些体元也有所不同，在一些软件包中可以使用弯曲的物体进行 CSG 处理，在另外一些软件包中则不支持这些功能。构造物体就...
基于HTML5 Canvas的工控SCADA模拟飞机飞行
2017-11-01
阅读 6 分钟
2.7k昨天看到一篇文章说是学习如何开飞机的，然后我就想，如果我也可以开飞机那就好玩了，每个人小时候都想做飞行员！中国飞行员太难当了，再说也不轻易让你开飞机！后来我就想如果能用 HT 开飞机那就是真的有趣了，哈哈，这个实现的效果还是很不错的，可以让你满足一下开飞机的虚荣心偷笑Demo 地址： [链接]来看下具体实现...
基于HTML5及WebGl下生成的json格式的工控SCADA风机叶轮旋转
2017-10-27
阅读 3 分钟
3.3k突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个盒子一定要能打开。我用HT实现了我的想法，代码一百多行，这么少的代码能实现这种效果我觉得还是牛的。
基于HTML5 WebGL实现 json工控风机叶轮旋转
2017-10-26
阅读 3 分钟
3.5k突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个盒子一定要能打开。我用HT实现了我的想法，代码一百多行，这么少的代码能实现这种效果我觉得还是牛的。
基于HTML5和WebGL的碰撞测试
2017-10-20
阅读 5 分钟
3.1k这是公司大神写的一个放官网上给用户学习的例子，我一开始真的不知道这是在干嘛，就只是将三个形状图元组合在一起，然后可以同时旋转、放大缩小这个三个图形，点击“Animate”就能让中间的那一个图元单独绕着某一个点旋转，表单最上方的“Axis”真的完全不知道拿来干嘛用的，觉得好累赘，而且是官网的demo，也没有解释。。。...
基于HTML5和WebGL的3D网络拓扑结构图
2017-10-17
阅读 5 分钟
5k现在，3D模型已经用于各种不同的领域。在医疗行业使用它们制作器官的精确模型；电影行业将它们用于活动的人物、物体以及现实电影；视频游戏产业将它们作为计算机与视频游戏中的资源；在科学领域将它们作为化合物的精确模型；建筑业将它们用来展示提议的建筑物或者风景表现；工程界将它们用于设计新设备、交通工具、结构...
基于 HTML5 WebGL 的 3D 网络拓扑图
2017-06-30
阅读 8 分钟
5.8k在数据量很大的2D 场景下，要找到具体的模型比较困难，并且只能显示出模型的的某一部分，显示也不够直观，这种时候能快速搭建出 3D 场景就有很大需求了。但是搭建 3D 应用场景又依赖于通过 3ds Max 或 Maya 的专业 3D 设计师来建模，Unity 3D 引擎做图形渲染等，这对用户来说都是挑战！不过，HT 一站式的提供了从建模到...
基于HTML5 Canvas实现用户交互
2017-05-23
阅读 5 分钟
4.1k很多人都有这样的疑问，基于HTML5 Canvas实现的元素怎么和用户进行交互？在这里我们用到HT for Web（[链接]）写了个Demo进行示例。
基于HTML5快速搭建TP-LINK电信拓扑设备面板
2017-05-18
阅读 8 分钟
3.1k今天我们以真实的TP-LINK设备面板为模型，完成设备面板的搭建，和指示灯的闪烁和图元流动。 先来目睹下最终的实现效果：[链接] 1、TP-LINK面板 我们从TP-LINK的设备面板开始，设备面板的示意图如下： 面板基本上能由HT for Web（[链接]）的基本图形（rect、circle、oval等）构成，而中间的接口需要用自定义图形来解...
HTML5 技术在风电、光伏等新能源领域的应用
2017-02-13
阅读 7 分钟
4.9k随着新一轮工业革命兴起，应对气候变化日益成为全球共识，能源技术正在成为引领能源产业变革、实现创新驱动发展的源动力。从全球到中国，以风能、光伏发电为代表的新能源产业发展迅速，可再生能源发电与现代电网的融合成为了世界能源可持续转型的核心，发电技术继续沿着大规模、高效率和低成本方向持续进步，中国在风能...
基于 HTML5 的 Web SCADA 报表
2016-12-27
阅读 6 分钟
5.1k最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求。一个完整的报表，一般包含了筛选操作区、表格、Chart、展板等多种元素，而其中的数据表格是最常用的控件。在以往的工业项目中，所有的表格看起来千篇一律，就是通过数字和简单的背景颜色变化来展示相关信息。但是现在通过各种移动 App 和 Web 应用的熏陶...
基于HTML5 Canvas 实现矢量工控风机叶轮旋转
2016-10-18
阅读 7 分钟
4.3k之前在拓扑上的应用都是些静态的图元，今天我们将在拓扑上设计一个会动的图元——叶轮旋转。 先看看最后我们实现的效果：[链接] 我们先来看下这个叶轮模型长什么样 从模型上看，这个叶轮模型有三个叶片，每一个叶片都是不规则图形，显然无法用上我们HT for Web的基础图形来拼接，那么我们该怎么做呢？很简单，在HT for Web...
数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇
2016-09-30
阅读 3 分钟
6.4k《数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇》里提到 HT 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果，例如 [链接] 这个 3D 电信机房监控例子整个都是通过 HT 提供的 API 构建而成：
快速开发基于 HTML5 网络拓扑图应用
2016-09-27
阅读 5 分钟
11.9k该例子展示了如何构建两个节点、一条连线、以及一个 Group 的组合效果。结合 《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型，以下为构建上图界面效果的模型代码部分：
网络拓扑图上文本的巧妙应用
2016-09-26
阅读 4 分钟
4.4k在前端网页设计中，文本是重要的组成部分，那么在网络拓扑图中也是一样的，文本在网络拓扑图上最基本的显示功能之一，在不同的应用场景下，会有不同的需求。但是不同的需求也逃不过一些基础设置，如位置、旋转、字体、颜色等需求。接下来我们就来详细聊聊 HT for Web 中文本的相关应用。
电信网络拓扑图自动布局之曲线布局
2016-09-19
阅读 12 分钟
4.2k在前面《电信网络拓扑图自动布局之总线》一文中，我们重点介绍了自定义 EdgeType 的使用，概括了实现总线效果的设计思路，那么今天话题是基于 HT for Web 的曲线布局（ShapeLayout）。
电信网络拓扑图自动布局之总线
2016-09-05
阅读 9 分钟
4.3k在前面《电信网络拓扑图自动布局》一文中，我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识，但是都没有深入地描述各种自动布局的用法，我们今天在这边就重点介绍总线的具体实现方案。
数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
2016-08-26
阅读 4 分钟
6.4k《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用，本文将对 HT 的 3D 功能做个综合性的介绍，以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用、水务燃气 SCADA 监控应用及智能楼宇等应用场景。
电信网络拓扑图自动布局
2016-08-22
阅读 2 分钟
9.6k在电信网络拓扑图中，很经常需要用到自动布局的功能，在大数据的层级关系中，通过手工一个一个摆放位置是不太现实的，工作量是相当大的，那么就有了自动布局这个概念，来解放布局的双手，让网络拓扑图能够布局出一个优美的图案，当然在一些复杂的布局中，光有自动布局还是不行的，还是需要手工地做些相应的调整，才能让...
数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
2016-08-10
阅读 9 分钟
14.3kHT 是啥：Everything you need to create cutting-edge 2D and 3D visualization.
HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
2016-08-08
阅读 6 分钟
7.5kHT for Web 作为逻辑拓扑图形组件自身没有 GIS 功能，但可以与各种 GIS 引擎即其客户端组件进行融合，各取所长实现逻辑拓扑和物理拓扑的无缝融合，本章将具体介绍 HT for Web 与开发免费的 OpenLayers 地图结合应用的关键技术点，该文介绍的结合的原理，其实还可推广到与 ArcGIS、百度地图以及 GoogleMap 等众多 GIS 地...