基于 HTML5 的 WebGL 3D 档案馆可视化管理系统

前言

Graph3dView 加载 3D 场景

Graph3dView 是 HT 组件中加载 3D 模型的拓扑组件，RelativeLayout 则是 HT 提供的 UI 解决方案，UI 组件中提供 HTView 组件来实现拓扑与 UI 的融合。

创建 LEFT 中的档案袋模型

左侧的 EDITOR 部分使用 HT 的调色板组件（ht.widget.Palette）, 将档案袋添加到调色板上，并设置为可以拖拽：

实现从调色板中将图元拖拽至 3D 场景

在上一步中我们对调色板中的图元属性设置了可拖拽，此时可以实现拖拽图元的动画。但是并不能直接将图元拖拽到 3D 场景中，实现思路是：

1. 在拖拽时获取拖拽的图元信息
2. 拖拽到对应位置时显示可摆放位置
3. 结束拖拽后在对应位置创建对应的 3D 模型

对应代码实现如下：

拖拽时获取图元信息

拖拽到对应位置时创建 3D 模型，在实际实现过程中由于很难准确地获取到档案柜中每一个可以摆放档案袋的坐标位置，所以在本例中采用了预置的方法。具体原理就是在先创建一个正常不可见的档案柜模型，并在其中将档案袋都摆放完整，在拖拽时，将此不可见的模型与将要摆放的模型重合，此时只需判断鼠标所在的点下是否存在预置的模型存在就可以知道该处是否可以创建 3D 模型，实现效果如下：

上面我们已经实现了档案袋拖拽至 3D 场景的效果，但是我们可以发现档案袋模型远小于柜子，要将档案袋摆放到正确的位置并不是那么容易。所以此时我们可以将需要操作的档案柜放大到正中间，其它模型进行虚化处理。

快速查询功能实现

在 HT 的组件中有提供快速查询插件 QuickFinder ，此次我们就运用该插件来实现简单的档案编 查询