分享
查看: 3259|回复: 1

[分享] 基于WebGL H5 数据中心 3D机房三维可视化管理 Demo

[复制链接]

基于WebGL H5 数据中心 3D机房三维可视化管理 Demo

发表于 2019-9-26 15:28:21 来自 分享 阅读模式 倒序浏览
zzv_icon3259 zzr_icon1 查看全部

       数据中心3D机房三维可视化管理项目,是ThingJS提供给广大用户的开源项目,用户可以通过借鉴或者使用这个开源项目完成属于自己的第一个3D机房三维可视化管理应用,同时,也可以在该项目中增加所需功能,如Echarts图表+数据交互,或是查看ThingJS提供的官方示例进行相关修改。


总览:

 基于WebGL H5 数据中心 3D机房三维可视化管理 Demo


机柜信息:

 基于WebGL H5 数据中心 3D机房三维可视化管理 Demo

 基于WebGL H5 数据中心 3D机房三维可视化管理 Demo


空间统计:

 基于WebGL H5 数据中心 3D机房三维可视化管理 Demo


脚本:

document.title = 'Demo-机房管理';
/**
* 机房demo
* @author larrow 2018.05.01
*/
var app = new THING.App({
url: 'models/comproom/'
});

app.on('load', function() {
// 摄影机飞行到合适位置
app.camera.flyTo({
time: 1000,
position: [-15.8, 14.3, 17.9],
target: [0.3, -2.0, 1.5]
});
// 初始化机柜等物体
init_cabinets();

// 初始化界面
init_ui();
});

// ------------------------------------------------------------------------------
// 机柜相关
const CABINET_DEFAULT_UNITCOUNT = 42; // 默认机柜u数
const RACK_UNIT_HEIGHT = 0.0445; // 1u为4.3厘米
const BarGraphColors = ['#0000ff', '#00ffff', '#00ff00', '#ff0000', '#ff00ff', '#ffff00'];

/**
* Cabinet 机柜类
*/
class Cabinet extends THING.Thing {
constructor(app) {
super(app);
this.racks = [];
this.isCabinet = true;
this.barGraph = null;
this.ui = null;
this.number = Math.randomInt(100, 300);
}

createRack(url, u) {
var y = u * RACK_UNIT_HEIGHT;
var cabinet = this;
var rack = this.app.create({
type: 'Rack',
name: 'rack',
url: url,
complete: function() {
cabinet.add({
object: this,
basePoint: 'BasePoint',
localPosition: [0, y, 0],
localAngles: [0, 0, 0]
});

}
});
return rack;
}

createRacks() {
var curUPos = 0;
while(true) {
var pair = RackModels[Math.randomInt(0, RackModels.length - 1)];
var url = pair[0];
var uHeight = pair[1];

var rack = this.createRack(url, curUPos);
this.racks.push(rack);

if (curUPos >= CABINET_DEFAULT_UNITCOUNT - 4)
break;

curUPos += uHeight;
}
return rack;
}

destroyRacks() {
for (var i = 0; i < this.racks.length; i ++) {
var rack = this.racks[i];
rack.destroy();
}
this.racks = [];
}

openDoor() {
this.playAnimation('open1');
this.createRacks();
}

closeDoor() {
this.playAnimation({
name: 'close1',
complete: function() {
this.destroyRacks();
if (Rack.current)
Rack.current.showUI(false);
}
});
}

// 创建柱状图
createBarGraph() {
if (this.barGraph)
return;

var box = app.create({
type: 'Box',
width: this.size[0] * 0.9,
height: this.size[1],
depth: this.size[2] * 0.9,
position: this.position,
center: 'Bottom'    
});

this.barGraph = box;
}

// 显示柱状图
showBarGraph(bool) {
if (bool) {
// 确认创建了盒子
this.createBarGraph();
// 隐藏机柜,显示盒子
this.visible = false;
this.barGraph.visible = true;
this.barGraph.style.color = Math.randomFromArray(BarGraphColors);
//this.barGraph.style.opacity = 0.9;
// 缩放盒子
this.barGraph.scale = [1, 0.1, 1];
this.barGraph.scaleTo({
scale: [1, Math.randomFloat(0.2, 1.0), 1],
time: 400,
lerpType: THING.LerpType.Linear.Quadratic
});
} else {
// 隐藏盒子,显示机柜
this.visible = true;
if (this.barGraph)
this.barGraph.visible = false;
}
}

// 创建界面
createUI() {
if (this.ui)
return;
var cabinet = this;

// 创建widget (动态绑定数据用)
var panel = new THING.widget.Panel({
width: "230px",
closeIcon: false,
opacity: 0.8,
});
this.panel = panel;
panel.addString(this, 'name').name('机柜'+this.number);

// 创建obj ui (跟随物体用)
var ui = app.create({
type: 'UI',
parent: this,
el: panel.domElement,
offset: [0, cabinet.size[1], 0]
});
this.ui = ui;  
}

// 显示界面
showUI(boolValue) {
if (!this.ui)
this.createUI();

this.panel.visible = boolValue;
}
}
THING.factory.registerClass('Cabinet', Cabinet);
Cabinet.current = null;
Cabinet.open = false;

// 架式设备模型
const RackModels = [
['https://model.3dmomoda.cn/models/3817338017ff4776a5dd05f03a3e2fd4/0/gltf', 1],
['https://model.3dmomoda.cn/models/37972dd2c96c4a37a3245a00bee3628b/0/gltf', 2]
];

/**
* Rack 架式设备
*/
class Rack extends THING.Thing {
constructor(app) {
super(app);
this.isRack = true;
this.info = gen_rack_info();
}

createUI() {
var ui = new THING.widget.Panel({
titleText: this.name,
closeIcon: true,
dragable: true,
retractable: true,
hasTitle: true,
width: "228px",
});
ui.zIndex = 999999;//设置ui排序
ui.addTab(this.info);
ui.position = [390, 350];
this.ui = ui;
return ui;
}

showUI(boolValue) {
if (!this.ui)
this
avatar

10

主题

15

帖子

46

积分

新手上路

Rank: 1

积分
46
远方小镇 发表于 2019-9-26 16:58:32 显示全部楼层
这不是官方示例么?
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t