前言

初次见面的朋友们大家好，这篇文章是“打造最美3D机房”系列的第4季，感兴趣的朋友可从头开始观看，以下是正确的浏览顺序：

打造最美3D机房（第1季：从零开始搭建Web 3D机房）
打造最美3D机房（第2季：机柜和装备）
打造最美3D机房（第3季：资产管理和动环监控）

答1些读者问

阔别了半年多，哥其实没闲着，在憋大招来着。期间陆续收到朋友的留言和来信，提了很多特别棒的意见和想法，项目也有了很大的进展，在接下来的文章里，哥会忘我和大家分享。

不扯了，进入正题。首先，想说1个最近1直在和大家探讨的问题：HTML5好还是插件好？

不管是在学习还是在做项目的1些朋友都提到了这个问题。虽然web3d技术风起云涌，大体还是分为两大流派：插件派和HTML5派。插件派的技术线路是，在阅读器中安装1个企业自己做的插件，然后在这个插件上提供3D的开发能力。典型代表例如Flash插件、Unity3D插件（简称U3D）。另外1派就是无插件的HTML5线路，它使用H5的WEBGL标准和Canvas技术来实现阅读器中的3D/2D技术，而无需安装插件。

插件的好处是可以适配各种老型号的阅读器（例如老版本的IE），效力应当也会好1点。缺点是，需要安装插件，跨手机平板也麻烦，语言上要使用插件要求的语言。HTML5的好处是不安装插件，效力也很不错，语言简单统1，都是javascript，而且是目前最火的技术方向。

本人相信 “插件必死”的发展趋势。要是不服，就看看Flash，和那些被坑在Flex技术上现在还爬不出来眼看着他人学HTML5拿高薪恨得吐血的程序猿们吧。谁又能保证Unity3D不会有1天变成另外1个Flash呢？看看现在日新月异每天大量出现的HTML5技术和利用，我们有时间争辩插件好还是H5好这样的无聊问题，还不照实实在在地干起来。达成共鸣后，我们来开始看此次的1大波更新。

鹰眼

上次的小机房功能已基本完成了，客户对演示效果也非常满意。由于客户使用过我们之前做的2D系统，看到过鹰眼功能（也就是缩略图），所以这次绝不犹豫也要求3D机房监控界面增加鹰眼功能。这个把哥难了1阵子。

为了寻觅思路，哥首先打开了我们之前做过的2D的拓扑图，寻觅灵感。鹰眼看上去是这模样的：

编程之家

上面的界面是同事给客户做的虚拟机开通、配置的编辑界面，右下角的这块试图就是鹰眼缩略图。咨询同事，他说鹰眼在2D实现的时候，可以斟酌把2D大图做1个内存缩略图更新到鹰眼视图，或在大图产生任何属性变化时候进行监听，然后动态生成缩略图更新鹰眼视图。不过在3D里面会有所不同：弄1个小尺寸的webgl的canvas实时刷新，应当负载也不大。所以决定再new1个network放在右下角试试：

var overview = new mono.Overview3D(network);
overview.adjustBounds(200,200);
var rootView = overview.getRootView();
network3d.getRootView().appendChild(rootView);

同时，还要把镜头固定到头顶上方垂直向下看，并去掉鼠标的交互机制。经过1番折腾，终究把1个鹰眼画布放在大的场景画布的右下方，看看效果：

编程之家