HTMLWebGLD机房开发实例
26页1、HTML5+WebGL 3D 机房开发实例前阵子写了一篇 HMTL5 3D 机房开发的例子,介绍了如何用 html5 在网页上创建无插件的精美 3d 机房场景,收到很多朋友的鼓励,深表感谢。对于索要源代码的朋友,已经尽力邮件回复。由于精力所限,如未能收到的朋友请留言或给我发送邮件:tw-。最近项目第二期又要紧锣密鼓地开始了,所以想抓紧把一些新增的内容补充上,进一步完善这个 html5 3d 机房的呈现效果。上一篇中主要介绍的是如何从最基础的 webgl 封装到创建 3d 物体对象,再通过 3d 物体对象“搭积木”式的组建整个 3d 机房场景。这一篇主要介绍一些如何在这个场景上进一步丰富更多的功能和呈现效果,以及实现这些功能在技术上的思路。首先我们来看看上一期已经实现的纯天然无添加无 PS 的 HTML5 3D 机房效果:已经拿到过代码的朋友应该知道,这一场景可通过一个 json 文件进行组装和加载,可以很方便地进行修改和维护。在此基础上,这一次我又增加了”机柜标签、机柜门、复杂设备、机房走线、人员轨迹“等效果,下面我就把第二季的干货一一为大家奉上。机柜标签机房中最重要的物理资源机柜是机
2、房管理、规划、监控人员最关注的对象之一。对于规模在几十个、上百个甚至上千个机柜的机房,每个机柜必然会进行资产编号,方便检索和管理。这个在多数资产管理系统中,都是最基本的。但是在 3d 场景中,如何显示这些机柜编号,才能让用户更直观的看到每个机柜的位置呢?传统的方式是用标签显示资产编号,例如可以用“告警冒泡”那样的方式显示一个文字气泡。不过当机柜产生告警时,两个气泡会有所冲突。而且过多的气泡会产生相互遮挡覆盖,有点混乱,比如像这样:因此我尝试了一种不同的思路:把文字渲染到一个内存图片,“溶解”到机柜的上方贴图中。想要生成一个内存的图片文字,可以通过下面的函数实现:Js 代代码码 .generateAssetImage: function(text) .var width=512, height=256; . .var canvas = document.createElement(canvas); .canvas.width = width; .canvas.height = height; . .var ctx = canvas.getContext(2d); .ctx.fillSty
3、le=white; .ctx.fillRect(0,0,width,height); .ctx.font = 150+px “Microsoft Yahei“ bold; .ctx.fillStyle = black; .ctx.textAlign = center; .ctx.textBaseline = middle; .ctx.fillText(text, width/2,height/2); .ctx.strokeStyle=black; .ctx.lineWidth=15; .ctx.strokeText(text, width/2,height/2); . .return canvas; . 需要留意的是:1. 生成的图片宽高数值最好是 2 的幂,例如 128、256、512 等,这样在 3d 中渲染不容易出现闪烁和锯齿。相关原理请查阅 google。2. 文字绘制尽量居中、充满整个图,不要太小,否则看上去比较奇怪。3. 空白处保持透明,不必填充色,方便和机柜本身贴图的“溶解”。4. 直接返回 canvas 对象即可,不必生成图片点阵数组。生成 canvas 后,可以这样直
4、接贴图使用:Js 代代码码 .var labelCanvas=demo.Default.generateAssetImage(label); .rack.setStyle(top.m.texture.image, labelCanvas); .rack.setStyle(top.m.specularmap.image, labelCanvas); 通过上面代码,把贴图作为机柜立方体 top 面的贴图和反射映射图。这样出来的效果如下:这样,既不用增加 3d 对象,也不影响机柜的美观度,关键是看得非常清晰,在大场景中也不干扰用户的视线:机柜门上一篇里,由于时间紧迫,也考虑到呈现效率,机柜采用了“双击机柜出现设备”的方案。一个立方体的机柜虽然简单直接,但是没有机柜门,总觉得假了一点,客户也提到了这一点,因此按照机房门的思路,增加一个机柜门,增加双击开门的效果,这个比较简单:Js 代代码码 .var rackDoor = new mono.Cube(width, height, 2); .rackDoor.s( .m.type:phong, .m.color: #A5F1B5, .m.ambi
《HTMLWebGLD机房开发实例》由会员206****923分享,可在线阅读,更多相关《HTMLWebGLD机房开发实例》请在金锄头文库上搜索。
人教版小学英语单词分类记忆汇总表excel版
人教版九年级全一册英语词汇
2019年开展垃圾分类的工作总结报告【五篇】
六年级英语绘本教案
外研版小学英语单词表全带音标(一年级起点1-12册)
最新国家开放大学电大投资学网络核心课形考网考作业及答案
初中人教版七年级下册生物复习提纲
高中英语语法大全高中英语语法系统全解word版
☆初中英语语法专项练习习题以及答案
初中英语常考近义词同义词辨析
高中物理选修3-5全套教案(人教版) (1)
英语绘本《WeatherReport》教学设计
防护功能平战转换设计专篇各专业
初中人教版七年级上册下册全册生物复习提纲21页 (1)
商务星球版七年级上册地理知识点归纳总结
初中人教版七年级上册下册全册生物复习提纲21页 (2)
高中高考语文作文词汇句型优美句子万能语句大全
中考地理选择题专项复习550题含答案
北师大版七年级数学上册第四章基本平面图形单元测试题含解析
人教版七年级数学上册第一章有理数单元检测题解析版
2024-04-23 12页
2024-04-23 5页
2024-04-23 4页
2024-04-23 4页
2024-04-23 5页
2024-04-23 6页
2024-04-22 11页
2024-04-22 10页
2024-04-22 7页
2024-04-19 6页