html3d机房全代码,基于HTML5 WebGL的3D机房的示例

前言

用 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 类