使用three.js创建3D机房模型-分享一
序：前段时间公司一次研讨会上，一市场部同事展现了同行业其他公司的3D机房，我司领导觉得这个可以研究研究，为了节约成本，我们在网上大量检索，派本人研究一下web3D的技术，于是乎便有了下面的技术分享。
其它相关文章：
使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)
使用webgl(three.js)创建3D机房(升级版)-普通机房
如何用webgl(three.js)搭建一个3D库房-第一课
如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课
使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课
如何用webgl(three.js)搭建不规则建筑模型，客流量热力图模拟
一、本着开源的思想，使用three.js框架，封装常用的模型库。先学着那位前辈的样子，使用ThreeJS画出类似的效果图，只是稍微有点丑，看官莫怪。
二、源码
封装自己的模型库，这是初始的模型库，较为简陋了 ，牛逼的库都是不断的迭代个几百次的，不到的地方还望指正，互相学习共同进步
--这里封装一下 就叫做.js--
1 /*
12 function () { }
13 var Obj = null;
14 w3dshow.prototype.start = function () {
15 //此处用于判断浏览器
16
17 //开始
18 var _this = this;
19 Obj = _this;
20 _this.initThree(_this.fId);
21 _this.initCamera();
22 _this.initScene();
23 _ 26 //添加3D对象
27 $.each(_this.objList, function (index,_obj) {
28 _this.InitAddObject(_obj);
29 });
30 _this.initMouseCtrl();
31 //创建按钮
32 _this.addBtns(_this.btns);
33
34 _this.animation();
35
36 }
37 /*
38 方法：初始化
39 fid 画布所属div的Id
40 option:参数 {
41 antialias:true,//抗锯齿效果为设置有效
42 clearCoolr:0xFFFFFF,
43 showHelpGrid:false,//是否显示网格线
44 }
45 */
46 w3dshow.prototype.init = function (_fId, _option,_datajson) {
47 //参数处理
48 this.option = new Object();
49 this.opt 器
57 this.camera = null;//摄像机
58 this.scene = null;//场景
59 this.SELECTED=null;
60 this.objects = [];
61 this.mouseClick = new THREE.Vector2();
62 this.raycaster = new THREE.Raycaster();
63 this.controls = null;//鼠标控制器
64 this.objList = _datajson.objects;//对象列表
65 this.eventList = _datajson.events;//事件对象列表
66 this.btns = _datajson.btns;//按钮列表
67 var _this = this;
68 }
69 //初始化渲染器
70 w3dshow.prototype.initThree = function () {
71 var _this = this;
72 _this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: _this.option.antialias });
73 _this oft = true;
78 //事件
79 _this.renderer.domElement.addEventListener('mousedown', _this.onDocumentMouseDown, false);
80 _this.renderer.domElement.addEventListener('mousemove', _this.onDocumentMouseMove, false);
81 }
82 //初始化摄像机
83 w3dshow.prototype.initCamera = function () {
84 var _this = this;
85 _this.camera = new THREE.PerspectiveCamera(45, _this.width / _this.height, 1, 100000);
86 _this.camera.name = 'mainCamera';
87 _this.camera.position.x =0;
88 _thi x: 0, y: 0, z: 0 });
94 _this.objects.push(_this.camera);
95 }
96 //创建场景
97 w3dshow.prototype.initScene=function() {
98 var _this = this;
99 _this.scene = new THREE.Scene();
100 }
101 //添加对象
102 w3dshow.prototype.addObject = function (_obj) {
103 var _this = Obj;
104 _this.objects.push(_obj);
105 _this.scene.add(_obj);
106 }
107 //创建网格线
108 w3dshow.prototype.initHelpGrid = function () {
ototype.initLight = function () {
117 /*
118 AmbientLight: 环境光，基础光源，它的颜色会被加载到整个场景和所有对象的当前颜色上。
119 PointLight：点光源，朝着所有方向都发射光线
120 SpotLight ：聚光灯光源：类型台灯，天花板上的吊灯，手电筒等
121 DirectionalLight：方向光，又称无限光，从这个发出的光源可以看做是平行光.
122 */
123 var _this = this;
124 var light = new THREE.AmbientLight(0xcccccc);
125 light.position.set(0, 0,0);
126 _this.scene.add(light);
127 var ligh
134 }
135 //创建鼠标控制器
136 w3dshow.prototype.initMouseCtrl=function() {
137 var _this = thi 140 }
141 //控制器回调
142 w3dshow.prototype.updateControls = function () {
143
144 //controls.update();
145 }
146 //循环渲染界面
147 w3dshow.prototype.animation = function () {
148 var _this = Obj;
149 if (TWEEN != null && typeof (TWEEN) != 'undefined') {
150 TWEEN.update();
151 }
152 154 }
155
156 /*
157 添加对象
158 */
159 w3dshow.prototype.InitAddObject = function (_obj) {
160 192 }
193
194 //创建地板
195 w3dshow.prototype.CreateFloor = function (_obj) {
196 v 199 }
200 //创建墙体
201 w3dshow.prototype.CreateWall = function (_this, _obj) {
202 if (_this == null) {
203 //。。。 249 }
250 //挖洞
251 w3dshow.prototype.CreateHole = function (_this, _obj) {
252 if (_this == null) {
253 _this = this;
254 }
255 290 }
291 //模型合并 使用ThreeBSP插件mergeOP计算方式 -表示减去 +表示加上
292 w3dshow.prototype.mergeModel = function (_this, mergeOP, _fobj, _sobj) {
293 326 result.uuid= _fobj.uuid+mergeOP+_sobj.uuid;
327 result.name=_fobj.name+mergeOP+_sobj.name;
328 result.material.needsUpdate = true;
329 result.geometry.buffersNeedUpdate = true;
330 result.geometry.uvsNeedUpdate = true;
331 var _foreFaceSkin = null;
332 for (var i = 0; i < result.geometry.faces.length; i++) {
333 var _faceset = false;
334 for (var j = 0; j < _fobj.geometry.faces.length; j++) {
335 if (result.geometry.faces[i].vertexNormals[0].x === _fobj.geometry.faces[j].vertexNormals[0].x
336 && result.geometry.faces[i].vertexNormals[0].y === _fobj.geometry.faces[j].vertexNormals[0].y
337 && result.geometry.faces[i].vertexNormals[0].z === _fobj.geometry.faces[j].vertexNormals[0].z
338 && result.geometry.faces[i].vertexNormals[1].x === _fobj.geometry.faces[j].vertexNormals[1].x
339 && result.geometry.faces[i].vertexNormals[1].y === _fobj.geometry.faces[j].vertexNormals[1].y
340 && result.geometry.faces[i].vertexNormals[1].z === _fobj.geometry.faces[j].vertexNormals[1].z
341 && result.geometry.faces[i].vertexNormals[2].x === _fobj.geometry.faces[j].vertexNormals[2].x
342 etry.faces[j].color.b * 0x0000ff;
346 _faceset =true;
347 }
348 }
349 if (_faceset == false){
350 for(var j = 0; j < _sobj.geometry.faces.length; j++) {
351 if (result.geometry.faces[i].vertexNormals[0].x === _sobj.geometry.faces[j].vertexNormals[0].x
352 && result.geometry.faces[i].vertexNormals[0].y === _sobj.geometry.faces[j].vertexNormals[0].y
353 && result.geometry.faces[i].vertexNormals[0].z === _sobj.geometry.faces[j].vertexNormals[0].z
354 && result.geometry.faces[i].vertexNormals[1].x === _sobj.geometry.faces[j].vertexNormals[1].x
355 && result.geometry.faces[i].vertexNormals[1].y === _sobj.geometry.faces[j].vertexNormals[1].y
356 364 }
365 }
366 }
367 if (_faceset == false) {
368 result.geometry.faces[i].color.setHex(_foreFaceSkin);
369 }
370 // result.geometry.faces[i].materialIndex = i
371 }
372 result.castShadow = true;
373 result.receiveShadow = true;
374 return result;
375 }
376 //创建盒子体
377 w3dshow.prototype.createCube = function (_this, _obj) {
378 if (_this == null) {
379 _this = this;
380 }
381 var _length = _obj.length || 1000;//默认1000
382 var _width = _obj.width || _length;
383 var _h
395 var skin_up_obj = {
396 vertexColors: THREE.FaceColors
397 }
398 var skin_down_obj = skin_up_obj,
399 skin_fore_obj = skin_up_obj,
400 skin_behind_obj = skin_up_obj,
401 skin_left_obj = skin_up_obj,
402 skin_right_obj = skin_up_obj;
403 var skin_opacity = 1;
404 if (_obj.style != null && typeof (_obj.style) != 'undefined'
405 && _obj.style.skin != null && typeof (_obj.style.skin) != 'undefined') {
406 //透明度
407 if (_obj.style.skin.opacity != null && typeof (_obj.style.skin.opacity) != 'undefined') {
408 skin_opacity = _obj.style.skin.opacity;
409 console.log(skin_opacity)
410 }
411 //上
412 skin_up_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_up, cubeGeometry, 4);
413 //下
414 skin_down_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_down, cubeGeometry, 6);
415 //前
416 skin_fore_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_fore, cubeGeometry, 0);
417 //后
418 skin_behind_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_behind, cubeGeometry, 2);
419 //左
420 skin_left_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_left, cubeGeometry, 8);
421 //右
422 skin_right_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_right, cubeGeometry, 10);
423 }
424 var cubeMaterialArray = [];
425 cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_fore_obj));
426 cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_behind_obj));
427 cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_up_obj));
428 cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_down_obj));
429 cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_right_obj));
430 cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_left_obj));
431 var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray);
432 cube = new THREE.Mesh(cubeGeometry, cubeMaterials);
433 cube.castShadow = true;
434 cube.receiveShadow = true;
435 cube.uuid = _obj.uuid;
436 cube.name = 446 break;
447 case 'z':
448 cube.rotateZ(rotation_obj.degree);
449 break;
450 case 'arb':
451 cube.rotateOnAxis(new THREE.Vector3(rotation_obj.degree[0], rotation_obj.degree[1], rotation_obj.degree[2]), rotation_obj.degree[3]);
452 break;
453 }
454 });
455 }
456
457 return cube;
458 }
459 //创建二维平面-长方形
460 w3dshow.prototype.createPlaneGeometry = function (_this,_obj) {
461 //options={
462 // width:0,
463 // height:0,
464 // pic:"",
465 // transparent:true,
466 // opacity:1
467 // blending:false,
468 //position: { x:,y:,z:},
469 //rotation: { x:,y:,z:},
470 //}
471
472 var options = _obj;
473 if (typeof options.pic == "string") {//传入的材质是图片路径，使用 textureloader加载图片作为材质
474 var loader = new THREE.TextureLoader();
475 loader.setCrossOrigin(this.crossOrigin);
476 var texture = loader.load(options.pic, function () { }, undefined, function () { });
477 } else {
478 var texture = new THREE.CanvasTexture(options.pic)
479 }
480 var MaterParam = {//材质的参数
481 map: texture,
482 overdraw: true,
483 side: THREE.FrontSide,
484 // blending: THREE.AdditiveBlending,
485 transparent: options.transparent,
486 //needsUpdate:true,
487 //premultipliedAlpha: true,
488 opacity: options.opacity
489 }
490 if (options.blending) {
491 MaterParam.blending = THREE.AdditiveBlending//使用饱和度叠加渲染
492 }
493 var plane = new THREE.Mesh(
494 new THREE.PlaneGeometry(options.width, options.height, 1, 1),
495 new THREE.MeshBasicMaterial(MaterParam)
496 );
497 plane.position.x = options.position.x;
498 502 plane.rotation.z = options.rotation.z;
503 return plane;
504 }
505 //创建空柜子
506 w3dshow.prototype.createEmptyCabinet = function (_this, _obj) {
507 /* 参数demo
508 {
509 show:true,
510 name: 'test',
511 uuid: 'test',
512 rotation: [{ direction: 'y', degree: 0.25*Math.PI}],//旋转 uuid:'',
513 objType: 'emptyCabinet',
514 transparent:true,
515 size:{length:50,width:60,height:200, thick:2},
516 position: { x: -220, y: 105, z: -150 },
517 doors: {
518 doorType:'lr',// ud门 lr左右门
519 doorSize:[1],
520 skins:[ {
521 skinColor: 0x333333,
522 skin_fore: {
523 imgurl: "../datacenterdemo/res/rack_door_back.jpg",
524 },
525 skin_behind: {
526 imgurl: "../datacenterdemo/res/rack_front_door.jpg",
527 }
528 }]
529 },
530 skin:{
531 skinColor: 0xdddddd,
532
533 skin:{
534 skinColor: 0xdddddd,
535 skin_up: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
536 skin_down: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
537 skin_fore: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
538 skin_behind: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
539 skin_left: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
540 skin_right: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
541 }
542
543 }
544 }
545 */
546 var _this = Obj;
547 //创建五个面
548 //上
549 var upobj= {
550 show: true,
551 uuid: "",
552 name: '',
553 objType: 'cube',
554 length: _obj.size.length+1,
555 width: _obj.size.width ,
556 height: _obj.size.thick + 1,
557 x: _obj.position.x+1,
558 y: _obj.position.y+(_obj.size.height/2-_obj.size.thick/2),
559 z:_obj.position.z,
560 style: {
561 skinColor: _obj.skin.skinColor,
562 skin: _obj.skin.skin_up.skin
563 }
564 }
565 var upcube = _this.createCube(_this, upobj);
566 //左
567 var leftobj = {
568 show: true,
569 uuid: "",
570 name: '',
571 objType: 'cube',
572 length: _obj.size.length,
573 width: _obj.size.thick,
574 height: _obj.size.height,
575 x: 0,
576 y: -(_obj.size.height / 2 - _obj.size.thick / 2),
577 z: 0 - (_obj.size.width / 2 - _obj.size.thick / 2) - 1,
578 style: {
579 skinColor: _obj.skin.skinColor,
580 skin: _obj.skin.skin_left.skin
581 }
582 }
583 var leftcube = _this.createCube(_this, leftobj);
584 var Cabinet = _this.mergeModel(_this, '+', upcube, leftcube);
585 //右
586 var Rightobj = {
587 show: true,
588 uuid: "",
589 name: '',
590 objType: 'cube',
591 length: _obj.size.length,
592 width: _obj.size.thick,
593 height: _obj.size.height,
594 x: 0,
595 y: -(_obj.size.height / 2 - _obj.size.thick / 2),
596 z: (_obj.size.width / 2 - _obj.size.thick / 2)+1,
597 style: {
598 skinColor: _obj.skin.skinColor,
599 skin: _obj.skin.skin_right.skin
600 }
601 }
602 var Rightcube = _this.createCube(_this, Rightobj);
603 Cabinet = _this.mergeModel(_this, '+', Cabinet, Rightcube);
604 //后
605 var Behidobj = {
606 show: true,
607 uuid: "",
608 name: '',
609 objType: 'cube',
610 length: _obj.size.thick,
611 width: _obj.size.width,
612 height: _obj.size.height,
613 x: (_obj.size.length / 2 - _obj.size.thick / 2)+1,
614 y: -(_obj.size.height / 2 - _obj.size.thick / 2),
615 z:0,
616 style: {
617 skinColor: _obj.skin.skinColor,
618 skin: _obj.skin.skin_behind.skin
619 }
620 }
621 var Behindcube = _this.createCube(_this, Behidobj);
622 Cabinet = _this.mergeModel(_this, '+', Cabinet, Behindcube);
623 //下
624 var Downobj = {
625 show: true,
626 uuid: "",
627 name: '',
628 objType: 'cube',
629 length: _obj.size.length+1,
630 width: _obj.size.width,
631 height: _obj.size.thick,
632 645 tempobj.name = _obj.name;
646 tempobj.uuid = _obj.uuid;
647 Cabinet.name = _obj.shellname,
648 _this.objects.push(Cabinet);
649 tempobj.position = Cabinet.position;
650 //门
651 if (_obj.doors != null && typeof (_obj.doors) != 'undefined') {
652 var doors = _obj.doors;
653 if (doors.skins.length == 1) {//单门
654 var singledoorobj = {
655 show: true,
656 uuid:"",
657 name: _obj.doors.doorname[0],
658 objType: 'cube',
659 length: _obj.size.thick,
660 width: _obj.size.width,
661 height: _obj.size.height,
662 x: _obj.position.x - _obj.size.length / 2 - _obj.size.thick / 2,
663 y: _obj.position.y,
664 672 tempobj.add(singledoorcube);
673 } else if (doors.skins.length > 1) {//多门
674
675
676 }
677
678 }
679
680 if (_obj.rotation != null && typeof (_obj.rotation) != 'undefined' && _obj.rotation.length > 0) {
681 $.each(_obj.rotation, function (index, rotation_obj) {
682 switch (rotation_obj.direction) {
683 case 'x':
684 tempobj.rotateX(rotation_obj.degree);
685 break;
686 696 });
697 }
698 tation.y;
706 var tmpobj2 = _this.createPlaneGeometry(_this, _obj);
dth = 128,imgheight=128;
712 if (_obj.width != null&& typeof (_obj.width) != 'undefined') {
713 imgwidth = _obj.width;
714 }
715 if (_obj.height != null && typeof (_obj.height) != 'undefined') {
716 imgheight = _obj.height;
717 }
718 var texture = new THREE.TextureLoader().load(_obj.imgurl);
719 var _repeat = false;
720 if (_obj.repeatx != null && typeof (_obj.repeatx) != 'undefined' && _obj.repeatx==true) {
721 texture.wrapS = THREE.RepeatWrapping;
722 _repeat = true;
723 }
724 if (_obj.repeaty != null && typeof (_obj.repeaty) != 'undefined' && _obj.repeaty == true) {
725 texture.wrapT = THREE.RepeatWrapping;
726 _repeat = true; 736 if (_this.commonFunc.hasObj(_obj.imgurl)) {
737 return {
738 map: _this.createSkin(flength, fwidth, _obj),transparent:true
739 }
740 } else {
741 if (_this.commonFunc.hasObj(_obj.skinColor)) {
742 _cube.faces[_cubefacenub].color.setHex(_obj.skinColor);
743 _cube.faces[_cubefacenub + 1].color.setHex(_obj.skinColor);
744 }
745 770 $.each(_this.objects, function (index,_obj) {
771 if (_obj.name != null && _obj.name != '') {
772 if (_obj.name == _objname) {
773 findedobj = _obj;
774 return true;
775 }
776 }
777 });
778 return findedobj;
779 },
780 //复制对象
781 cloneObj: function (_objname, newparam) {
782 /*newparam
783 {
784 show: true,
785 uuid:
786 copyfrom: 'cabinet1_1',
787 name:
788 childrenname:[]
789 objType: 'cloneObj',
790 position:{x:y:z:}//相对复制品的
791 scale:{x:1,y:1,z:1}
792 rotation: [{ direction: 'y', degree: 0.25*Math.PI}],//旋转 uuid:'',
793 tion) {
820 case 'x':
821 newobj.rotateX(rotation_obj.degree);
822 break;
823 case 'y':
824 834 }
835 newobj.name = newparam.name;
836 newobj.uuid = newparam.uuid;
837 return h > 0) {
847 $.each(_obj.material.materials, function (index,obj) {
848 obj.emissive.setHex(_color);
849 });
850 }
851 }
852 },
853 //添加图片标识
854 addIdentification: function (_objname, _obj) {
855 /*
856 879 },
880 //添加文字
881 makeTextSprite: function (_objname, parameters)
882 {
883 var _this = Obj;
884 909 sprite.name = parameters.name;
910 sprite.scale.set(0.5 * fontsize, 0.25 * fontsize, 0.75 * fontsize);
911 _this.addObject(sprite);
912 }
913 }
914 w3dshow.prototype.loadObj = function (_obj) {
915 var jsload 927 });
928 }
929
930 //添加按钮
931 w3dshow.prototype.addBtns = function (_btnobjs) {
9 _obj.btnTitle + '" id="' + _obj.btnid + '" />');
937
947 var dbclick =0;
948 w3dshow.prototype.onDocumentMouseDown = function (event) {
949 dbclick++;
950 var _this = Obj;
951 984
985 }
986
987
988 w3dshow.prototype.addTestObj = function () {
989
990 var _this = Obj;
991
992 // 0*Math.PI, z: 0 },
1014 // blending: false
1015 //});
1016 }
三、库也封装好了 下面就直接用呗
这个也存成一个文件，姑且先叫做data.js吧
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
|
该封的都封好了
然后就创建一个页面直接运行呗，那就简单了，直接在onload事件里面调用一下 就行了。
其它相关文章：
如何用webgl(three.js)搭建一个3D库房-第一课
如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课
使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课
如何用webgl(three.js)搭建不规则建筑模型，客流量热力图模拟
使用webgl(three.js)创建3D机房(升级版)-普通机房
好了，先写这么多，嘻嘻，其实也没写啥东西 全是贴码
后面再加博文讲解吧。
本人也是three.js的初学者，不正的地方，还望大牛前辈指点。
交流邮箱：[email protected]
使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)
序：
上节课已经详细描述了普通机房的实现过程，文章地址（https://www.cnblogs.com/yeyunfei/p/10473021.html）
紧接着上节课的内容 我们这节可来详细讲解机房微模块的三维实现
首先我们先看一下整体的效果图：
这是单个微模块的模拟最后的系统效果
下面我们进入正文，详细讲解创建过程（机房的以及其它动力环境的创建 前面的课程已经讲诉 这里不在累赘描述）
一、创建组件
正所谓造车得现有轮子，那么搭建整个机房得先创建一个个小的组件，最后组合成大的模块。我们的步骤是由内而外。
1.1、先创建服务器，大量的json参数 利于控制服务器的所有属性
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
|
1.2、服务器端口
var postParam=webApi.getPortsFromServerByServerid(serverid);//获取服务端口参数
| 1 |
|
2.1机柜模型实现
由于机柜的模型是可以运动分解的模型 这样模型的代码要稍微多一点 这样才能做到控制机柜的每一个有意义的零件
机柜模型代码如下：
{
show: true,
name: 'cabinet3',
actionSign: "cabinet1",
shellname: 'cabinet3_emptyCabinetshell',
uuid: '',
// rotation: [{ direction: 'y', degree: 0.25*Math.PI}],//旋转 uuid:'',
objType: 'emptyCabinet2',
transparent: true,
size: { length: 66, width: 70, height: 200, thick: 2 },
position: { x: 0, y: 305, z: 0 },
doors: {
doorType: 'lr',// ud上下门 lr左右门 单门可以缺省
doorSize: [1],
doorname: ['cabinet3_emptyCabinetdoor_01'],
skins: [{
skinColor: 0x333333,
skin_fore: {
imgurl: "../../img/3dImg/rack_door_back.jpg",
},
skin_behind: {
imgurl: "../../img/3dImg/rack_front_door.jpg",
}
}]
},
style: {
skinColor: 0xff0000,
skin: {
skinColor: 0xff0000,
skin_up: { imgurl: "../../img/3dImg/rack_door_back.jpg" },
skin_down: { imgurl: "../../img/3dImg/rack_door_back.jpg" },
skin_fore: {
skinColor: 0xff0000,
imgurl: "../../img/3dImg/rack1.png"
},
skin_behind: {
skinColor: 0xff0000,
imgurl: "../../img/3dImg/rack2.png"
},
skin_left: { imgurl: "../../img/3dImg/rack_door_back.jpg" },
skin_right: { imgurl: "../../img/3dImg/rack_door_back.jpg" },
}
}
}
机柜效果如下
2.2，接着我们的创建一个虚拟的机框模型，为了达到美工妹妹的效果 我们的虚拟机框还得放光发亮
知识点：这里用到了发光体 和 管道渲染的技术
var boderModel=THREE.commonFunc.borderLight(serverid);//这里就是创建机柜发光的边的模型 其实这是和机柜本身模型分开的 只是使用了机柜的参数
3.1组合成微模块 这样一个微模块就实现了
在这里我们预先微模块都是两行多列的 而且中间的距离是机柜厚度的2.5倍 所以我们只需要一个机柜的位置参数就可以了
/*
*获取机柜在模块总的位置
*position:[{1,1,uuid-xxxx-xxxx-xxxxx-xx},{1,2,uuid-xxxx-xxxx-xxxxx-xx},{1,3,uuid-xxxx-xxxx-xxxxx-xx}]...
这是一个数组，存储的是行和列 以及id
*/
var microModel=THREE.commonFunc.createMicroModule(serverid);
这样 微模块的雏形就创建完成啦，接着就是交给美工妹妹去优化配色方案 再修改
二、搭建组合数据中心
首先是环境模型
用json去创建机房环境
[{
"rotation": [{
"degree": 0,
"direction": "x"
}, {
"degree": 0,
"direction": "y"
}, {
"degree": 0,
"direction": "z"
}],
"show": true,
"length": 220,
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"uuid": "",
"name": "doorCaseTop",
"width": 24,
"x": -300,
"y": 220,
"z": -350,
"style": {
"skinColor": 9095650,
"skin": {
"skin_behind": {
"skinColor": 13819101
},
"skin_up": {
"skinColor": 13819101
},
"skin_left": {
"skinColor": 13819101
},
"skin_fore": {
"skinColor": 13819101
},
"skin_down": {
"skinColor": 13819101
},
"skin_right": {
"skinColor": 13819101
}
}
},
"objType": "cube",
"height": 5
}, {
"rotation": [{
"direction": "x",
"degree": 0
}, {
"direction": "y",
"degree": 0
}, {
"direction": "z",
"degree": 0
}],
"show": true,
"length": 20,
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"uuid": "",
"name": "Leftwall",
"width": 810,
"x": 490,
"y": 120,
"z": 50,
"style": {
"skinColor": 9095650,
"skin": {
"skin_up": {
"skinColor": 14540253
},
"skin_down": {
"skinColor": 14540253
},
"skin_fore": {
"skinColor": 12434877
},
"skin_behind": {
"skinColor": 12434877
},
"skin_left": {
"skinColor": 14540253
},
"skin_right": {
"skinColor": 12434877
}
}
},
"objType": "cube",
"height": 240,
"showSortNub": 1,
"animation": null,
"dbclickEvents": null,
"thick": null,
"BindDevId": null,
"BindDevName": null,
"devInfo": null,
"BindMeteId": null,
"BindMeteName": null
}, {
"rotation": {
"0": {
"direction": "x",
"degree": 0
},
"1": {
"direction": "y",
"degree": 0
},
"2": {
"direction": "z",
"degree": 0
}
},
"show": true,
"length": 1000,
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"uuid": "",
"childrens": [{
"op": "-",
"show": true,
"uuid": "",
"name": "doorhole",
"objType": "cube",
"width": 20,
"height": 220,
"length": 220,
"x": -300,
"y": -10,
"z": 0,
"style": {
"skinColor": 9095650
}
}, {
"op": "-",
"show": true,
"uuid": "",
"name": "windowHole",
"objType": "cube",
"width": 20,
"height": 160,
"length": 500,
"x": 200,
"y": 10,
"z": 0,
"style": {
"skinColor": 9095650
}
}],
"name": "forewall",
"width": 20,
"x": 0,
"y": 120,
"z": -350,
"style": {
"skinColor": 9095650,
"skin": {
"skin_up": {
"skinColor": 14737632
},
"skin_down": {
"skinColor": 12434877
},
"skin_fore": {
"skinColor": 12434877
},
"skin_behind": {
"skinColor": 12434877
},
"skin_left": {
"skinColor": 12434877
},
"skin_right": {
"skinColor": 12434877
}
}
},
"objType": "holeCube",
"height": 240,
"showSortNub": 1,
"animation": null,
"dbclickEvents": null,
"thick": null,
"BindDevId": null,
"BindDevName": null,
"devInfo": null,
"BindMeteId": null,
"BindMeteName": null
}, {
"rotation": [{
"direction": "x",
"degree": 0
}, {
"direction": "y",
"degree": 0
}, {
"direction": "z",
"degree": 0
}],
"show": true,
"length": 20,
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"uuid": "",
"name": "Rightwall",
"width": 810,
"x": -490,
"y": 120,
"z": 50,
"style": {
"skinColor": 9095650,
"skin": {
"skin_up": {
"skinColor": 14540253
},
"skin_down": {
"skinColor": 14540253
},
"skin_fore": {
"skinColor": 12434877
},
"skin_behind": {
"skinColor": 12434877
},
"skin_left": {
"skinColor": 13224393
},
"skin_right": {
"skinColor": 14540253
}
}
},
"objType": "cube",
"height": 240,
"showSortNub": 1,
"animation": null,
"dbclickEvents": null,
"thick": null,
"BindDevId": null,
"BindDevName": null,
"devInfo": null,
"BindMeteId": null,
"BindMeteName": null
}, {
"rotation": [{
"direction": "x",
"degree": 0
}, {
"direction": "y",
"degree": 0
}, {
"direction": "z",
"degree": 0
}],
"show": true,
"length": 1800,
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"uuid": "",
"name": "floor_2",
"width": 1600,
"x": 32.156,
"y": -8.708,
"z": 11.662,
"style": {
"skinColor": 9095650,
"skin": {
"skin_up": {
"skinColor": 9991439,
"imgurl": "../../img/3dImg/grasslight-big.jpg",
"repeatx": true,
"width": 512,
"repeaty": true,
"height": 512
},
"skin_down": {
"skinColor": 3184895,
"imgurl": "../../img/3dImg/grasslight-big.jpg"
},
"skin_fore": {
"skinColor": 10592673
},
"skin_behind": {
"skinColor": 2968869
},
"skin_left": {
"skinColor": 2968869
},
"skin_right": {
"skinColor": 2968869
}
}
},
"objType": "cube",
"height": 10,
"showSortNub": 1,
"animation": null,
"dbclickEvents": null,
"thick": null,
"BindDevId": null,
"BindDevName": null,
"devInfo": null,
"BindMeteId": null,
"BindMeteName": null
}, {
"doors": {
"skins": [{
"skin_behind": {
"imgurl": "../../img/3dImg/rack_front_door.jpg"
},
"skinColor": 3355443,
"skin_fore": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
}
}],
"doorname": ["cabinet3_2_emptyCabinetdoor_01"],
"doorType": "lr",
"doorSize": [1]
},
"size": {
"length": 66,
"width": 70,
"thick": 2,
"height": 200
},
"shellname": "cabinet3_2_emptyCabinetshell",
"show": true,
"name": "cabinet3_2",
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"style": {
"skinColor": 16711680,
"skin": {
"skin_behind": {
"imgurl": "../../img/3dImg/rack_door_back.jpg",
"skinColor": 16711680
},
"skin_up": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skinColor": 16711680,
"skin_left": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skin_fore": {
"imgurl": "../../img/3dImg/rack_door_back.jpg",
"skinColor": 16711680
},
"skin_down": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skin_right": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
}
}
},
"position": {
"x": -100,
"y": 105,
"z": -80
},
"uuid": "",
"objType": "emptyCabinet",
"transparent": true
}, {
"rotation": [{
"degree": 0.3141592653589793,
"direction": "y"
}],
"name": "FireExtinguisher_3",
"fileurl": "../../img/3dImg/OBJS/FireExtinguisher.json",
"scale": {
"x": 15,
"y": 12,
"z": 15
},
"position": {
"x": -460,
"y": 8,
"z": -250
},
"objType": "jsonobj"
}, {
"rotation": [{
"degree": 0.9424777960769379,
"direction": "y"
}],
"show": true,
"name": "aircondition",
"length": 60,
"width": 80,
"x": -420,
"y": 130,
"z": 370,
"style": {
"skinColor": 16711422,
"skin": {
"skin_fore": {
"imgurl": "../../img/3dImg/aircondition.jpg"
}
}
},
"uuid": "",
"objType": "cube",
"height": 220
}, {
"rotation": [{
"degree": 0,
"direction": "x"
}, {
"degree": 0,
"direction": "y"
}, {
"degree": 0,
"direction": "z"
}],
"show": true,
"length": 220,
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"uuid": "",
"name": "doorCaseBottom",
"width": 24,
"x": -300,
"y": 5,
"z": -350,
"style": {
"skinColor": 9095650,
"skin": {
"skin_behind": {
"skinColor": 13819101
},
"skin_up": {
"skinColor": 13819101
},
"skin_left": {
"skinColor": 13819101
},
"skin_fore": {
"skinColor": 13819101
},
"skin_down": {
"skinColor": 13819101
},
"skin_right": {
"skinColor": 13819101
}
}
},
"objType": "cube",
"height": 5
}, {
"rotation": [{
"degree": 0.3141592653589793,
"direction": "y"
}],
"name": "FireExtinguisher_2",
"fileurl": "../../img/3dImg/OBJS/FireExtinguisher.json",
"scale": {
"x": 15,
"y": 12,
"z": 15
},
"position": {
"x": -460,
"y": 8,
"z": -230
},
"objType": "jsonobj"
}, {
"show": true,
"name": "equipment_card_3",
"length": 60,
"width": 65,
"x": -100,
"y": 145,
"z": -180,
"style": {
"skinColor": 9593611,
"skin": {
"skin_behind": {
"imgurl": "../../img/3dImg/server3.jpg",
"skinColor": 9593611
},
"skin_up": {
"imgurl": "../../img/3dImg/rack_inside.jpg",
"skinColor": 9593611
},
"skin_left": {
"imgurl": "../../img/3dImg/rack_inside.jpg",
"skinColor": 9593611
},
"skin_fore": {
"imgurl": "../../img/3dImg/rack_inside.jpg",
"skinColor": 9593611
},
"skin_down": {
"imgurl": "../../img/3dImg/rack_inside.jpg",
"skinColor": 9593611
},
"skin_right": {
"imgurl": "../../img/3dImg/rack_inside.jpg",
"skinColor": 9593611
}
}
},
"uuid": "",
"objType": "cube",
"height": 30
}, {
"rotation": [{
"degree": 0.3141592653589793,
"direction": "y"
}],
"name": "FireExtinguisher_4",
"fileurl": "../../img/3dImg/OBJS/FireExtinguisher.json",
"scale": {
"x": 15,
"y": 12,
"z": 15
},
"position": {
"x": -460,
"y": 8,
"z": -270
},
"objType": "jsonobj"
}, {
"rotation": [{
"degree": 0,
"direction": "x"
}, {
"degree": 0,
"direction": "y"
}, {
"degree": 0,
"direction": "z"
}],
"show": true,
"length": 40,
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"uuid": "",
"name": "powerDCabinet1_87",
"width": 80,
"x": 462,
"y": 132,
"z": -223,
"style": {
"skinColor": 9095650,
"skin": {
"skin_behind": {
"imgurl": "../../img/3dImg/pdg101.jpg",
"skinColor": 12639968
},
"skin_up": {
"skinColor": 16777215
},
"skin_left": {
"imgurl": "../../img/3dImg/pdg102.jpg",
"skinColor": 13692656
},
"skin_fore": {
"imgurl": "../../img/3dImg/pdg103.jpg",
"skinColor": 12639968
},
"skin_down": {
"skinColor": 12639968
},
"skin_right": {
"imgurl": "../../img/3dImg/pdg104.jpg",
"skinColor": 13692656
}
}
},
"objType": "cube",
"height": 120
}, {
"show": true,
"name": "equipment_card_2",
"length": 60,
"width": 65,
"x": -100,
"y": 120,
"z": -180,
"style": {
"skinColor": 9593611,
"skin": {
"skin_behind": {
"imgurl": "../../img/3dImg/server2.jpg",
"skinColor": 9593611
},
"skin_up": {
"imgurl": "../../img/3dImg/rack_inside.jpg",
"skinColor": 9593611
},
"skin_left": {
"imgurl": "../../img/3dImg/rack_inside.jpg",
"skinColor": 9593611
},
"skin_fore": {
"imgurl": "../../img/3dImg/rack_inside.jpg",
"skinColor": 9593611
},
"skin_down": {
"imgurl": "../../img/3dImg/rack_inside.jpg",
"skinColor": 9593611
},
"skin_right": {
"imgurl": "../../img/3dImg/rack_inside.jpg",
"skinColor": 9593611
}
}
},
"uuid": "",
"objType": "cube",
"height": 20
}, {
"doors": {
"skins": [{
"skin_behind": {
"imgurl": "../../img/3dImg/rack_front_door.jpg"
},
"skinColor": 3355443,
"skin_fore": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
}
}],
"doorname": ["cabinet1_5_emptyCabinetdoor_01"],
"doorType": "lr",
"doorSize": [1]
},
"size": {
"length": 66,
"width": 70,
"thick": 2,
"height": 200
},
"shellname": "cabinet1_5_emptyCabinetshell",
"show": true,
"name": "cabinet1_5",
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"style": {
"skinColor": 16711680,
"skin": {
"skin_behind": {
"imgurl": "../../img/3dImg/rack_door_back.jpg",
"skinColor": 16711680
},
"skin_up": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skinColor": 16711680,
"skin_left": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skin_fore": {
"imgurl": "../../img/3dImg/rack_door_back.jpg",
"skinColor": 16711680
},
"skin_down": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skin_right": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
}
}
},
"position": {
"x": 300,
"y": 105,
"z": 220
},
"uuid": "",
"objType": "emptyCabinet",
"transparent": true
}, {
"values": [],
"name": "btns",
"objType": "BtnS"
}, {
"rotation": [{
"degree": -3.141592653589793,
"direction": "x"
}, {
"degree": 1.2246468525851679e-16,
"direction": "y"
}, {
"degree": -3.141592653589793,
"direction": "z"
}],
"show": true,
"length": 50,
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"uuid": "",
"name": "powerDCabinet2_88",
"width": 80,
"x": 451,
"y": 87,
"z": -83,
"style": {
"skinColor": 9095650,
"skin": {
"skin_behind": {
"skinColor": 16448496
},
"skin_up": {
"skinColor": 16777215
},
"skin_left": {
"skinColor": 16448496
},
"skin_fore": {
"imgurl": "../../img/3dImg/pdg201.jpg",
"skinColor": 16448496
},
"skin_down": {
"skinColor": 12639968
},
"skin_right": {
"skinColor": 16448496
}
}
},
"objType": "cube",
"height": 160
}, {
"doors": {
"skins": [{
"skin_behind": {
"imgurl": "../../img/3dImg/rack_front_door.jpg"
},
"skinColor": 3355443,
"skin_fore": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
}
}],
"doorname": ["cabinet1_4_emptyCabinetdoor_01"],
"doorType": "lr",
"doorSize": [1]
},
"size": {
"length": 66,
"width": 70,
"thick": 2,
"height": 200
},
"shellname": "cabinet1_4_emptyCabinetshell",
"show": true,
"name": "cabinet1_4",
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"style": {
"skinColor": 16711680,
"skin": {
"skin_behind": {
"imgurl": "../../img/3dImg/rack_door_back.jpg",
"skinColor": 16711680
},
"skin_up": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skinColor": 16711680,
"skin_left": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skin_fore": {
"imgurl": "../../img/3dImg/rack_door_back.jpg",
"skinColor": 16711680
},
"skin_down": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skin_right": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
}
}
},
"position": {
"x": 300,
"y": 105,
"z": 120
},
"uuid": "",
"objType": "emptyCabinet",
"transparent": true
}, {
"doors": {
"skins": [{
"skin_behind": {
"imgurl": "../../img/3dImg/rack_front_door.jpg"
},
"skinColor": 3355443,
"skin_fore": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
}
}],
"doorname": ["cabinet2_6_emptyCabinetdoor_01"],
"doorType": "lr",
"doorSize": [1]
},
"size": {
"length": 66,
"width": 70,
"thick": 2,
"height": 200
},
"shellname": "cabinet2_6_emptyCabinetshell",
"show": true,
"name": "cabinet2_6",
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"style": {
"skinColor": 16711680,
"skin": {
"skin_behind": {
"imgurl": "../../img/3dImg/rack_door_back.jpg",
"skinColor": 16711680
},
"skin_up": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skinColor": 16711680,
"skin_left": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skin_fore": {
"imgurl": "../../img/3dImg/rack_door_back.jpg",
"skinColor": 16711680
},
"skin_down": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skin_right": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
}
}
},
"position": {
"x": 100,
"y": 105,
"z": 320
},
"uuid": "",
"objType": "emptyCabinet",
"transparent": true
}, {
"doors": {
"skins": [{
"skin_behind": {
"imgurl": "../../img/3dImg/rack_front_door.jpg"
},
"skinColor": 3355443,
"skin_fore": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
}
}],
"doorname": ["cabinet1_6_emptyCabinetdoor_01"],
"doorType": "lr",
"doorSize": [1]
},
"size": {
"length": 66,
"width": 70,
"thick": 2,
"height": 200
},
"shellname": "cabinet1_6_emptyCabinetshell",
"show": true,
"name": "cabinet1_6",
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"style": {
"skinColor": 16711680,
"skin": {
"skin_behind": {
"imgurl": "../../img/3dImg/rack_door_back.jpg",
"skinColor": 16711680
},
"skin_up": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skinColor": 16711680,
"skin_left": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skin_fore": {
"imgurl": "../../img/3dImg/rack_door_back.jpg",
"skinColor": 16711680
},
"skin_down": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
},
"skin_right": {
"imgurl": "../../img/3dImg/rack_door_back.jpg"
}
}
},
"position": {
"x": 300,
"y": 105,
"z": 320
},
"uuid": "",
"objType": "emptyCabinet",
"transparent": true
}, {
"childrens": [{
"childrens": [{
"childrens": [{
"rotation": [{
"degree": 0,
"direction": "x"
}, {
"degree": 0,
"direction": "y"
}, {
"degree": 0,
"direction": "z"
}],
"show": true,
"radialSegments": 8,
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"uuid": "",
"points": [{
"x": 0,
"y": 0,
"z": 0
}, {
"x": 0,
"y": 35,
"z": 0
}],
"segments": 64,
"name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN0",
"closed": false,
"style": {
"skinColor": 15790833
},
"position": {
"x": 0,
"y": 119.842,
"z": 0
},
"radius": 3,
"objType": "tube"
}, {
"childrens": [{
"rotation": [{
"degree": 0,
"direction": "x"
}, {
"degree": 0,
"direction": "y"
}, {
"degree": 0,
"direction": "z"
}],
"show": true,
"radialSegments": 8,
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"uuid": "",
"points": [{
"x": 0,
"y": 20,
"z": 0
}, {
"x": 30,
"y": 10,
"z": 0
}, {
"x": 40,
"y": 0,
"z": 0
}],
"segments": 64,
"name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN1OBJCREN0",
"closed": false,
"style": {
"skinColor": 14676206
},
"position": {
"x": 0,
"y": 100,
"z": 0
},
"radius": 2,
"objType": "tube"
}, {
"segmentsY": 0,
"radiusBottom": 4,
"segmentsX": 100,
"rotation": [{
"degree": 1.5707963267948963,
"direction": "x"
}, {
"degree": 0,
"direction": "y"
}, {
"degree": 0,
"direction": "z"
}],
"name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN1OBJCREN1",
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"openEnded": false,
"style": {
"skinColor": 16776960,
"skin": {
"skin_up": {
"skinColor": 4342338
},
"skin_side": {
"skinColor": 4342338
},
"skin_down": {
"skinColor": 4342338
}
}
},
"position": {
"x": 40.373,
"y": 96.989,
"z": -0.2281064684102727
},
"objType": "cylinder",
"radiusTop": 4,
"height": 4
}],
"rotation": [{
"degree": 0,
"direction": "x"
}, {
"degree": 0,
"direction": "y"
}, {
"degree": 0,
"direction": "z"
}],
"show": true,
"name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN1",
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"position": {
"x": 0,
"y": 0,
"z": 0
},
"uuid": "",
"objType": "GroupObj"
}, {
"childrens": [{
"rotation": [{
"degree": 0,
"direction": "x"
}, {
"degree": 0,
"direction": "y"
}, {
"degree": 0,
"direction": "z"
}],
"show": true,
"radialSegments": 8,
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"uuid": "",
"points": [{
"x": 0,
"y": 20,
"z": 0
}, {
"x": 30,
"y": 10,
"z": 0
}, {
"x": 40,
"y": 0,
"z": 0
}],
"segments": 64,
"name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN2OBJCREN0",
"closed": false,
"style": {
"skinColor": 14676206
},
"position": {
"x": 0,
"y": 100,
"z": 0
},
"radius": 2,
"objType": "tube"
}, {
"segmentsY": 0,
"radiusBottom": 4,
"segmentsX": 100,
"rotation": [{
"degree": 1.5707963267948963,
"direction": "x"
}, {
"degree": 0,
"direction": "y"
}, {
"degree": 0,
"direction": "z"
}],
"name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN2OBJCREN1",
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"openEnded": false,
"style": {
"skinColor": 16776960,
"skin": {
"skin_up": {
"skinColor": 4342338
},
"skin_side": {
"skinColor": 4342338
},
"skin_down": {
"skinColor": 4342338
}
}
},
"position": {
"x": 40.373337511555206,
"y": 96.98891109282378,
"z": -0.2281064684102727
},
"objType": "cylinder",
"radiusTop": 4,
"height": 4
}],
"rotation": [{
"degree": -3.141592653589793,
"direction": "x"
}, {
"degree": -0.9728629830197867,
"direction": "y"
}, {
"degree": -3.141592653589793,
"direction": "z"
}],
"show": true,
"name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN2",
"scale": {
"x": 1,
"y": 1,
"z": 1
},
"position": {
"x": 0,
"y": 0,
"z": 0
},
"uuid": "",
"objType": "GroupObj"
}, ]
最后是 整个数据中心的效果：
也可创建综合类机房 有普通机柜 有微模块
效果如下：
三、逻辑功能实现
1、选择查看单个机柜，查看机柜详情，了解该机柜内的服务器排布情况
代码实现：
if (modelBussiness.showSingleServerNeedVitures.length > 0) {
WT3DObj.commonFunc.changeObjsOpacity(modelBussiness.showSingleServerNeedVitures, 0.2, 1, 200, function () {
$.each(modelBussiness.showCabServers, function (_index, _obj) {
_obj.visible = true;
});
});
}
_this.openCabDoor(_obj);
if (modelBussiness.lastMouseInCurrentObj.name.indexOf("OBJCREN7") > 0 || modelBussiness.lastMouseInCurrentObj.name.indexOf("OBJCREN8") > 0) {
this.commonFunc.opcabinetBackLeftdoor(_obj.doors.leftDoor);
this.commonFunc.opcabinetBackRightdoor(_obj.doors.rightDoor);
} else if (modelBussiness.lastMouseInCurrentObj.name.indexOf("OBJCREN9") > 0) {
this.commonFunc.opcabinetMaindoor(_obj.doors.mainDoor);
}
setTimeout(function () {
if (_obj.doors.leftDoor.doorState == undefined || _obj.doors.leftDoor.doorState == "close") {
if (_obj.doors.rightDoor.doorState == undefined || _obj.doors.rightDoor.doorState == "close") {
if (_obj.doors.mainDoor.doorState == undefined || _obj.doors.mainDoor.doorState == "close") {
modelBussiness.commonFunc.showCabnetDetail(_obj, function () {
});
}
}
}
}, 200);
2、综合查看微模块的热力云图，空间使用情况，电力情况，制冷，承重等等。
代码实现：
{
btnid: "btn_reset",
btnTitle: "场景复位",
btnimg: "../../img/3dImg/reset.png",
sortnub: 0,
btnType: "system",
enable: true,
show_event: function () {
if (modelBussiness.lock == true) {
layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_space");
return;
}
modelBussiness.currentLockDetail = "场景复位";
modelBussiness.lock = true;
setTimeout(function () {
modelBussiness.lock = false;
}, 1000);
modelBussiness.backBtn();
},
},
{
btnid: "btn_fps",
btnTitle: "3D性能监测",
btnimg: "../../img/3dImg/fps.png",
sortnub: 0,
btnType: "system",
enable: true,
show_event: function () {
var display = $("#Stats_output").css("display");
if (display == "none") {
$("#Stats_output").show();
} else {
$("#Stats_output").hide();
}
},
},
{
btnid: "btn_space",
btnTitle: "机柜利用率",
btnimg: "../../img/3dImg/space.png",
sortnub: 0,
btnType: "system",
enable: true,
show_event: function () {
if (modelBussiness.lock == true) {
layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_space");
return;
}
modelBussiness.currentLockDetail = "机柜利用率";
modelBussiness.lock = true;
setTimeout(function () {
modelBussiness.lock = false;
}, 2000);
modelBussiness.showSpaceRate();
},
},
{
btnid: "btn_usage",
btnTitle: "可用空间",
btnimg: "../../img/3dImg/usage.png",
sortnub: 0,
btnType: "system",
enable: true,
show_event: function () {
if (modelBussiness.lock == true) {
layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_usage");
return;
}
modelBussiness.currentLockDetail = "可用空间";
modelBussiness.lock = true;
setTimeout(function () {
modelBussiness.lock = false;
}, 2000);
modelBussiness.showUsageMap();
},
},
{
btnid: "btn_lines",
btnTitle: "走线管理",
btnimg: "../../img/3dImg/connection.png",
sortnub: 0,
btnType: "system",
enable: true,
show_event: function () {
if (modelBussiness.lock == true) {
layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_lines");
return;
}
modelBussiness.currentLockDetail = "走线管理";
modelBussiness.lock = true;
setTimeout(function () {
modelBussiness.lock = false;
}, 1000);
modelBussiness.showLines();
},
},
{
btnid: "btn_temperature",
btnTitle: "温度云图",
btnimg: "../../img/3dImg/temperature.png",
sortnub: 0,
btnType: "system",
enable: true,
show_event: function () {
if (modelBussiness.lock == true) {
layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_temperature");
return;
}
modelBussiness.currentLockDetail = "温度云图";
modelBussiness.lock = true;
setTimeout(function () {
modelBussiness.lock = false;
}, 2000);
modelBussiness.showTemptureMap();
},
},
{
btnid: "btn_water",
btnTitle: "湿度",
btnimg: "../../img/3dImg/water.png",
sortnub: 0,
btnType: "system",
enable: true,
show_event: function () {
if (modelBussiness.lock == true) {
layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_water");
return;
}
modelBussiness.currentLockDetail = "湿度效果";
modelBussiness.lock = true;
setTimeout(function () {
modelBussiness.lock = false;
}, 2000);
modelBussiness.showHumidity();
},
},
{
btnid: "btn_smokeAlarm",
btnTitle: "烟雾模拟",
btnimg: "../../img/3dImg/smoke.png",
sortnub: 0,
btnType: "system",
enable: true,
show_event: function () {
if (modelBussiness.lock == true) {
layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_smokeAlarm");
return;
}
modelBussiness.currentLockDetail = "烟雾模拟";
modelBussiness.lock = true;
setTimeout(function () {
modelBussiness.lock = false;
}, 2000);
modelBussiness.showFireAlarm();
},
},
{
btnid: "btn_winds",
btnTitle: "空调风向",
btnimg: "../../img/3dImg/air.png",
sortnub: 0,
btnType: "system",
enable: true,
show_event: function () {
if (modelBussiness.lock == true) {
layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_winds");
return;
}
modelBussiness.currentLockDetail = "空调风向";
modelBussiness.lock = true;
setTimeout(function () {
modelBussiness.lock = false;
}, 1000);
modelBussiness.showWinds();
},
},
//{
// btnid: "btn_power",
// btnTitle: "配店组",
// btnimg: "../../img/3dImg/power.png",
// sortnub: 0,
// btnType: "system",
// enable: true,
// show_event: function () {
// modelBussiness.showWinds();
// },
//},
//{
// btnid: "btn_alarm",
// btnTitle: "告警",
// btnimg: "../../img/3dImg/alarm.png",
// sortnub: 0,
// btnType: "system",
// enable: true,
// show_event: function () {
// modelBussiness.showWinds();
// },
//},
//{
// btnid: "btn_person",
// btnTitle: "巡检",
// btnimg: "../../img/3dImg/person.png",
// sortnub: 0,
// btnType: "system",
// enable: true,
// show_event: function () {
// modelBussiness.showWinds();
// },
//},
3、服务器下架操作
代码实现：
var _this = modelBussiness;
_this.currentShowServerNames = [];
var cabinetName = cabinetobj.name;
if (_this.Devs[cabinetName] && _this.Devs[cabinetName].devs && _this.Devs[cabinetName].devs.length > 0) {
$.each(_this.Devs[cabinetName].devs, function (_index, _obj) {
_obj.visible = true;
_this.currentShowServerNames.push(_obj.name);
});
} else {
var devJsonModels = [];
//1u 高度8.5 位置42
if (devs && devs.length > 0) {
$.each(devs, function (_index, _obj) {
var height = (_obj.devURange.max - _obj.devURange.min + 1) * 8.2;
var positiony = height / 2 + 42 + (_obj.devURange.min - 1) * 8.5;
var postioinx = cabinetobj.position.x;
var postioinz = cabinetobj.position.z;
var rotationy = cabinetobj.rotation.y + Math.PI;
var name = cabinetobj.name + "_Server_" + _index;
if (!_obj.devCustomSkin) {
var servvers = ["../img/3dImg/server2.jpg", "../img/3dImg/server3.jpg", "../img/3dImg/server1.jpg"];
_obj.devCustomSkin = {
up: "../img/3dImg/rack_inside.jpg",
down: "../img/3dImg/rack_inside.jpg",
fore: servvers[parseInt(Math.random() * 3)],
behind: servvers[parseInt(Math.random() * 3)],
left: "../img/3dImg/server_side.jpg",
right: "../img/3dImg/server_side.jpg",
}
}
var server = getSingleServerModel(cabinetobj.name + "_Server_" + _index, { "x": postioinx, "y": positiony, "z": postioinz }, height, rotationy, _obj.devId, _obj.devCustomSkin);
server.BindDevId = _obj.devId;
devJsonModels.push(server);
_this.currentShowServerNames.push(name);
});
WT3DObj.commonFunc.loadModelsByJsons(devJsonModels, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true);
_this.Devs[cabinetName] = {
devs: WT3DObj.commonFunc.findObjectsByNames(_this.currentShowServerNames)
};
}
}
4、服务器上架操作
代码实现：
if (_this.needHideCabinets.length > 0) {
WT3DObj.commonFunc.changeCameraPosition({ x: 2531, y: 3967, z: -1150 }, { x: -615, y: 0, z: -35 }, 1000, function () {
$.each(_this.needHideCabinets, function (_index, _obj) {
if (_obj.name.indexOf("_rate_") < 0 && _obj.name.indexOf("_yearCube_") < 0) {
_obj.visible = true;
}
});
});
}
if (_this.needHideobjs.length > 0) {
_this.hideDevs();
WT3DObj.commonFunc.changeCameraPosition({ x: 2531, y: 3967, z: -1150 }, { x: -615, y: 0, z: -35 }, 1000, function () {
$.each(_this.needHideobjs, function (_index, _obj) {
if (_obj.name.indexOf("TCL_line_") < 0 && _obj.name.indexOf("_wind") < 0) {
_obj.visible = true;
if (_obj.children && _obj.children.length > 0) {
$.each(_obj.children, function (_cindex, _cobj) {
_cobj.visible = true;
});
}
}
});
if (_this.currentShowCabinet) {
_this.currentShowCabinet.visible = false;
}
WT3DObj.commonFunc.changeObjsOpacity(_this.needHideobjs, 0.01, 1, 1000, function () {
_this.hideLines();
_this.hideWinds();
_this.hideUsageSpaceRate();
_this.hideSpaceRate();
});
});
}
5、服务器计划上架 计划下架操作
实现方式：
layer.closeAll();
console.log(result);
var cabNoUse = {};
if (result && result.length && result.length > 0) {
$.each(result, function (_index, _obj) {
var _cab = wtserverAPI.getCabinetByUUID(modelBussiness.roomName, _obj.cabid);
if (_cab && _cab.cabName) {
var ageValue = [];
if (_obj.uPositionUsed && _obj.uPositionUsed.length && _obj.uPositionUsed.length > 0) {
for (var j = 0; j < _obj.uPositionUsed.length - 1; j++) {
if (j == 0) {
ageValue.push({
value: 1,
max: _obj.uPositionUsed[0],
min: _obj.uPositionUsed[0]
});
}
if (_obj.uPositionUsed[j + 1] - _obj.uPositionUsed[j] > 1) {
ageValue.push({
value: 1,
max: _obj.uPositionUsed[j + 1],
min: _obj.uPositionUsed[j + 1]
});
} else {
ageValue[ageValue.length - 1].max = _obj.uPositionUsed[j + 1];
}
}
}
cabNoUse[_cab.cabName] = ageValue;
}
});
}
console.log(cabNoUse);
for (var i = 0; i < allCabs.length; i++) {
var itcobj = WT3DObj.commonFunc.findObject(allCabs[i]);
var ageValue = [];
if (cabNoUse[allCabs[i]]) {
ageValue = cabNoUse[allCabs[i]];
}
var style = {
borderColor: 0x4444,
outColor: 0xFFFFFF,
outOprity: 0.1
};
if (itcobj) {
_this.commonFunc.createUseageCube(allCabs[i],
{ x: 160, y: 380, z: 140 },
{ x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
{ x: 0, y: 0, z: 0 },
ageValue,
style, { timelong: 1000 }, i);
}
}
}, function (err) {
layer.closeAll();
var cabNoUse = {};
for (var i = 0; i < allCabs.length; i++) {
var itcobj = WT3DObj.commonFunc.findObject(allCabs[i]);
var ageValue = [];
if (cabNoUse[allCabs[i]]) {
ageValue = cabNoUse[allCabs[i]];
}
var style = {
borderColor: 0x4444,
outColor: 0xFFFFFF,
outOprity: 0.1
};
if (itcobj) {
_this.commonFunc.createUseageCube(allCabs[i],
{ x: 160, y: 380, z: 140 },
{ x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
{ x: 0, y: 0, z: 0 },
ageValue,
style, { timelong: 1000 }, i);
}
}
});
下节预告：
下节课主要讲解微模块的实现与功能
技术交流 [email protected]
交流微信：
如果你有什么要交流的心得 可邮件我
下级预告：
下节课还是讲解3D机房相关的知识，出一些不一样的展示效果。关注点在机柜服务器上 而外部的动力环境不做渲染
