基于 html webgl 的 d 服务器与客户端的通信

《基于 html webgl 的 d 服务器与客户端的通信》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、基于HTML5WebGL的3D服务器与客户端的通信这个例子的初衷是模拟服务器与客户端的通信，我把整个需求简化变成了今天的这个例子。3D机房方面的模拟一般都是需要鹰眼来辅助的，这样找产品以及整个空间的概括会比较明确，在这个例子中我也加了，这篇文章就算是我对这次项目的一个总结吧。对了，这个例子我是参考一个DEMO来完成的，和示例中的显示有些不同，大家莫惊奇。这个例子没有设计师的参与，样式上面大家将就将就，但是我觉得还不错啊，哈哈~进入正题，整个例子差不多用了200行的代码来实现的，这就是我喜欢用 HT 的原因，现在Web3d技术兴起，大体就是分为两派：

2、插件派和HTML5派。HT就是基于HTML5的，不需要安装任何插件，啊，跑题了。。。首先，还是从场景的搭建开始，这个界面是在body体上添加了三个部分：3d组件，属性组件以及拓扑组件（2d组件）。添加的方式是这样的：为了最外层组件加载填充满窗口的方便性，HT的所有组件都有addToDOM函数，其实现逻辑如下，其中iv是invalidate的简写：addToDOM=function(){varself=this,view=self.getView(),style=view.style;document.body.appendChild(view);s

3、tyle.left='0';style.right='0';style.top='0';style.bottom='0';window.addEventListener('resize',function(){self.iv();},false);}因为这个函数是将style中的位置都固定了，所以不能将所有的组件都用这个函数，我们按照这个函数的方式将拓扑组件和属性组件添加进界面中，3d组件直接利用addToDOM函数即可：dm=newht.DataModel();g3d=newht.graph3d.Graph3dView(dm);//3d组件g3d

4、.addToDOM();//将组件添加进body体中g3d.setDashDisabled(false);//开启虚线流动g3d.setMovableFunc(function(){//重载移动函数returnfalse;//返回false，所有的图元都不可移动});g3d.setEye([-813,718,1530]);//设置eyeg3d.setCenter([140,-25,217]);//设置center（target）gv=newht.graph.GraphView(dm);//2d组件gv.getView().className='gr

5、aphview';//HT组件根层都是一个div，通过getView()函数获取document.body.appendChild(gv.getView());//将拓扑组件添加进body体中gv.fitContent(true);//缩放平移整个拓扑以展示所有的图元propertyView=newht.widget.PropertyView(dm);//属性组件propertyView.getView().className='property';propertyView.setWidth(240);//设置组件宽度propertyView.se

6、tHeight(150);//高度document.body.appendChild(propertyView.getView());拓扑组件和属性组件的样式我就不再赘述了，只是设置了一个背景颜色以及leftrighttopbottom位置而已。这里要声明一下，HT组件一般都以设置position为absolute的绝对定位方式。大家可能会好奇，这个鹰眼怎么生成的？在HT中，只要2D和3D共用同一个数据容器dataModel即可共同拥有所有在这个dataModel中的元素，并且位置都是对应的，只需要类似这种做法即可：dm=newht.DataMod

7、el();g3d=newht.graph3d.Graph3dView(dm);gv=newht.graph.GraphView(dm);是不是非常简单。。。可以省去大把时间开发。。。这个例子中除了连线之外的所有元素都是ht.Node类型的节点，所以我们将这个节点的创建方法封装一下，好重复利用：functioncreateNode(p3,s3,name,shape){//创建节点varnode=newht.Node();//创建类型为ht.Node类的节点dm.add(node);//将节点添加进数据容器dataModel中node.s({//设置节

8、点的样式，s为setStyle的简写'shape3d':shape,//指定节点的形体，这边是传入3d模型的json文件'