HTML5 WebGL-based 3D server-client communication

The original intention of this example is to simulate the communication between the server and the client, and I simplified the whole requirement into this example today. The simulation of the 3D computer room generally needs the assistance of eagle eyes, so that the generalization of finding products and the whole space will be more clear. In this example, I also added it. This article is my summary of this project. . By the way, I did this example with reference to a DEMO, and it is a little different from the display in the example, so don't be surprised.

Example link:  http://www.hightopo.com/guide/guide/core/schedule/examples/example_network.html

The animation of this article:

There is no designer involved in this example, and everyone will be ready for the style, but I think it's not bad, haha~

Entering the topic, the whole example is implemented with almost 200 lines of code, which is why I like to use  HT  . Now that the Web3d technology is rising, it is roughly divided into two groups: the plug-in school and the HTML5 school. HT is based on HTML5, no need to install any plug-ins, ah, beside the point. . .

First of all, start with the construction of the scene. This interface adds three parts to the body: 3d components, attribute components and topology components (2d components). The way of adding is as follows: for the convenience of loading the outermost component to fill the window, all components of HT have the addToDOM function, and the implementation logic is as follows, where iv is the abbreviation of invalidate:

addToDOM = function(){   
    var self = this,
        view = self.getView(),   
        style = view.style;
    document.body.appendChild(view);            
    style.left = '0';
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false);            
}

Because this function fixes the position in the style, this function cannot be used for all components. We add topology components and attribute components into the interface according to this function, and 3d components can directly use the addToDOM function:

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm); // 3d component 
g3d.addToDOM(); // Add the component to the body 
g3d.setDashDisabled( false ); // Enable dotted flow 
g3d.setMovableFunc( function () { // Overload move function 
    return  false ; // Return false, all primitives cannot be moved 
});
g3d.setEye([ -813, 718, 1530]); // set eye 
g3d.setCenter([140, -25, 217]); // set center(target) 
gv = new ht.graph.GraphView(dm) ; // 2d component 
gv.getView().className = 'graphview'; // HT component root layer is a div, get 
document.body.appendChild(gv.getView()) through getView() function; // will The topology component is added to the body 
gv.fitContent( true ); // Zoom and pan the entire topology to display all the primitives 

propertyView = new ht.widget.PropertyView(dm); // property component    
propertyView.getView().className = 'property' ;
propertyView.setWidth( 240); // Set the component width 
propertyView.setHeight(150); // Height 
document.body.appendChild(propertyView.getView());

I won't go into details about the styles of topology components and property components, but just set a background color and left right top bottom position. It should be declared here that HT components generally use the absolute positioning method of setting position as absolute.

You may be curious, how did this eagle eye come about? In HT, as long as 2D and 3D share the same data container dataModel, they can share all the elements in this dataModel, and the positions are corresponding, just like this:

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);
gv = new ht.graph.GraphView(dm);

 

Isn't it very simple. . . Can save a lot of time to develop. . .

In this example, all elements except the connection are nodes of type ht.Node, so we encapsulate the creation method of this node for reuse:

function createNode(p3, s3, name, shape){//创建节点
    var node = new ht.Node();//创建类型为 ht.Node 类的节点
    dm.add(node);//将节点添加进数据容器 dataModel 中
    node.s({//设置节点的样式，s 为 setStyle 的简写
        'shape3d': shape,//指定节点的形体，这边是传入 3d 模型的 json 文件
        'label.position': 23,//文字显示位置
        'label.transparent': true,//文字在3d下是否透明 可消除字体周围的锯齿
        'label.color': '#eee',//文字颜色
        'label.t3': [0, 0, -151],//文字在3d下的偏移
        'label.r3': [0, Math.PI, 0],//文字在3d下的旋转
        'label.scale': 2//文字缩放
    });
    node.r3(0, Math.PI, 0);//节点旋转
    node.p3(p3);//设置节点在 3d 下的位置
    node.s3(s3);//设置节点在 3d 下的大小
    node.setName(name);//设置节点的显示名称
    return node;//返回节点
}

以及连线的创建：

function createEdge(exchange, service){//创建连线
    var edge = new ht.Edge(exchange, service);
    dm.add(edge);
    edge.s({
        'edge.width': 4,//连线宽度
        'edge.color': 'red',//连线颜色
        'edge.dash': true,//是否显示虚线
        'edge.dash.color': 'yellow',//虚线颜色
        'edge.dash.pattern': [32, 32],//连线虚线样式默认为[16, 16]
    });
    edge.a({//用户自定义属性 为 setAttr 的缩写
        'flow.enable': true,//是否启用流动
        'flow.direction': 1,//方向
        'flow.step': 4//步进
    });
    return edge;
}

我们界面中的显示的连线都是虚线流动的，HT 默认是关闭虚线流动的功能的，通过下面这句来开启虚线流动的功能：

g3d.setDashDisabled(false);//开启虚线流动

同时我们还需要设置动画，控制时间间隔，使得连线虚线偏移，形成一种“流动”的状态，动画请参考 schedule 调度手册：


flowTask = {
    interval: 40,
    action: function(data){
        if(data.a('flow.enable')){
            data.s('edge.dash.offset', data.s('edge.dash.offset')+(data.a('flow.step')*data.a('flow.direction')));
        }
    }
};
dm.addScheduleTask(flowTask);//添加flowTask动画

以下是界面上出现的所有的服务器以及客户端的节点的声明，都是基于 createNode 和 createEdge 函数创建的：

floor = createNode([0, 5, 0], [1000, 10, 500]);//地板图元
floor.s({//设置图元的样式 s 为 setStyle 的缩写
    'all.color': 'rgb(47, 79, 79)'//六面体的整体颜色
});

exchange = createNode([0, 300, -400], [200, 20, 150], 'H3C 核心交换机', 'models/机房/机柜相关/机柜设备6.json');//交换机

//五台不同作用的服务器
service1 = createNode([-400, 140, 0], [100, 260, 100], '备用', 'models/机房/机柜相关/机柜2.json');
service2 = createNode([-200, 140, 0], [100, 260, 100], '网站', 'models/机房/机柜相关/机柜2.json');
service3 = createNode([0, 140, 0], [100, 260, 100], 'OA', 'models/机房/机柜相关/机柜2.json');
service4 = createNode([200, 140, 0], [100, 260, 100], '广告', 'models/机房/机柜相关/机柜2.json');
service5 = createNode([400, 140, 0], [100, 260, 100], '受理', 'models/机房/机柜相关/机柜2.json');

//创建交换机与服务器之间的连线
createEdge(exchange, service1);
createEdge(exchange, service2);
createEdge(exchange, service3);
createEdge(exchange, service4);
createEdge(exchange, service5);
//第二台交换机
exchange2 = createNode([-100, 60, 400], [200, 20, 150], 'Procurve Switch 2010-23 交换机', 'models/机房/机柜相关/机柜设备6.json').s('label.color', '#000');

createEdge(exchange2, service1);
createEdge(exchange2, service2);
createEdge(exchange2, service3);
createEdge(exchange2, service4);
createEdge(exchange2, service5);

floor2 = createNode([-100, 5, 800], [1000, 10, 500]);
floor2.s({
    'all.color': 'rgb(47, 79, 79)'
});

device1 = createNode([-400, 20, 650], [200, 20, 100], 'VLS 12000(上)', 'models/机房/机柜相关/机柜设备6.json');
device2 = createNode([100, 20, 650], [200, 20, 100], 'VLS 12000(下)', 'models/机房/机柜相关/机柜设备6.json');
device3 = createNode([-200, 20, 800], [200, 20, 100], 'HP Strage Works 8/8 SAN Switch(上)', 'models/机房/机柜相关/机柜设备6.json');
device4 = createNode([200, 20, 800], [200, 20, 100], 'HP Strage Works 8/8 SAN Switch(下)', 'models/机房/机柜相关/机柜设备6.json');
device5 = createNode([-300, 20, 950], [200, 20, 100], 'EVA 8400 HSV450(上)', 'models/机房/机柜相关/机柜设备6.json');
device6 = createNode([100, 20, 950], [200, 20, 100], 'EVA 8400 HSV450(下)', 'models/机房/机柜相关/机柜设备6.json');

createEdge(exchange2, device1);
edge1 = createEdge(exchange2, device2);
createEdge(device1, device3);
createEdge(device1, device4);
createEdge(device2, device3);
createEdge(device2, device4);
createEdge(device3, device5);
createEdge(device3, device6);
createEdge(device4, device5);
createEdge(device4, device6);
dm.sm().ss(edge1);//设置选中 edge1

 最后，需要在属性栏中添加属性，这里我们只对“连线”进行了属性的显示及调整，总共 5 个属性，包括我通过 setAttr（简写为 a）自定义的属性 flow.enable、flow.direction、flow.step 和样式属性 edge.color 以及 edge.dash.color。我们通过 name 属性结合 accessType 属性实现对 Data 节点的存取：

 

 

//连线的属性
edgeProperties = [
    {
        name: 'flow.enable',//用于存取 name 属性
        accessType: 'attr',//操作存取属性类型
        displayName: 'Enable Flow',//用于存取属性名的显示文本值，若为空则显示 name 属性值
        valueType: 'boolean',//用于提示组件提供合适的 renderer 渲染，boolean 类型，显示为勾选框
        editable: true//设置该属性是否可编辑
    },
    {
        name: 'flow.direction',
        accessType: 'attr',
        displayName: 'Flow Direction',
        enum: {//枚举类型属性 传递数值和文字数组
            values: [-1, 1],
            labels: ['正向流动', '反向流动']
        },
        editable: true
    },
    {
        name: 'flow.step',
        displayName: 'Flow Step',                        
        editable: true,
        accessType: 'attr',
        slider: {//表单插件中的滑动条 所以要添加 ht-form.js 
            min: 0,//最小值
            max: 10,//最大值
            step: 0.1//步进
        }
    },
    {
        name: 'edge.color',
        accessType: 'style',
        displayName: 'Edge Color',
        editable: true,
        valueType: 'color',//颜色类型，以填充背景色的方式显示
        colorPicker: {//颜色选择框
            instant: true//获取和设置是否处于即时状态，默认为true，代表作为表格和属性页的编辑器时，将实时改变模型值
        }
    },
    {
        name: 'edge.dash.color',
        displayName: 'Dash Color',
        accessType: 'style',
        valueType: 'color',
        editable: true,
        colorPicker: {
            instant: true
        }
    }
];
propertyView.setEditable(true);//设置属性组件可编辑
propertyView.addProperties(edgeProperties);//添加连线属性

 是不是非常简单~  快动手实践一下吧！