基于 HTML WebGL 的 D 服务器与客户端的通信.docVIP

 基于 HTML5 WebGL 的 3D 服务器与客户端的通信 这个例子的初衷是模拟服务器与客户端的通信，我把整个需求简化变成了今天的这个例子。3D 机房方面的模拟一般都是需要鹰眼来辅助的，这样找产品以及整个空间的概括会比较明确，在这个例子中我也加了，这篇文章就算是我对这次项目的一个总结吧。对了，这个例子我是参考一个 DEMO 来完成的，和示例中的显示有些不同，大家莫惊奇。 这个例子没有设计师的参与，样式上面大家将就将就，但是我觉得还不错啊，哈哈~ 进入正题，整个例子差不多用了 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); 是不是非常简单。。。可以省去大把时间开发。。。 这个例子中除了连线之外的