使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

上节课已经详细描述了普通机房的实现过程,文章地址(https://www.cnblogs.com/yeyunfei/p/10473021.html)

紧接着上节课的内容 我们这节可来详细讲解机房微模块的三维实现

首先我们先看一下整体的效果图:

这是单个微模块的模拟最后的系统效果

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

下面我们进入正文,详细讲解创建过程(机房的以及其它动力环境的创建 前面的课程已经讲诉 这里不在累赘描述)

一、创建组件

 正所谓造车得现有轮子,那么搭建整个机房得先创建一个个小的组件,最后组合成大的模块。我们的步骤是由内而外。

  1.1、先创建服务器,大量的json参数 利于控制服务器的所有属性

var server={//服务器模型参数 "show": true, "uuid": "", "name": "equipment_card_2_4", "objType": "cube", "length": 60, "width": 65, "height": 20, "x": 0, "y": 300, "z": 0, "style": { "skinColor": 9593611, "skin": { "skin_up": { "skinColor": 9593611, "imgurl": "../../img/3dImg/rack_inside.jpg" }, "skin_down": { "skinColor": 9593611, "imgurl": "../../img/3dImg/rack_inside.jpg" }, "skin_fore": { "skinColor": 9593611, "imgurl": "../../img/3dImg/rack_inside.jpg" }, "skin_behind": { "skinColor": 9593611, "imgurl": "../../img/3dImg/server2.jpg" }, "skin_left": { "skinColor": 9593611, "imgurl": "../../img/3dImg/rack_inside.jpg" }, "skin_right": { "skinColor": 9593611, "imgurl": "../../img/3dImg/rack_inside.jpg" } } }, "showSortNub": 4 };
var serverModel=WT.commonFunc.createServer(server);//服务器模型生成

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyyppz.html