2017/10/19无插件纯Web3D机房，HTML5+WebGL倾力打造-twaver-博客园TWaver的技术博客关注一切U肢术，专注数据可视化博客园首页新随笔联系订阅管理随第-139文章-0评论-348公告无插件纯Web3D机房，HTML5+NebGL倾力打造前言园龄：6年3个月粉丝：142关注：0最近项目开发任务告一设落，刚好有时间整理这大半年的一些成果。使用tm5时间还不久，对s的认识还不够+加关注深入，没动法，以前一直搞va,对3的一些语言特性和概念一时还转换不过来，上一篇大数据呈现第一莲介绍了项目中做的一个彩虹绿炸图，主要用了html5的canvas的2d绘制技术，这一回2017年10月我想介绍一下项目中的一个亮点技术：htm5的3D,以及如问用它打造精美的3D机房监控系统.日二三四五六目标效果图2425262728293012345下图是客户给找的一张的效果参考图，希望机房至少达到下面的3D效果89101112151617181921222324252627282930311234搜索常用链接我的评论我的标签我的标签懂的人都知道，这可是一张设计公司出的装修效果医啊，就算是用max建模，也需要大量的工作，何况咱可是程序员在做数起中心的可视化项目啊。。。屈忍心中奔腾的万干头“马，静下心来思考，那就先从搭建一个wbGLTWaver(31)的场景开始吧TWaver 3D(21)WebGL基本场景搭建3D(13)在html5里面使用3D已经不是什么高深技术，它的基础是WebGL,一个OpenGL的浏览器子集，支持大部分主要WebGL(12)3D功能接口。目前最新的浏览器都有比较好的支持，E需要到11（足的，你没有看错）。TWaver Java(9)MONO Design(9)java(7)要检测你的浏览器是否支持webGL,可直接访问网页http://get..webgl..org/看是否能看到一个旋转的立方体。TWaver Flex(7)如果能看到，说明你的刘览器支持webgGL,否则，可以下一个最新的chromei试试吧。相对来说chrome对webGL的支持最好，效率也很优秀。要在浏览器里面使用wbGL,就要研究webGL相关的技术和用法，做3D应用并不是一件轻松的事。就算最简单的搭建一下w阳bGL场景，也需要下面这些代码：2017年8月(5)2017年7月(3)2017年6月(1)var height-window.innerHeight;2017年5月(1)var container document.createElenent('div'):2016年12月(1)2018年11月(1)2018年6月(1)container.appendchild(webglcanvas)2018年4月(1)http://www.cnblogs.com/twaver/p/4631332.html1212017/10/19无插件纯Web3D机房，HTML5+WebGL倾力打造-twaver-博客园2015年11月(5)function updateFrame (2015年10月(1)2015年9月(1)2015年7月(1)2015年6月(1)function ([updateFrane (]2015年5月)2015年4月2)2015年3月(4)2015年2月(5)function (2015年1月(6)updateFrame()2014年12月(2)2014年11月(1)2014年10月(5)2014年9月(6)和html一样，需要先创建一个canvas元素，并获得其webgl_上下文2014年8月(3)2014年7月2)2014年6月(1)然后在一个pdateFrame的函数中，像html5的2Dc0ntex一样，去绘制3D的内容。2014年5月(1)2013年1月(4)2012年12月(1)的变化是随时随地的，所以需要不停刷新，就除播放电影成视频，静止不动的画面基本没有，所以死循环刷新基2012年11月(4)本是必要的，不过实际项目使用中会有很多优化，尽量做到按需刷新，节省©印和移动设备电量。有感兴想的2012年10月(2)同学，哥可以单独写文章介绍。这段程序基本上什么也没做，就画了一个静止不动的区域，如下图：2012年9月(3)回2012年6月(71凸webgl-init webgl×2012年7月(3)☆2012年6月(5)2012年5月(10)2012年3月5)2012年2月(4)2012年1月(1)2011年12月3)2011年10月(1)2011年9月(3)2011年8月〔6)2011年7月〔10)2011年6月(1)最新评论1.Re:无插件纯Veb3D机房虽然看不见任何3D的内容，不过它己经是一个最简单的ebg程序了。我们的3D机房，也就是在这上面不断丰HTML5+WebGL顷力打造富而已最近正在研究Wb3D方面的东西，求大神对像封装要做项目，搭建下去工作量太大了，时间周期也不允许，使用第三方辅助工具是不可避免的。像Three.s,twaver,js都是进择。这些工具都可以提供3D的基本对象和各种特效，当然这都不是最主要的，主要是如何利用2.Re:无插件纯Web3D机房，它做出我想要的效果：好看。为了避免大量修改代码，在项目里做了一些封装，即把原始3D的立方体等对像进HT1ML5+VebGL顷力打造行进一步封装，让一个son数据就可以提供这些对象的定义。这样使用起来就比较方便了。jso大致结构如下：你好，目前正在学习这个，可以给份源码学var json-kzybc67@126.com拖主失主4.Re:无插件纯Web3D机房，HTML5+VebGL倾力打造下面我们逐一来看这些3D对象是怎么进行美化的，过程可能稍显咽隙，跬步千里，这次的基础打好了，以后的你好，最近在研究这方面的3开发，劳驾发项目就手到摘来了。zhaoyong225124@163.com地板和斜坡-mike007第一个要做的，也是应该比较简单的，就是地板对橡。D中，地板应该是一个有些耳度、带上格子贴图的薄薄立方体平面。因此我对经过封装的立方体对象，用一段so对象定义如下：HTML5+WebGL顷力打造一雨在下type:'cube',width:1600,height:10,阅读排行榜depth:1300,http://www.cnblogs.com/twaver/p/4631332.html2/212017/10/19无插件纯Web3D机房，HTML5+WebGL倾力打造-twaver-博客园style:1.无插件钝Web3D机房，HTML5+VebGL'n.color':FBEC9BE'倾力打造21999)'n.ambient':'BEC9BE',2.HTML5 VebSocket技术介绍(19230)3.HTML5 VebSocket应用示11894)通过定义，创建了一个13米16米的地板块，这也是客户小型机房的实际尺寸：炸图7553)(新增资产管理、动环监控等内容)(7261)评论排行榜2.无插件纯Veb HTML53D机房络结篇3.无插件纯Neb HTML53D机房进阶篇4.HTML5大数据可视化效果（二）可交互地铁线路图(15)5.无插件钝w8b3D机房（第四季：大型园看起来有那么点意思，就是颜色还不够，需要找一个地板砖纹理图。需要注意的是，纹理医的尺寸都需要是宽和高都是2的幂，例收如128x128、256256等，这样出来效果才会好，这也是3D软件一般所要求的，另外纹理要能推荐排行榜连续拼接不露破绽，这样才好。例如下面我go0ge出来的图：1.无插件纯Web3D机房，HTML5+VebGL倾力打造(29)(新增资产管理、动环监控等内容)(11)4.看看这变态的自动布局(5)5.如何用Swing去绘制电力系统图(5)在stMe里面添加：'top.n.taxture.rapaat':new mono.Vac2 (10,10)效果如下：有图片材质纹理，效果果然好多了。突然想到客户说，他们机房底面有一个方便运送设备的斜坡，必须要画出斜坡！肿麽办？后来想到twaver里面的对象可以支持运算，比如可以定义一个斜的立方体，让地板剪掉立方体，就可以做到。于是继续定义js0n:type:'cube',width:200,http://www.cnblogs.com/twaver/p/4631332.html3/212017/10/19无插件纯Web3D机房，HTML5+WebGL倾力打造-twaver-博客园depth:260,trans.1ate:〔-348,0,5301，rotate:[Math.PI/180*3,0,0],style:这里定义的一个倾斜的立方体，通过trans1ate定义位置，otate定义旋转角度，然后再通过op定义运算符，这里是"减去”，就用-表示，被剪掉的立方体也可以设置材质、纹理、贴图、颜色等等，和地板一斜坡，搞定！第一步总算是有惊无险地搞定了。走廊桌下一步找了个简单的对象，按要求走廊要放一个接待桌。为了简单，我决定就愉赖做一个立方体表示type:'cube',w1dth:300,height:50,depth:100,tran81ate:【350,0,-500],效果如下：这里偷懒其实是有原因的。在3D里，最重视的就是效率，干万不要放一些很复杂的模型，尤其是这类非业务对象，就像这个桌子，尽管只是个简单的立方体，但只要和整体风格协调一致，再增加一点配色并启动阴影效果http://www.cnblogs.com/twaver/p/4631332.html4212017/10/19无插件纯Web3D机房，HTML5+WebGL倾力打造-twaver-博客园后，看着就好多了：增加颜色及阴影效果墙体墙体是机房里很重要的一个部分，有好的光照、阴的效果才能看起来更加证真.由于墙体是不规则的路径，一段一段去生成还真挺麻烦的，还好引擎支持这种物体，甚至曲线路径都可以。这里只要在s0里面定义一组数字的坐标，让这些数字依次连接，组成一个墙体，最后生成3D对象放入场景中就行啦。json定义如下：type:'path',width:20,data:[1000,5001,注意这里的类型变成了Patn,ata中定义了一个二维坐标数组来描述墙体，由于墙都是从底面开始的，所以只定义它的平面的x、y坐标就行了。看看效果：不过如前文所说，还是需要上色、上阴影，才能有更好的效果。这里我们启用阴影并咨询设计师美眉几个颜色值，加上去后再看下效果：http://www.cnblogs.com/twaver/p/4631332.html5212017/10/19无插件纯Web3D机房，HTML5+WebGL倾力打造-twaver-博客园上色、加阴影的墙体以及一些细节：门看着雪白的墙，是不是觉得少了点什么？对，就是门.在3D机房的监控系统里，门禁是很重要的一块，客户要求门应该与实际位置相对应，并且要有开门关门的动国效果，这样，实际的门禁信息采集上来后，就能在界面实时看到门的状态了。这里，考虑到门如果直接放上去，会被墙盖住；如果比墙厚，又难看不符合实际，还是应该先定义一个门洞立方体，把门所在的位置挖掉：n3me:门词'，type:'cube',width:195,height:170,depth:30,刚好挖在斜坡的位置，这样设备进屋就方便了：http://www.cnblogs.com/twaver/p/4631332.html