这是公司大神写的一个放官网上给用户学习的例子，我一开始真的不知道这是在干嘛，就只是将三个形状图元组合在一起，然后可以同时旋转、放大缩小这个三个图形，点击“Animate”就能让中间的那一个图元单独绕着某一个点旋转，表单最上方的“Axis”真的完全不知道拿来干嘛用的，觉得好累赘，而且是官网的demo，也没有解释。。。...

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

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

很多人都有这样的疑问，基于HTML5 Canvas实现的元素怎么和用户进行交互？在这里我们用到HT for Web（[链接]）写了个Demo进行示例。

今天我们以真实的TP-LINK设备面板为模型，完成设备面板的搭建，和指示灯的闪烁和图元流动。 　　先来目睹下最终的实现效果：[链接] 1、TP-LINK面板 我们从TP-LINK的设备面板开始，设备面板的示意图如下： 面板基本上能由HT for Web（[链接]）的基本图形（rect、circle、oval等）构成，而中间的接口需要用自定义图形来解...

随着新一轮工业革命兴起，应对气候变化日益成为全球共识，能源技术正在成为引领能源产业变革、实现创新驱动发展的源动力。从全球到中国，以风能、光伏发电为代表的新能源产业发展迅速，可再生能源发电与现代电网的融合成为了世界能源可持续转型的核心，发电技术继续沿着大规模、高效率和低成本方向持续进步，中国在风能...

最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求。一个完整的报表，一般包含了筛选操作区、表格、Chart、展板等多种元素，而其中的数据表格是最常用的控件。在以往的工业项目中，所有的表格看起来千篇一律，就是通过数字和简单的背景颜色变化来展示相关信息。但是现在通过各种移动 App 和 Web 应用的熏陶...

之前在拓扑上的应用都是些静态的图元，今天我们将在拓扑上设计一个会动的图元——叶轮旋转。 先看看最后我们实现的效果：[链接] 我们先来看下这个叶轮模型长什么样 从模型上看，这个叶轮模型有三个叶片，每一个叶片都是不规则图形，显然无法用上我们HT for Web的基础图形来拼接，那么我们该怎么做呢？很简单，在HT for Web...

《数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇》里提到 HT 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果，例如 [链接] 这个 3D 电信机房监控例子整个都是通过 HT 提供的 API 构建而成：

该例子展示了如何构建两个节点、一条连线、以及一个 Group 的组合效果。结合 《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型，以下为构建上图界面效果的模型代码部分：

在前端网页设计中，文本是重要的组成部分，那么在网络拓扑图中也是一样的，文本在网络拓扑图上最基本的显示功能之一，在不同的应用场景下，会有不同的需求。但是不同的需求也逃不过一些基础设置，如位置、旋转、字体、颜色等需求。接下来我们就来详细聊聊 HT for Web 中文本的相关应用。

在前面《电信网络拓扑图自动布局之总线》一文中，我们重点介绍了自定义 EdgeType 的使用，概括了实现总线效果的设计思路，那么今天话题是基于 HT for Web 的曲线布局（ShapeLayout）。

在前面《电信网络拓扑图自动布局》一文中，我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识，但是都没有深入地描述各种自动布局的用法，我们今天在这边就重点介绍总线的具体实现方案。

《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用，本文将对 HT 的 3D 功能做个综合性的介绍，以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用、水务燃气 SCADA 监控应用及智能楼宇等应用场景。

在电信网络拓扑图中，很经常需要用到自动布局的功能，在大数据的层级关系中，通过手工一个一个摆放位置是不太现实的，工作量是相当大的，那么就有了自动布局这个概念，来解放布局的双手，让网络拓扑图能够布局出一个优美的图案，当然在一些复杂的布局中，光有自动布局还是不行的，还是需要手工地做些相应的调整，才能让...

HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization.

HT for Web 作为逻辑拓扑图形组件自身没有 GIS 功能，但可以与各种 GIS 引擎即其客户端组件进行融合，各取所长实现逻辑拓扑和物理拓扑的无缝融合，本章将具体介绍 HT for Web 与开发免费的 OpenLayers 地图结合应用的关键技术点，该文介绍的结合的原理，其实还可推广到与 ArcGIS、百度地图以及 GoogleMap 等众多 GIS 地...

我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）》主要讲解了如何搭建一个实时数据通讯服务器，客户端与服务端是如何通讯的，相信通过上一篇的讲解，再配合上数据库的数据储存，我们就可以实现一个简易版的 Web 聊天工具了，有空的朋友可以自己尝试下实现，那么我们今天的主要内容真的是实现 We...

今天没有延续上一篇讲的内容，穿插一段小插曲，WebSocket 实时数据通讯同步的问题，今天我们并不是很纯粹地讲 WebSocket 相关知识，我们通过 WebGL 3D 拓扑图来呈现一个有趣的 Demo。接下来我们就看看这个实时数据通讯是一个什么样的套路。

HT for Web 提供了多种基础类型供用户建模使用，不同于传统的 3D 建模方式，HT 的建模核心都是基于 API 的接口方式，通过 HT 预定义的图元类型和参数接口，进行设置达到三维模型的构建。接下来我们就来谈谈预定义的 3D 模型及参数设置。

HTML5 中的 Canvas 对文本的渲染（fillText，strokeText）性能都不太好，比如设置字体（font）、文本旋转（rotation），如果绘制较多的文本时，一些交互操作会手动很大的影响，操作起来没那么顺畅，体验将会极其差，这不是我们想要的结果，再进一步和图片的绘制进行比较比较，你会发现，绘制图片和绘制文本在性能上不是...

先来介绍下 media，确切的说应该是 CSS media queries（CSS 媒体查询），媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。

矢量可无级缩放，界面不失真不模糊描述矢量的文本内容远比图片小得多目前各种window.devicePixelRatio不一致的设备，矢量可能是唯一彻底的解决方案业务数据绑定提起矢量一般都会想到SVG，但这是个坑人的玩意儿，这么多年就没见一个完善的实现者，浏览器实现千差万别，高级属性根本不能玩，Adobe SVG Viewer好多年前就停...

在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年，早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案，在HTML5流行前VML和SVG算是真正纯种Web方案也是有不少应用，近些年随着HTML5的流行，加上移动终端对HTML5支持的普及，越来越多新项目开始采用真正纯...

QuadTree四叉树顾名思义就是树状的数据结构，其每个节点有四个孩子节点，可将二维平面递归分割子区域。QuadTree常用于空间数据库索引，3D的椎体可见区域裁剪，甚至图片分析处理，我们今天介绍的是QuadTree最常被游戏领域使用到的碰撞检测。采用QuadTree算法将大大减少需要测试碰撞的次数，从而提高游戏刷新性能，本文例...

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，最终例子效果：

js1k.com收集了小于1k的javascript小例子，里面有很多很炫很酷的游戏和特效，今年规则又增加了新花样，传统的classic类型基础上又增加了WebGL类型，以及允许增加到2K的++类型，多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。

在HTML中，在文件上传的过程中，很多情况都是没有任何的提示，这在体验上很不好，用户都不知道到时有没有在上传、上传成功了没有，所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条，矢量在《矢量Chart图表嵌入HTML5网络拓扑图的应用》一文中已经讲述了关于setCompType()方法的应用，今天我们用s...

最近搞个游戏遇到最短路径的常规游戏问题，一时起兴基于HT for Web写了个A算法的WebGL 3D呈现，算法基于开源 [链接] 的javascript实现，其实作者也有个不错的2D例子实现 [链接] ，只不过觉得所有A算法的可视化实现都是平面的不够酷，另外还有不少参数需要调节控制，还是值得好好搞个全面的Demo，先上张2D和3D例子的对照图。

知道了汉诺塔的规则和算法，现在就开始创建元素。用HT for Web（[链接]）现有的3D模板创建底盘和3根柱子不是问题，问题是要创建若干个中空的圆盘。一开始的想法是：创建一个圆柱体，将圆柱体的上下两端隐藏，设置柱面的宽度来实现圆盘的效果，经过多次尝试并查阅相关api文档，发现柱面是没有厚度的，改方法不可行。