[置顶] 基于HT for Web 3D 技术快速搭建设备面板

以真实设备为模型，搭建出设备面板，并实时获取设备运行参数，显示在设备面板上，这相比于纯数值的设备监控系统显得更加生动直观。今天我们就在HT for Web的3D技术上完成设备面板的搭建。

我们今天模拟的设备是机房设备，先来目睹下最终效果：

我来解释下这个模型，一个带有透明玻璃门的机柜，机柜里装有5台设备，门可以开合，设备可以插拔，那么我么该如何搭建这样的设备呢？方法不难，我们一步一步来。

我们先从设备开始，设备的示意图如下：

看起来有模有样的，其实呢，它就是一个长方体，然后在长方体的正面贴上一张图片，这样子设备的壳就出来了，创建代码如下：

var node = createNode([0, 0, 0], [475, 100, 0]);
node.s({
    'front.image': 'panel',
    'all.color': '#E6DEEC'
});
node.setToolTip('Double click to pop the server’);

 

其中设置设备的正面图片的方法是通过设置节点的front.image样式属性来实现的，在代码中将front.image属性设置为’panel’，而’panel’属性是已经通过ht.Default.setImage()方法注册了的图片的别名，在代码中还设置了长方体各个面的颜色和鼠标悬停时的提示语。

在代码中还调用了createNode()的方法，该方法并没有做什么特殊的操作，只是将创建3D拓扑节点的代码封装起来，精简代码，避免相同的代码重复书写，具体的封装如下：

/**
 * 创建3D拓扑节点，并添加到dataModel中
 * @param p3 {array} 位置信息
 * @param s3 {array} 长宽高信息
 * @returns {ht.Node} 3D拓扑节点
 */
function createNode(p3, s3) {
    var node = new ht.Node();
    node.s({
        'shape' : 'rect'
    });
    node.p3(p3);
    node.s3(s3);
    dataModel.add(node);
    return node;
}

 

该方法通过传入位置信息和大小信息创建出一个3D拓扑节点，并添加到