打造最美HTML5 3D机房 —— 第二季重磅回归

前情提要

前阵子写了一篇打造最美html5 3d机房，介绍了如何用html5在网页上创建无插件的精美3d机房场景。这两个月以来，陆续收到很多朋友的鼓（膝）励（盖），受宠若惊之余，对索要源代码的朋友都已经尽力邮件回复。由于精力所限，未能收到的朋友请留言或给我发送邮件：tw-service@servasoft.com。最近项目第二期又要紧锣密鼓地开始了，所以想抓紧把一些新增的内容补充上，进一步完善这个html5 3d机房的呈现效果。

上一篇中主要介绍的是如何从最基础的webgl封装到创建3d物体对象，再通过3d物体对象“搭积木”式的组建整个3d机房场景。这一篇主要介绍一些如何在这个场景上进一步丰富更多的功能和呈现效果，以及实现这些功能在技术上的思路。

首先我们来看看第一季已经实现的纯天然无添加无PS的HTML5 3D机房效果：

已经拿到过代码的朋友应该知道，这一场景是通过一个json文件进行组装和加载，可以很方便地进行修改和维护。在此基础上，这一次我又增加了机柜标签、机柜门、复杂设备、机房走线、人员轨迹等效果，下面我就把第二季的干货一一为大家奉上。

机柜标签

机房中最重要的物理资源——机柜——是机房管理、规划、监控人员最关注的对象之一。对于规模在几十个、上百个甚至上千个机柜的机房，每个机柜必然会进行资产编号，方便检索和管理。这个在多数资产管理系统中，都是最基本的。但是在3d场景中，如何显示这些机柜编号，才能让用户更直观的看到每个机柜的位置呢？

传统的方式是用标签显示资产编号，例如可以用“告警冒泡”那样的方式显示一个文字气泡。不过当机柜产生告警时，两个气泡会有所冲突。而且过多的气泡会产生相互遮挡覆盖，有点混乱，比如像这样：

因此我尝试了一种不同的思路：把文字渲染到一个内存图片，“溶解”到机柜的上方贴图中。

想要生成一个内存的图片文字，可以通过下面的函数实现：

    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.fillStyle='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后，可以这样直接贴图使用：