前言
用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了，这篇文章的主要目的是说明一下，3D 机房中的 eye 和 center 的问题，刚好在项目中用上了，好生思考了一番，最终觉得这个例子最符合我的要求，就拿来作为记录。
效果图
这个 3D 机房的 Demo 做的还不错，比较美观，基础的交互也都满足，接下来看看怎么实现。
代码生成
定义类
首先从 index.html 中调用的 js 路径顺序一个一个打开对应的 js，server.js 中自定义了一个 Editor.Server 类由 HT 封装的 ht.Default.def 函数创建的（注意，创建的类名 Editor.Server 前面的 Editor 不能用 E 来替代）：
| ht.Default.def('Editor.Server', Object, {//第一个参数为类名，如果为字符串，自动注册到HT的classMap中；第二个参数为此类要继承的父类；第三个参数为方法和变量的声明 addToDataModel: function(dm) { //将节点添加进数据容器 dm.add(this._node);// ht 中的预定义函数，将节点通过 add 方法添加进数据容器中 }, setHost: function() { //设置吸附 this._node.setHost.apply(this._node, arguments); }, s3: function() {//设置节点的大小 this._node.s3.apply(this._node, arguments); }, setElevation: function() {//控制Node图元中心位置所在3D坐标系的y轴位置 this._node.setElevation.apply(this._node, arguments); } }); |
创建 Editor.Server 类
这个类可以创建一个 ht.Node 节点，并设置节点的颜色和前面贴图：
| var S = E.Server = function(obj) {//服务器组件 var color = obj.color, frontImg = obj.frontImg; var node = this._node = new ht.Node();//创建节点 node.s({//设置节点的样式 s 为 setStyle 的缩写 'all.color': color,//设置节点六面的颜色 'front.image': frontImg //设置节点正面的图片 }); }; |
这样我在需要创建服务器组件的位置直接 new 一个新的服务器组件对象即可，并且能够直接调用我们上面声明的 setHost 等函数，很快我们就会用上。
接下来创建 Editor.Cabinet 机柜类 ，方法跟上面 Editor.Server 类的定义方法差不多：
| ht.Default.def('Editor.Cabinet', Object, { addToDataModel: function(dm) { dm.add(this._door); dm.add(this._node); this._serverList.forEach(function(s) { s.addToDataModel(dm); }); }, p3: function() { this._node.p3.apply(this._node, arguments);//设置节点的 3d 坐标 } }); |
创建 Editor.Cabinet 类
