maya拓扑插件_基于 HTML5 WebGL 的 3D 网络拓扑图

在数据量很大的2D 场景下，要找到具体的模型比较困难，并且只能显示出模型的的某一部分，显示也不够直观，这种时候能快速搭建出 3D 场景就有很大需求了。但是搭建 3D 应用场景又依赖于通过 3ds Max 或 Maya 的专业 3D 设计师来建模，Unity 3D 引擎做图形渲染等，这对用户来说都是挑战！不过，HT 一站式的提供了从建模到渲染，包括和 2D 组件呈现和数据融合的一站式解决方案。HT 基于 WebGL 的 3D 技术的图形组件 ht.graph3dView 组件通过对 WebGL 底层技术的封装，与 HT 其他组件一样， 基于 HT 统一的 DataModel 数据模型来驱动图形显示，极大降低了 3D 图形技术开发的门槛，在熟悉HT 数据模型基础上，一般程序员只需要 1 小时的学习即可上手 3D 图形开发。

当然，这里的我只是用简单的图形来表示设备，脑洞大开的你当然可以将其换成更有意思的模型。

接下来看看我们是怎么做到的：

1、准备工作：

3D 和 2D 的 API 的设计上保持了很多一致性，3D 视图组件是 ht.graph3d.Graph3dView， 2D 视图组件是 ht.graph.GraphView，两者可共享同一数据模型 DataModel。在 HT 中，为了让了获得接近真实三维物体的视觉效果，我们通过透视投影使得远的对象变小，近的对象变大，平行线会出现先交等更接近人眼观察的视觉效果：

如上图所示，透视投影最终显示到屏幕上的内容只有截头椎体部分的内容，因此 GraphView 提供了 eye，center，up，far，near， fovy 和 aspect 参数来控制截头椎体的具体范围，我们在实际运用中用到更多的是 eye 和 center：

getEye() | setEye([x, y, z])，决定眼睛(或 Camera)所在位置，默认值为 [0, 300, 1000]；

getCenter() | setCenter([x, y, z])，决定目标中心点(或 Target)所在位置，默认值为 [0, 0, 0]；

详情看 HT for Web 3D 手册 手册 (http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html)。

dataModel = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dataModel); g3d.setEye(1800, 800, 1000);g3d.setCenter(0, 100, 0);g3