h5教程HTML5 WebG 的3D网络拓扑结构图

ht.Default.loadObj('obj/机柜组件1.obj', 'obj/机柜组件1.mtl', {  //加载 obj 文件
    cube: true,  //是否将模型缩放到单位1的尺寸范围内，默认为false
    center: true,  //模型是否居中，默认为false，设置为true则会移动模型位置使其内容居中
    shape3d: 'box',  //如果指定了shape3d名称，则HT将自动将加载解析后的所有材质模型构建成数组的方式，以该名称进行注册
    finishFunc: function(modelMap, array, rawS3){  //用于加载后的回调处理 
     　if(modelMap){  
　　      device2 = createNode('box', floor1);  //创建一个节点，在第一层“地板”上
　　　　device2.p3([x1-120, y1+13, z1+60]);  //设置这个节点坐标
　　　　device2.s3(rawS3);  //设置这个节点大小
　　　　createEdge(device1, device2);  //创建连线
　　　　device3 = createNode('box', floor1);  
　　　　device3.s3(rawS3);  
　　　　device3.p3([x1+120, y1+13, z1+60]);  
　　　　createEdge(device1, device3);  
    　 }  
    }  
});

function createAlarm(device, formPane) {
    var ringModel = ht.Default.createRingModel([ 8, 1, 10, 1, 10, -1, 8, -1, 8, 1 ], null, null, false, false, 100);//根据xy平面的曲线，环绕一周形成3D模型。
    var sphereModel = ht.Default.createSmoothSphereModel(8, 8, 0, Math.PI*2, 0, Math.PI, 2);//构建光滑球体模型 
    var cylinderModel = ht.Default.createSmoothCylinderModel(8, true, true, 1, 2, 0, Math.PI*2, 8);//构建光滑圆柱体模型
    
    var alarmArr = [//组合模型 由三个模型ringModel、sphereModel、cylinderModel组合而成
        {
          shape3d: ringModel,//定义模型类型
          r3: [Math.PI/2, 0, 0],//设置旋转角度
          color: {//设置模型颜色
            func: 'style@all.blend',//数据绑定style样式中的all.blend属性，可通过data.s()获取和设置这个属性
          }
        },{
          shape3d: sphereModel,
          t3: [0, 4, 0],
          color: {
            func: 'style@all.blend',
          }
        },{
          shape3d: cylinderModel,
          t3: [0, -3, 0],
          color: {
            func: 'style@all.blend',
          }
        }
    ];
    ht.Default.setShape3dModel('alarm', {//注册自定义3D模型
      shape3d: alarmArr
    });

    var alarmTip = createNode('alarm', device);//创建shape3d为alarm的节点
    alarmTip.s3([2, 2, 2]);//设置节点大小
    alarmTip.p3(device.p3()[0], device.p3()[1]+60, device.p3()[2]);
    alarmTip.s('all.blend', 'red');//改变此属性可改变模型的颜色，因为模型创建的时候已经数据绑定了

    return alarmTip;
}

if(formPane){
    alarmNode.scaleFunc = function() {//设置大小变化动画
        var size = alarmNode.s3();//获取节点的大小
        if (size[0] === 2 && size[1] === 2 && size[2] === 2) alarmNode.s3([1, 1, 1]);
        else alarmNode.s3([2, 2, 2]);
        alarmNode.scaleTimer = setTimeout(alarmNode.scaleFunc, formPane.v('scaleInterval'));//设置动画
    }
    alarmNode.blinkFunc = function(){//设置闪烁的动画
        var color = alarmNode.s('all.blend');//获取节点的style样式
        if (color === 'red') alarmNode.s({'all.blend': 'yellow'});//如果节点颜色为红色，那么设置为黄色
        else alarmNode.s({'all.blend': 'red'});
        alarmNode.blinkTimer = setTimeout(alarmNode.blinkFunc, formPane.v('blinkInterval'));
    }
    alarmNode.rotateFunc = function() {//设置旋转动画
        alarmNode.setRotation(alarmNode.getRotation() + Math.PI/20);//获取节点当前的旋转角度，在这个旋转角度之上添加 Math.PI/20 个角度
        alarmNode.rotateTimer = setTimeout(alarmNode.rotateFunc, formPane.v('rotInterval'));
    }
}

formPane.addRow([//向form表单面板上添加一行元素
    {
        checkBox: {//复选框
            label: 'Enable Blink',//复选框对应的文本内容
            selected: true,//设置选中复选框
            onValueChanged: function(){//复选框值变化时回调的函数
                var data = dataModel.getDataByTag('colorAlarm');//通过tag标签获取节点
                if (this.getValue()) {//获取复选框当前值true/false
                    data.blinkTimer = setTimeout(data.blinkFunc, formPane.v('blinkInterval'));//直接通过设置节点的blinkTimer来设置动画
                }
                else {
                    clearTimeout(data.blinkTimer);//清除动画
                }
            }
        }
    },
    {
        id: 'blinkInterval',//form可以通过getValue（简写为v）来获取这个item的值
        slider: {//设置了该属性后HT将根据属性值自动构建ht.widget.Slider对象，并保存在element属性上
            min: 0,//滑动条最小值
            max: 1000,//滑动条最大值
            step: 50,//滑动条步进
            value: 500,//当前滑动条的值
        }
    }
], [0.1, 0.1]);//设置这行的两个item元素的宽度小于1的值为比例

var polyline = new ht.Edge(source, target);//创建连线
dataModel.add(polyline);//将连线添加进数据容器中
polyline.s({
    'edge.width': 5,//连线宽度
    'edge.type': 'points',//连线类型 为points时连线走向将由edge.points属性决定，用于绘制折线
    'edge.points': [//可设置类型为ht.List的{x:100, y:100}格式的点对象数组，当edge.type为points时起作用
        {x: source.getPosition3d()[0]+200, y: source.getPosition3d()[2], e: source.getPosition3d()[1]},
        {x: target.getPosition3d()[0]+400, y: target.getPosition3d()[2], e: target.getPosition3d()[1]}
    ],
    'edge.segments': [1, 4],//用于描述点连接样式，数组元素为整型值
    'shape3d': 'cylinder',//圆柱
    'shape3d.color': 'rgba(242, 200, 40, 0.4)',
    'shape3d.resolution': 30,//微分段数，可以决定曲线的平滑度
    'edge.source.t3': [20, 0, 0],//连线source端偏移，[tx, ty, tz]格式，默认为空
    'edge.target.t3': [20, 0, 0]//连线target端偏移，[tx, ty, tz]格式，默认为空
});

var list = new ht.List();
list.push({x: source.getPosition3d()[0], y: source.getPosition3d()[2], e: source.getPosition3d()[1]});//向数组中添加source点
polyline.s('edge.points').each(function(item){//添加style属性中已设置的两个点
    list.push(item);
});
list.push({x: target.getPosition3d()[0], y: target.getPosition3d()[2], e: target.getPosition3d()[1]});//添加target点

var ball = new ht.Node();//创建小球节点
ball.s({//设置小球节点的样式
    'shape3d': 'sphere',//设置小球的3d模型为球形
    'shape3d.color': 'rgba(40, 90, 240, 0.4)'//设置3d模型的颜色
});

var delta = 10, flag = 0;
setInterval(function(){
    flag++;
    var length = (polyline.a('total') || 0) % polyline.a('length') + delta;//小球当前走过的曲线长度
    var cache = ht.Default.getLineCacheInfo(list, polyline.s('edge.segments'));//获取曲线上的点的信息
    var lineLength = ht.Default.getLineLength(cache);//获取曲线的总长度
    polyline.a('length', lineLength - 50);//因为我设置了edge的t3（相当于2d中的offset），所以线段长度实际没有那么长
    var offset = ht.Default.getLineOffset(cache, length);//曲线根据曲线上点的信息的偏移量
    ball.setPosition3d(offset.point.x + 10, offset.point.y, offset.point.z);//设置节点的坐标
    polyline.a('total', length);
    if(flag === 1) dataModel.add(ball);//这时候节点已经有了坐标了，可以添加进数据容器中了
}, 10);

names = ['设备2', '设备3', '设备4', '设备5', '设备6', '设备7', '设备8', '设备9'];  
names.forEach(function(name, index) {  
    x = 400, y = 200, angle = 45, r = 120;  
    x = x3 + Math.sin((2 * Math.PI / 360) * angle * index) * r;  
    y = z3 + Math.cos((2 * Math.PI / 360) * angle * index) * r;  
    device = createRect([x, y3 + 15, y], [w * 0.1, 15, h * 0.1], '', '', floor3);  
    createEdge(device5, device);  
});