序言
用 WebGL 3D渲染的 三d 主机房如今也并不是甚么新鮮事情了，这篇文章内容的关键目地是表明1下，三d 主机房中的 eye 和 center 的难题，恰好在新项目选用到了，好生思索了1番，最后感觉这个事例最合乎我的规定，就拿来做为纪录。
实际效果图
这个 三d 主机房的 Demo 做的还非常好，较为美观大方，基本的互动也都考虑，接下看来看如何完成。
编码转化成
界定类
最先从 index.html 中启用的 js 相对路径次序1个1个开启对应的 js，server.js 中自定了1个 Editor.Server 类由 HT 封裝的 ht.Default.def 涵数建立的（留意，建立的类名 Editor.Server 前面的 Editor 不可以用 E 来取代）：
ht.Default.def('Editor.Server', Object, {//第1个主要参数为类名，假如为标识符串，全自动申请注册到HT的classMap中；第2个主要参数为此类要承继的父类；第3个主要参数为方式和自变量的申明
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图元管理中心部位所属三d座标系的y轴部位
this._node.setElevation.apply(this._node, arguments);
}
});
建立 Editor.Server 类
这个类能够建立1个 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,//设定连接点6面的色调
'front.image': frontImg //设定连接点正面的照片
});
};
这样我在必须建立服务器组件的部位立即 new 1个新的服务器组件目标便可，而且可以立即启用大家上面申明的 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 类
这个类相对前面的 Editor.Server 服务器组件类要相对性繁杂1点，这个类中建立了1个柜身、柜门和机柜內部的服务器组件：
var C = E.Cabinet = function(obj) {
var color = obj.color,
doorFrontImg = obj.doorFrontImg,
doorBackImg = obj.doorBackImg,
s3 = obj.s3;
var node = this._node = new ht.Node(); // 柜身
node.s3(s3);//设定连接点的尺寸 为 setSize3d
node.a('cabinet', this);//自定 cabinet 特性
node.s({//设定连接点的款式 为 setStyle
'all.color': color,//设定连接点6面的色调
'front.visible': false//设定连接点前面是不是可见
});
if (Math.random() > 0.5) {
node.addStyleIcon('alarm', {//向连接点上加上 icon 标志
names: ['icon 温度计'],//包括好几个标识符串的数字能量数组，每一个标识符串对应1张照片或矢量(根据ht.Default.setImage申请注册)
face: 'top',//默认设置值为front，标志在三d下的房屋朝向，可赋值left|right|top|bottom|front|back|center
position: 17,//特定icons的部位
autorotate: 'y',//默认设置值为false，标志在三d下是不是全自动房屋朝向双眼的方位
t3: [0, 16, 0],//默认设置值为undefined，标志在三d下的偏位，文件格式为[x,y,z]
width: 37,//特定每一个icon的宽度，默认设置依据申请注册照片时的宽度
height: 32,//特定每一个icon的高宽比，默认设置依据申请注册照片时的高宽比
textureScale: 4,//默认设置值为2，该值意味着运行内存具体转化成贴图的倍数，不宜设定过大不然危害特性
visible: { func: function() { return !!E.alarmVisible; }}//表明该组照片是不是显示信息
});
}
var door = this._door = new ht.DoorWindow();//柜门
door.setWidth(s3[0]);//置图元在三d拓扑中的x轴方位的长度
door.setHeight(1);//设定图元在三d拓扑中的z轴长度
door.setTall(s3[1]);//操纵Node图元在y轴的长度
door.setElevation(0);//设定图元管理中心在三d座标系中的y座标
door.setY(s3[2] * 0.5);//设定连接点在 y 轴的部位
door.setHost(node);//设定吸附
door.s({//设定连接点款式 setStyle
'all.color': color,//设定连接点6面色调
'front.image': doorFrontImg,//设定连接点正面照片
'front.transparent': true,//设定连接点正面是不是全透明
'back.image': doorBackImg,//设定连接点反面的照片
'back.uv': [1,0, 1,1, 0,1, 0,0],//自定连接点后边uv贴图，为空选用默认设置值[0,0, 0,1, 1,1, 1,0]
'dw.axis': 'right'//设定DoorWindow图元进行和关掉实际操作的转动轴，可赋值left|right|top|bottom|v|h
});
var serverList = this._serverList = [];
var max = 6,
list = E.randomList(max, Math.floor(Math.random() * (max - 2)) + 2); //global.js 中申明的获得任意数的涵数
var server, h = s3[0] / 4;
list.forEach(function(r) {
var server = new E.Server({ //服务器组件
color: 'rgb(51,49,49)',
frontImg: '服务器 组件细致'
});
server.s3(s3[0] - 2, h, s3[2] - 4);//设定连接点尺寸
server.setElevation((r - max * 0.5) * (h + 2));//设定连接点管理中心点在 y 轴的座标
server.setHost(node);//设定连接点的吸附
serverList.push(server);//向 serverList 中加上 server 连接点
});
};
上面编码中唯1没提到的是 Editor.randomList 涵数，这个涵数是在 global.js 文档中申明的，申明以下：
var E = window.Editor = {
leftWidth: 0,
topHeight: 40,
randomList: function(max, size) {
var list = [], ran;
while (list.length < size) {
ran = Math.floor(Math.random() * max);
if (list.indexOf(ran) >= 0)
continue;
list.push(ran);
}
return list;
}
};
好了，情景中的各个一部分的类都建立进行，那大家就该将情景建立起来，随后将这些图元都堆进去！
情景建立
假如熟习的同学应当了解，用 HT 建立1个 三d 情景只必须 new 1个 三d 组件，再将根据 addToDOM 涵数将这个情景加上进 body 中便可：
var g3d = E.main = new ht.graph3d.Graph3dView(); //3d 情景
main.js 文档中关键做的是在 三d 情景中1些必要的元素，例如墙面，地板，门，空调和全部的机柜的转化成和排放部位，也有十分关键的互动一部分。
墙体，地板，门，空调合机柜的建立我就不贴编码出来了，有兴趣爱好的请自主查询编码，这里关键说1下双击鼠标机柜和与机柜相关的任何物件（柜门，服务器机器设备）则 三d 中 camera 的视野就会挪动到双击鼠标的机柜的正前方某个部位，并且这个挪动是是非非常丝滑的，以前手艺不精，致使这个一部分想了很久，最终参照了这个 Demo 的完成方式。
以便可以反复地设定 eye 和 center，将设定这两个主要参数对应的內容封裝为 setEye 和 setCenter 方式，setCenter 方式与 setEye 方式相近，这里不反复赘述：
// 设定双眼部位
var setEye = function(eye, finish) {
if (!eye) return;
var e = g3d.getEye().slice(0),//获得当今 eye 的值
dx = eye[0] - e[0],
dy = eye[1] - e[1],
dz = eye[2] - e[2];
// 起动 500 毫秒的动漫过多
ht.Default.startAnim({
duration: 500,
easing: easing,//动漫缓动涵数
finishFunc: finish || function() {}, //动漫完毕后启用的涵数
action: function(v, t) {//设定动漫v意味着根据easing(t)涵数运算后的值，t意味着当今动漫开展的进度[0~1]，1般特性转变依据v主要参数开展
g3d.setEye([ //设定 三d 情景中的 eye 双眼的值，为1个数字能量数组，各自对应 x，y，z 轴的值
e[0] + dx * v,
e[1] + dy * v,
e[2] + dz * v
]);
}
});
};
我沒有反复申明 setCenter 涵数不意味着这个涵数不关键，刚好相反，这个涵数在“视野”挪动的全过程中起到了决策性的功效，上面的 setEye 涵数非常于我想走到我的总体目标部位的前面（最少我界定的情况下是这类主要用途），而 sCenter 的界定则是将我的视野移到了总体目标的部位（例如我能够站在我如今的部位看我右后方的物件，还可以走到我右后方去，站在那个物件前面看它），这点十分关键，请大伙儿好好品位1下。
双击鼠标恶性事件倒是简易，要是监视 HT 封裝好的恶性事件，分辨恶性事件种类，并作出相应的姿势便可：
g3d.mi(function(e) {//addInteractorListener 恶性事件监视涵数
if (e.kind !== 'doubleClickData') //分辨恶性事件种类为双击鼠标连接点
return;
var data = e.data, p3;
if (data.a('cabinet')) //机身
p3 = data.p3();
else {
host = data.getHost(); //获得点一下连接点的吸附目标
if (host && host.a('cabinet')) {//假如吸附目标为 cabinet
p3 = host.p3();
}
}
if (!p3) return;
setCenter(p3); //设定 center 总体目标的要移向部位为 cabinet 的部位
setEye([p3[0], 211, p3[2] + 247]); //设定 eye 双眼要移向的部位
});
顶部导航栏栏
1刚开始看到这个事例的情况下我在想，此人好强大，我用 HT 这么久，用 HT 的 ht.widget.Toolbar 还没能做出这么好看的实际效果，看着看着发现这原先是用 form 表单做的，强大强大，我简直太愚笨了。
var form = E.top = new ht.widget.FormPane(); //顶部 表单组件
form.setRowHeight(E.topHeight);//设定行高
form.setVGap(-E.topHeight);//设定表单组件水平间隔 设定为行高的负值则可使多行处在同1行
form.setVPadding(0);//设定表单顶部和顶部与组件內容的间隔
form.addRow([null, {//向表单中加上1行组件，第1个主要参数为元素数字能量数组，元素可为标识符串、json文件格式叙述的组件主要参数信息内容、html元素或为null
image: {
icon: './symbols/inputBG.json',
stretch: 'centerUniform'
}
}], [40, 260]);//第2个主要参数为每一个元素宽度信息内容数字能量数组，宽度值超过1意味着固定不动肯定值，小于等于1意味着相对性值，也可为80+0.3的组成
form.addRow([null, null, {
id: 'searchInput',
textField: {}
}, {
element: '主机房可视性化管理方法系统软件',
color: 'white',
font: '18px arial, sans-serif'
}, null, {
button: {
// label: '主视图切换',
icon: './symbols/viewChange.json',
background: null,
selectBackground: 'rgb(128,128,128)',
borderColor: 'rgba(0, 0, 0, 0)',
onClicked: function() {
E.focusTo();
}
}
}, null, {
button: {
// label: '告警',
icon: './symbols/alarm.json',
togglable: true,
selected: false,
background: null,
selectBackground: 'rgb(128,128,128)',
borderColor: 'rgba(0, 0, 0, 0)',
onClicked: function(e) {
E.setAlarmVisible(this.isSelected());
}
}
}, null], [40, 42, 218, 300, 0.1, 50, 10, 50, 10]);
以上都只是能完成，可是并沒有真实地加上进 html 标识中，也就代表着，如今页面上甚么都沒有！别忘了在网页页面载入的情况下将 三d 情景加上进 body 中，另外也别忘了将 form 表单加上进 body 中，而且设定对话框尺寸转变恶性事件时，form 表单也必须即时升级：
window.addEventListener('load', function() {
g3d.addToDOM(); //将 三d 情景加上进 body 中
document.body.appendChild(E.top.getView()); //将 form 表单组件最底层 div 加上进 body 中
window.addEventListener('resize', function() {//对话框尺寸转变恶性事件监视
E.top.iv();//升级 form 表单的最底层 div
});
});
这里表明1下 addToDOM 涵数，针对掌握 HT 的体制十分关键。HT 的组件1般都会嵌入 BorderPane、SplitView 和 TabView 等器皿中应用，而最外层的 HT 组件则必须客户手工制作将 getView() 回到的最底层 div 元素加上到网页页面的 DOM 元素中，这里必须留意的是，当父器皿尺寸转变时，假如父器皿是 BorderPane 和 SplitView 等这些 HT 预订义的器皿组件，则 HT 的器皿会全自动递归启用孩子组件invalidate 涵数通告升级。但假如父器皿是原生态的 html 元素， 则 HT 组件没法得知必须升级，因而最外层的 HT 组件1般必须监视 window 的对话框尺寸转变恶性事件，启用最外层组件 invalidate 涵数开展升级。
以便最外层组件载入填填满对话框的便捷性，HT 的全部组件都有 addToDOM 涵数，实际上现逻辑性以下，在其中 iv 是 invalidate 的简写：
addToDOM = function(){
var self = this,
view = self.getView(),
style = view.style;
document.body.appendChild(view); //将情景的最底层 div 加上进 body 中
style.left = '0';//HT 默认设置将全部的组件最底层div的position设定为absolute
style.right = '0';
style.top = '0';
style.bottom = '0';
window.addEventListener('resize', function () { self.iv(); }, false); //对话框尺寸转变监视恶性事件，通告组件转变升级
}
这样，全部的编码就完毕了，能够自身右键“查验”，network 中能够获得相对性应的 json 文档。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。