前言
HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization.
这口号是当年心目中的产品方向，接着就朝这个方向慢慢打磨，如今 HT 算是达到了这样的效果，谈不上用尽洪荒之力，但我们对产品结果很满意，特别是 HT 的用户手册，将例子和文档无缝融合一体，小小 10 来兆开发包居然包含了四十五份手册，数百个活生生的 HTML5 例子，还没体验过的同学可以点击
代码实现
HT 提供了基于 WebGL 的 3D 技术的图形组件 ht.graph3d.Graph3dView，WebGL 基于 OpenGL ES 2.0 图形接口，因此 WebGL 属于底层的图形 API 接口，二次开发还是有很高的门槛，HT 的 Graph3dView 组件通过对 WebGL 底层技术的封装，与 HT 其他组件一样，基于 HT 统一的 DataModel 数据模型来驱动图形显示，极大降低了 3D 图形技术开发的门槛。同时 HT 提供了强大的完全基于 HTML5 技术 3D 图形建模设计器，用户无需编码即可快速可视化搭建各种 3D 场景，可以说 HT 的 3D 开发模式完全打破了传统 3D 开发模式，绝大部分应用不再需要依赖精通 3ds Max 或 Maya 的专业 3D 设计师来建模，也不需要整合 Unity3d 等引擎做图形渲染，HT 一站式的提供了从建模到渲染，包括和 2D 组件呈现和数据融合的一站式解决方案。
我本次讲解的就是这个 3D 的界面，所以我们首先要创建 3D 渲染引擎组件，可视化呈现数据模型的三维环境场景。
dataModel = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dataModel); g3d.addToDOM(); window.addEventListener('resize', function (e) { g3d.invalidate(); }, false);
我们还要设置眼睛（或Camera）所在位置，默认值为 [0, 300, 1000] ，格式为 [x, y, z] 。
g3d.setEye([0, 300, 600]);
然后我们再给它加上一些选中效果。Graph3dView 中被选中的图元会显示为较暗的状态，变暗系数是由图元 style 的 brightness 和 select.brightness 属性决定，select.brightness 属性默认值为 0.7，最终返回值大于 1 变亮，小于 1 变暗，等于 1 或为空则不变化。Graph3dView#getBrightness 函数控制最终图元亮度，因此也可以通过重载覆盖该函数自定义选中图元亮度。
g3d.getBrightness = function (data) { if (data.s('isFocused')) { return 0.7; } return null; };
lastFocusData = null;g3d.getView().addEventListener('mousemove', function (e) { // 传入逻辑坐标点或者交互 event 事件参数，返回当前点下的图元 var data = g3d.getDataAt(e); if (data !== lastFocusData) { if (lastFocusData) { astFocusData.s('isFocused', false); } if (data) { data.s('isFocused', true); } astFocusData = data; } });
接下来我们写个函数来方便绘制每个部分的模型：
function createNode (p3, s3, host) { // 拓扑图元类型 var node = new ht.Node(); // 获取或设置图元中心点的三维坐标 有三个参数时相当于 setPosition3d 没有相当于 get node.p3(p3); // 获取或设置图元的尺寸 有三个参数时相当于 setSize3d 没有相当于 get node.s3(s3); // 设置宿主图元，当图元吸附上宿主图元(host)时，宿主移动或旋转时会带动所有吸附者 node.setHost(host); dataModel.add(node); return node; }
讲到了这，我们来说说吸附，吸附功能对于设计有层次关系的模型非常方便，例如设备面板吸附上设备机框，设备端口吸附上设备面板，这样从机框 - 面板 - 端口的层次关系吸附，使得用户拖动整体机框时所有这个层次下的图元都会跟随移动。对于 3D 的场景下，吸附的概念更进一步延伸，当机框在三维空间进行任意位置偏移以及任意角度旋转时，所有吸附的相关图元都会正确的跟随平移，并做出相应位置对应的旋转，以达到整体设备各个图形部分保持物理相对位置一致。
下面我们来一起创建模型吧！分别是地板 floor，桌面 table，四个桌腿以及盒子：
