基于WEBGL架构的3D可视化平台—家居城3D展现

本文将模仿一个“欧派”，让人人深居简出在家里就能够越发直观平面的遴选家具。

第一步，应用CampusBuilder搭建模仿场景。CampusBuilder的模子库有林林总总的模子，使我们搭建出的场景更传神。运用CampusBuilde建立层级，以后再给层级加外立面就涌现了当前的结果。此次我们实在只是须要一个楼层，所以我们就把上次运用的过的场景拿来革新一下。概况移步：CampusBuilder3D场景制造东西

演示地点：EXAMPLE

/加载场景代码
var app = new THING.App({
// 场景地点
"url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/家具城",
//背景设置
"skyBox": "BlueSky"
});

第二步，开启层级切换。由于我们模仿的“宜家”是某修建中的一层，所以这里要开启层级切换以便进入家具城。

app.on('load', function (ev) {
//开启层级切换
app.level.change(ev.campus);
});

同时给家具城建立一个广告牌，防备我们在第一人称下行走会“迷路”。贴图能够自行上传。

//建立广告牌
var advertisingSign = app.create({
type: 'Box',
width: 15.0, // 宽度
height: 5.0, // 高度
depth: 0.5, // 深度
widthSegments: 1.0, //宽度上的节数
heightSegments: 1.0, // 高度上的节数
depthSegments: 1.0, // 深度上的节数
center: 'Bottom', // 中心点
style: {
color: '#ffffff',
opacity: 2,
image: '/uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/file/家具展销/欧派.jpg'
},
parent: app.query('building_01')[0],
});
advertisingSign.position = [50.957, 15.883, -16];

这里给我们给悉数场景用笼统物体围起来了，以避免第一人称控件开启时会构成无碰撞系统坠落出场景。记得要给他们组兼并命名为‘碰撞盒’，在场景加载完成后将他们“隐蔽”起来。

app.on('load', function (ev) {
//开启层级切换
app.level.change(ev.campus);
//将碰撞盒的透明度设置为0，而且将他们的pickable属性设置为false，不可被选中。
var crashBox = app.query('碰撞盒')[0];
crashBox.style.opacity = 0;
crashBox.pickable = false;
});

第三步，增加第一人称控件。

先建立两个按钮来掌握第一人称控件。

new THING.widget.Button('第一人称', add_control);
new THING.widget.Button('自在视角', remove_control);

增加第一人称控件

//第一人称组件
var ctrl = null;
function add_control() {
if (app.level.current.name == 'Campus') {
app.camera.position = [75.28812158204005, 1.8016147124541857, 29.699063489018236];
app.camera.target = [53.32909358623788, 4.541642332131091, -9.470748625431646];
}
if (app.level.current.name != 'Campus') {
app.level.change(app.query('新楼层')[0]);
app.camera.flyTo({
'position': [41.05650213795261, 1.3469938677565356, -18.6143831867287],
'target': [38.982251559488404, 0.7081383467333933, -23.867802267306008],
'time': 2000,
'complete': function () {
}
});
}
if (ctrl) return;
ctrl = app.addControl(
new THING.WalkControl({
walkSpeed: 0.02,
turnSpeed: 0.25,
gravity: 30,
eyeHeight: 1.7,
jumpSpeed: 0,
enableKeyRotate: false,
useCollision: true,//app.scene
useGravity: true,
groundObjects: [app.scene] //把悉数场景都增加,可把楼层或其他须要检测的增加进入碰撞系统里 | 默许值 园区地板
})
);
}


移除第一人称控件

function remove_control() {
if (!ctrl)
return;
app.removeControl(ctrl);
ctrl = null;
}

第四步，建立界面panel用于显现家居的详细信息。

增加界面

var panel = null;
function add_panel(title, total, goodsInfo) {
panel = new THING.widget.Panel({
titleText: '商品名称：' + title,
closeIcon: true, // 是不是有封闭按钮
dragable: false, // 是不是能够拖拽
retractable: true,
opacity: 0.9, // 透明度
hasTitle: true
});
panel.position = [1000, 0];
var dataObj = {
total: total,
goodsInfo: goodsInfo
};
var total = panel.addString(dataObj, 'total').caption('总价');
var goodsInfo = panel.addString(dataObj, 'goodsInfo').caption('商品引见');
}

移除界面

function remove_panel() {
if (panel) {
panel.destroy();
panel = null;
}
}

末了一步，为商品和大楼增加点击事宜。这里我们也要卸载双击事宜，由于鼠标双击时会聚焦当前物体，与我们的营业逻辑有争执所以这里给他卸载掉。首先是一般的点击事宜，鼠标左键点击时会涌现商品的信息。右键点击时，会移除第一人称控件。

//鼠标点击事宜
app.on('click', function (ev) {
if (ev.button == 2) {
remove_control();
return;
}
remove_panel();
switch (ev.object.name) {
case "桌椅组合1": add_panel('天然作风餐桌系列', "2598.00", "　　简约的圆桌设想，微冷的当代居室围成一桌大天然的觉得。天然本性，简介的设想，彰显朴素、有用、少等于多的线代生涯哲学。");
break;
case "桌椅组合2": add_panel('线代都会餐桌系列', "2198.00", "　　爽利线条，描写多少形底座。天然致简的浅木色橡木拼花，带有淡淡的手工白蜡处置惩罚，搭配内敛的深灰色线条，构成玄妙均衡，线代感呼之欲出。");
break;
case "桌椅组合3": add_panel('紧凑家庭餐桌系列', "1998.00", "　　紧凑家庭餐厅，享四人围坐的宽适与舒服。精致的尺寸，圆融包涵的圆桌设想，即便是紧凑的客餐厅一体空间，也能欢乐小谈。");
break;
case "沙发组合1": add_panel('本性笔记组合沙发', "2598.00", "　　简约的圆桌设想，微冷的当代居室围成一桌大天然的觉得。天然本性，简介的设想，彰显朴素、有用、少等于多的线代生涯哲学。");
break;
case "沙发组合2": add_panel('云海衰退组合沙发', "8888.00", "　　百口人围坐的澹泊时刻，更多一份温馨。借一抹海天的蓝，再偷来云朵的舒软，只为百口围坐的时刻，尽享温馨怡然。");
break;
case "沙发组合3": add_panel('商务温馨组合沙发', "8598.00", "　　简约的圆桌设想，微冷的当代居室围成一桌大天然的觉得。天然本性，简介的设想，彰显朴素、有用、少等于多的线代生涯哲学。");
break;
case "沙发组合4": add_panel('天然作风餐桌系列', "5508.00", "　　简约的圆桌设想，微冷的当代居室围成一桌大天然的觉得。天然本性，简介的设想，彰显朴素、有用、少等于多的线代生涯哲学。");
break;
case "沙发组合5": add_panel('天然作风餐桌系列', "2578.00", "　　简约的圆桌设想，微冷的当代居室围成一桌大天然的觉得。天然本性，简介的设想，彰显朴素、有用、少等于多的线代生涯哲学。");
break;
}
});
app.off('dblclick');

代码块 => 层级 => 触发 => 修正进入层级操纵

这里我们将进入层级的操纵改成直接进入我们的家具城这一层“新楼层”。

//修正singleClick点击以后进入级的操纵
app.on(THING.EventType.SingleClick, function (ev) {
var object = ev.object;
if (object.name == "building_01") {
app.level.change(app.query('新楼层')[0]);
app.camera.flyTo({
'position': [41.05650213795261, 1.3469938677565356, -18.6143831867287],
'target': [38.982251559488404, 0.7081383467333933, -23.867802267306008],
'time': 2000,
complete: function () {
console.log("我已进来了" + app.level.current.name);
}
});
}
return;
}, 'customLevelEnterMethod');

小结：

第一人称控件的题目，Campus => 新楼层 ，假如不设置摄像机飞到一合理位置，摄像机将离开楼层，由于进入楼层的时刻摄像机的默许位置不在楼层上，所以每次在楼层内增加第一人称控件时我们必需要将摄像机放到一个合理的位置。

悉数代码

//加载场景代码
var app = new THING.App({
// 场景地点
"url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/家具城",
//背景设置
"skyBox": "BlueSky"
});
app.on('load', function (ev) {
app.level.change(ev.campus);
var crashBox = app.query('碰撞盒')[0];
crashBox.style.opacity = 0;
crashBox.pickable = false;
new THING.widget.Button('第一人称', add_control);
new THING.widget.Button('自在视角', remove_control);
});
//修正singleClick点击以后进入级的操纵
app.on(THING.EventType.SingleClick, function (ev) {
var object = ev.object;
if (object.name == "building_01") {
app.level.change(app.query('新楼层')[0]);
app.camera.flyTo({
'position': [41.05650213795261, 1.3469938677565356, -18.6143831867287],
'target': [38.982251559488404, 0.7081383467333933, -23.867802267306008],
'time': 2000,
complete: function () {
console.log("我已进来了" + app.level.current.name);
}
});
}
return;
}, 'customLevelEnterMethod');
//鼠标点击事宜
app.on('click', function (ev) {
if (ev.button == 2) {
remove_control();
}
if (typeof (ev.object) == undefined)
return;
remove_panel();
switch (ev.object.name) {
case "桌椅组合1": add_panel('天然作风餐桌系列', "2598.00", "　　简约的圆桌设想，微冷的当代居室围成一桌大天然的觉得。天然本性，简介的设想，彰显朴素、有用、少等于多的线代生涯哲学。");
break;
case "桌椅组合2": add_panel('线代都会餐桌系列', "2198.00", "　　爽利线条，描写多少形底座。天然致简的浅木色橡木拼花，带有淡淡的手工白蜡处置惩罚，搭配内敛的深灰色线条，构成玄妙均衡，线代感呼之欲出。");
break;
case "桌椅组合3": add_panel('紧凑家庭餐桌系列', "1998.00", "　　紧凑家庭餐厅，享四人围坐的宽适与舒服。精致的尺寸，圆融包涵的圆桌设想，即便是紧凑的客餐厅一体空间，也能欢乐小谈。");
break;
case "沙发组合1": add_panel('本性笔记组合沙发', "2598.00", "　　简约的圆桌设想，微冷的当代居室围成一桌大天然的觉得。天然本性，简介的设想，彰显朴素、有用、少等于多的线代生涯哲学。");
break;
case "沙发组合2": add_panel('云海衰退组合沙发', "8888.00", "　　百口人围坐的澹泊时刻，更多一份温馨。借一抹海天的蓝，再偷来云朵的舒软，只为百口围坐的时刻，尽享温馨怡然。");
break;
case "沙发组合3": add_panel('商务温馨组合沙发', "8598.00", "　　简约的圆桌设想，微冷的当代居室围成一桌大天然的觉得。天然本性，简介的设想，彰显朴素、有用、少等于多的线代生涯哲学。");
break;
case "沙发组合4": add_panel('天然作风餐桌系列', "5508.00", "　　简约的圆桌设想，微冷的当代居室围成一桌大天然的觉得。天然本性，简介的设想，彰显朴素、有用、少等于多的线代生涯哲学。");
break;
case "沙发组合5": add_panel('天然作风餐桌系列', "2578.00", "　　简约的圆桌设想，微冷的当代居室围成一桌大天然的觉得。天然本性，简介的设想，彰显朴素、有用、少等于多的线代生涯哲学。");
break;
}
});
//卸载双击事宜
app.off('dblclick');
// 界面组件
var panel = null;
function add_panel(title, total, goodsInfo) {
panel = new THING.widget.Panel({
titleText: '商品名称：' + title,
closeIcon: true, // 是不是有封闭按钮
dragable: false, // 是不是能够拖拽
retractable: true,
opacity: 0.9, // 透明度
hasTitle: true
});
panel.position = [1000, 0];
var dataObj = {
total: total,
goodsInfo: goodsInfo
};
var total = panel.addString(dataObj, 'total').caption('总价');
var goodsInfo = panel.addString(dataObj, 'goodsInfo').caption('商品引见');
}
function remove_panel() {
if (panel) {
panel.destroy();
panel = null;
}
}
//建立广告牌
var advertisingSign = app.create({
type: 'Box',
width: 15.0, // 宽度
height: 5.0, // 高度
depth: 0.5, // 深度
widthSegments: 1.0, //宽度上的节数
heightSegments: 1.0, // 高度上的节数
depthSegments: 1.0, // 深度上的节数
center: 'Bottom', // 中心点
style: {
color: '#ffffff',
opacity: 2,
image: '/uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/file/家具展销/欧派.jpg'
},
parent: app.query('building_01')[0],
});
advertisingSign.position = [50.957, 15.883, -16];
//第一人称组件
var ctrl = null;
function add_control() {
if (app.level.current.name == 'Campus') {
app.camera.position = [75.28812158204005, 1.8016147124541857, 29.699063489018236];
app.camera.target = [53.32909358623788, 4.541642332131091, -9.470748625431646];
}
if (app.level.current.name != 'Campus') {
app.level.change(app.query('新楼层')[0]);
app.camera.flyTo({
'position': [41.05650213795261, 1.3469938677565356, -18.6143831867287],
'target': [38.982251559488404, 0.7081383467333933, -23.867802267306008],
'time': 2000,
'complete': function () {
}
});
}
if (ctrl) return;
ctrl = app.addControl(
new THING.WalkControl({
walkSpeed: 0.02,
turnSpeed: 0.25,
gravity: 30,
eyeHeight: 1.7,
jumpSpeed: 0,
enableKeyRotate: false,
useCollision: true,//app.scene
useGravity: true,
groundObjects: [app.scene] //把悉数场景都增加,可把楼层或其他须要检测的增加进入碰撞系统里 | 默许值 园区地板
})
);
}
function remove_control() {
if (!ctrl)
return;
app.removeControl(ctrl);
ctrl = null;
}