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

本文将模拟一个“欧派”，让大家足不出户在家里就能更加直观立体的挑选家具。

效果图：

第一步，利用CampusBuilder搭建模拟场景。CampusBuilder的模型库有各种各样的模型，使我们搭建出的场景更逼真。使用CampusBuilde创建层级，之后再给层级加外立面就出现了当前的效果。这次我们其实只是需要一个楼层，所以我们就把上次使用的过的场景拿来改造一下。详情移步：CampusBuilder3D场景制作工具
演示地址：http://www.thingjs.com/guide/sampleindex.html?name=/uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/家具展销.js?n=0.02831302030203031

	//加载场景代码
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