基于 HTML5 WebGL 的 3D 服务器与客户端的通信

这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子。3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算是我对这次项目的一个总结吧。对了,这个例子我是参考一个 DEMO 来完成的,和示例中的显示有些不同,大家莫惊奇。

例子链接: http://www.hightopo.com/demo/3DEdgeFlow/index.html

本文动图:

这个例子没有设计师的参与,样式上面大家将就将就,但是我觉得还不错啊,哈哈~

进入正题,整个例子差不多用了 200 行的代码来实现的,这就是我喜欢用 HT 的原因,现在 Web3d 技术兴起,大体就是分为两派:插件派和 HTML5 派。HT 就是基于 HTML5 的,不需要安装任何插件,啊,跑题了。。。

首先,还是从场景的搭建开始,这个界面是在 body 体上添加了三个部分:3d 组件,属性组件以及拓扑组件(2d 组件)。添加的方式是这样的:为了最外层组件加载填充满窗口的方便性,HT 的所有组件都有 addToDOM 函数,其实现逻辑如下,其中 iv 是 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);            
}

因为这个函数是将 style 中的位置都固定了,所以不能将所有的组件都用这个函数,我们按照这个函数的方式将拓扑组件和属性组件添加进界面中,3d 组件直接利用 addToDOM 函数即可:

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);//3d 组件
g3d.addToDOM();//将组件添加进 body 体中
g3d.setDashDisabled(false);//开启虚线流动
g3d.setMovableFunc(function(){//重载移动函数return false;//返回false,所有的图元都不可移动
});
g3d.setEye([-813, 718, 1530]);//设置 eye 
g3d.setCenter([140, -25, 217]);//设置 center(target)
gv = new ht.graph.GraphView(dm);//2d 组件
gv.getView().className = 'graphview';//HT 组件根层都是一个 div,通过 getView() 函数获取
document.body.appendChild(gv.getView());//将拓扑组件添加进 body 体中
gv.fitContent(true);//缩放平移整个拓扑以展示所有的图元

propertyView = new ht.widget.PropertyView(dm);//属性组件   
propertyView.getView().className = 'property';
propertyView.setWidth(240);//设置组件宽度
propertyView.setHeight(150);//高度
document.body.appendChild(propertyView.getView());

拓扑组件和属性组件的样式我就不再赘述了,只是设置了一个背景颜色以及 left right top bottom 位置而已。这里要声明一下,HT 组件一般都以设置 position 为 absolute 的绝对定位方式。

大家可能会好奇,这个鹰眼怎么生成的?在 HT 中,只要 2D 和 3D 共用同一个数据容器 dataModel 即可共同拥有所有在这个 dataModel 中的元素,并且位置都是对应的,只需要类似这种做法即可:

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

是不是非常简单。。。可以省去大把时间开发。。。

这个例子中除了连线之外的所有元素都是 ht.Node 类型的节点,所以我们将这个节点的创建方法封装一下,好重复利用:

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);//添加连线属性

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

转载于:https://www.cnblogs.com/xhload3d/p/8124629.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/453247.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

七种常见的核酸序列蛋白编码能力预测工具 | ncRNAs | lncRNA

注:这些工具的应用都是受限的,有些本来就是只能用于预测动物,在使用之前务必用ground truth数据来测试一些。我想预测某一个植物的转录本,所以可以拿已经注释得比较好的拟南芥来测试一下。(测试的结果还是比较惊人的&a…

寒武纪找到了引领中国AI芯片走向世界的路

大约6亿年前在地质学上被称作“寒武纪”的时代,大量无脊椎动物在短时间内出现“生命大爆发”。如今,“寒武纪”这个名字再次被人们提及,它源自中科院计算所研发的人工智能芯片处理器的命名,意喻人工智能即将迎来大爆发的时代。“寒…

浅谈PPM (Project Portfolio Management)

前言: 本文以纯理论性的PPM讲解为主,不会涉及到具体如何实施,我会在以后介绍详细的PPM实施方案介绍。 PPM,可能很多人并不清楚甚至可能没听说过,这是一个近些年才流行起来的概念,是Project Portfolio Mana…

Android怎么插手机卡,魅蓝E手机卡怎么装 魅蓝E手机SIM卡安装图文教程

昨天下午,魅族发布了全新系列魅蓝手机——魅蓝E,定位魅蓝高端产品线,售价1299元,李楠号称魅蓝E采用三四千元的旗舰机工艺,外观/屏幕/拍照提升明显。此外,魅蓝E依旧支持全网通双卡双待。那么魅蓝E怎么插卡/装…

快速幂总结

快速幂总结 快速幂这个东西比较好理解,但实现起来到不老好办,记了几次老是忘,今天把它系统的总结一下防止忘记。 首先,快速幂的目的就是做到快速求幂,假设我们要求a^b,按照朴素算法就是把a连乘b次,这样一来…

第三章

一.项目前期的主要工作 1.现状分析 ①.硬件分析 ②.软件分析 2.需求收集 3.粗略设计 ①.体系结构分析 ②.硬件(网络)设计 ③.应用系统设计 ④.安全设计 ⑤.配套设计 4.可行性分析 二.结构的项目前期实例 1.组织分析 3.需求收集 4.粗略设计 ①.系统体系结…

荣耀magic3会用鸿蒙,赵明:荣耀Magic3芯片领先行业,大家看到以后会换掉手机!...

荣耀CEO赵明亲自参加高通2021技术峰会,宣布与高通达成战略合作,未来全系产品采用高通平台。赵明同时透露未来的产品动向,不排除未来与华为继续合作,采用鸿蒙操作系统的可能。赵明表示,Android操作系统依旧是荣耀的首选…

三周第三次课 3.7 su命令 3.8 sudo命令 3.9 限制root远程登录

3.7 su命令1、su命令su命令是用来切换用户的;su命令需要使用- 进行切换,如果不使用- 也可以,但当前目录是在root下,没有彻底切换在root下 使用su命令创建文件,以指定用户的身份创建文件切换后显示-bash-4.2因为user5的…

html坐标绘制路径,canvas学习笔记之绘制简单路径

1 线段(直线路径)绘制线段一般步骤:moveTo(x,y) 移动画笔到指定的坐标点(x,y)lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y)stroke() 根据当前的画线样式,绘制当前或已经存在的路径2 矩形路径绘制矩形路径一般步骤:rect(x, y, width, height) 矩形路径&…

增加表单的文字段的html的代码是,表单及表单新增元素(示例代码)

要想更好运用表单就要了解表单的的更多元素与属性,首先看看对表单基本了解。表单的基本了解 元素用于用户输入数据的收集元素是最重要的表单元素,有许多type其中是用于向表单处理程序提交表单的按钮。元素 元素定义待选择的下拉列表选项,元素…

给博客或站点加入百度统计

概述 记得刚接触百度统计的时候,苦于没有个人网站,不能加入统计代码查看访问量等数据。然后渐渐的忘了这件事。之前看别人博客中提及了百度统计,然后粗略的看了一下加入方法,觉得很惊喜,太简单了! 加入方法…

项目规划管理

项目规划管理 - 1 项目规划是预测未来,确定要达到的目标,估计会碰到的问题,并提出实现目标、解决问题的有效方案、方针、措施和手段的过程。( 摘自百度百科) 大家应该都看过不少美国大片,是否记得很多片子里,特别是偷…

android9叫什么名字,白猜这么多名字!谷歌Android 9.0正式发布:命名Android Pie

日前,谷歌对外公布了Android P的beta版,并向索尼Xperia XZ2、小米Mi Mix 2S、诺基亚7 Plus、Oppo R15 Pro、Vivo X21、一加6和Essential PH-1开放测试。今天,谷歌终于宣布正式发布Android 9.0的正式版本。据外媒GSMArena报道,今天…

再送一波干货,测试2000线程并发下同时查询1000万条数据库表及索引优化

原文:再送一波干货,测试2000线程并发下同时查询1000万条数据库表及索引优化继上篇文章《绝对干货,教你4分钟插入1000万条数据到mysql数据库表,快快进来》发布后在博客园首页展示得到了挺多的阅读量,我这篇文章就是对上篇文章的千万…

wps html编辑表格,WPS 2017个人版演示word使用技巧(wps2017表格使用技巧)

wps2017是一款非常深受用户喜爱的办公软件。在2017这个新的版本中,依旧继承了它之前兼容免费、体积小、多种界面切换、云办公等众多优秀的功能特点,下面小编就来教大家wps2017的使用方式使用技巧:一、wps2017个人版word使用技巧技巧一&#x…

es Update API

2019独角兽企业重金招聘Python工程师标准>>> es Update API 博客分类: 搜索引擎,爬虫 The update API allows to update a document based on a script provided. The operation gets the document (collocated with the shard) from the ind…

Linux 线程占用CPU过高定位分析

今天朋友问我一个Linux程序CPU占用涨停了&#xff0c;该如何分析&#xff0c; CPU占用过高&#xff0c;模拟CPU占用过高的情况 先上一段代码&#xff1a; 1 #include <iostream>2 #include <thread>3 #include <vector>4 5 6 int main(int argc, char **argv…

计算机二级常备知识,2020年计算机二级Office考试必备题库资料!

考试资料在手&#xff0c;考试不用愁&#xff01;领报名界面显示计算机二级Office通过率仅21.07%&#xff0c;很多人认为是既费脑子又费时间的考试&#xff0c;可能是方法不对&#xff0c;导致花了很多时间还是考不过&#xff0c;刚刚收到3月考的二级证书啦&#xff0c;马上还有…

MR作业的提交监控、输入输出控制及特性使用

2019独角兽企业重金招聘Python工程师标准>>> MR作业的提交监控、输入输出控制及特性使用 博客分类&#xff1a; hadoop 提交作业并监控 JobClient是用户作业与JobTracker交互的主要接口&#xff0c;它提供了提交作业&#xff0c;跟踪作业进度、访问任务报告及logs、…