基于WebGL架构的3D可视化平台—消防救援进攻路线模拟演练

消防官兵在日常训练中经常会进行沙盘推演，相比传统的沙盘推演利用3D模拟更加直观，效率更高。
第一步，利用CampusBuilder搭建模拟火灾场景。CampusBuilder的模型库有各种各样的模型，使我们搭建出的场景更逼真。

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

第二步，设置着火点，使用火焰粒子效果

//设置火点
var particle = app.create({ 
    type: 'ParticleSystem', 
    url: 'https://thingjs.com/static/particles/fire1',
    position: [-65,6,-11]
});

第三步，创建进攻路线，设置一个全局变量 flag_index 保证每条线只能创建一次

//创建线路
function createLine(index,flag) {
	app.off('click');
	var options = {
		lineImageType:lineImage[index],
        isDraggable:true,
        TYPE:"RouteLine"
	}
	if(flag) {
        getLine(options,index);
        flag = false;
    }
}

第四步，绘制进攻路线，这里我的思路是以点连线绘制出进攻路线，设置鼠标点击标点之后连线。

//进攻路线：绘制进攻路线
function getLine(options,index){
    //lineImageType,isDraggable,TYPE
    line_array[index] = app.create({
        type: options.TYPE,
        localPosition: [0,0.5,0],
        image: options.lineImageType, // 线路中的纹理资源
        draggable : options.isDraggable,
    });
    line_array[index].scrollUV = true;
    app.on('click', function(e,line){ 
        var tempPoint = e.getPickedPosition();
        line_array[index].addPoint(tempPoint);
    });
}

第五步，设置进度条。

var bar = new THING.widget.Panel({ width: '100%' });

// 绑定数据
var dataObj = { progress: 0 };
var progress = bar.addProgress(dataObj, 'progress', [
    { name: '1', describe: '进攻路线一' },
    { name: '2', describe: '进攻路线二' },
    { name: '3', describe: '进攻路线三' },
    { name: '4', describe: '进攻路线四' },
    { name: '5', describe: '进攻路线五' }
]);
##########################################################
	function() {
        for(var i =0; i<=4 ; i++) {
            if (typeof(line_array[i]) == "undefined") { 
                continue;
            } 
            line_array[i].visible = false;
        } 
        //进度条变化 
        progress.on('change', function (id) {
            var i = id-1;
            line_array[i].visible = true;
            line_array[i].play(0.5);
        });

        //更新
        setInterval(function () {
            if (dataObj.progress >= 5)
                dataObj.progress = 1;
            else
                dataObj.progress++;
            }, 2000);
    }

在每次完成一条路线的时候，需要清除鼠标的点击事件，不然的话会将五条线连在一起就分辨不出来了。
演示地址GIF图不能完美展示我们的效果这里点击演示地址预览。
消防救援进攻路线模拟演练完成了。其实可以将功能再完善一点，CampusBuilder的模型库中有消防专栏，里面有各种消防相关模型，我们也可以添加兵力部署，消防车辆，消防装备的部署等等，更好的为消防官兵服务。
以下是完整代码：

//加载场景代码
var app = new THING.App({ 
// 场景地址
"url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/演练场景",
});

//创建贴图资源数组 每种贴图代表一种功能
var lineImage = ['/uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/file/timg.jpg',
'/uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/file/timg11.png',
'/uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/file/timg222.png',
'/uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/file/微信截图_20181127094449.png',
'images/diffuse.jpg']

//创建火焰 火狐浏览器能看到 谷歌有点问题好像 这个无所谓
var particle = app.create({ 
    type: 'ParticleSystem', 
    url: 'https://thingjs.com/static/particles/fire1',
    position: [-65,6,-11]
});

//创建一条线
var line_copy = null;
//创建一个数组保存路线对象
var line_array = [];
//创建flag来判断是否路线是否已经创建完成
var flag = [true,true,true,true,true];

//调用画线
function getLine(options,index){  
    line_array[index] = app.create({
        type: options.TYPE,
        localPosition: [0,0.5,0],
        image: options.lineImageType, // 线路中的纹理资源
        draggable : options.isDraggable,
        visible : true,
    });
    line_array[index].scrollUV = true;
    app.on('click', function(e,line){ 
        line_array[index].addPoint(e.getPickedPosition());
    });
};
//创建线路
function createLine(index) { 
    app.off('click'); 
    var options = { 
        lineImageType:lineImage[index], 
        isDraggable:true, 
        TYPE:"RouteLine" 
        } 
    if(flag[index]) { 
        getLine(options,index); 
        flag[index] = false; 
    } 
};

//创建进度条
var bar = new THING.widget.Panel({ width: '100%',position : [800,0,0] });

//绑定数据
var dataObj = { progress: 0 };
var progress = bar.addProgress(dataObj, 'progress', [
    { name: '1', describe: '进攻路线一' },
    { name: '2', describe: '进攻路线二' },
    { name: '3', describe: '进攻路线三' },
    { name: '4', describe: '进攻路线四' },
    { name: '5', describe: '进攻路线五' }
]);



app.on('load', function () {
    
    //开始画线
    THING.widget.Button('进攻路线一', function() {
        createLine(0);
    });
    THING.widget.Button('进攻路线二', function() {
        createLine(1);
    });
    THING.widget.Button('进攻路线三', function() {
        createLine(2);
    });
    THING.widget.Button('进攻路线四', function() {
        createLine(3);
    });
    THING.widget.Button('进攻路线五', function() {
        createLine(4);
    });

    //结束画线
    THING.widget.Button('结束画线', function() {
        app.off('click');
    });

    //演示开始
    THING.widget.Button('演示开始', function() {

        for(var i =0; i<=4 ; i++) {
            if (typeof(line_array[i]) == "undefined") { 
                continue;
            } 
            line_array[i].visible = false;
        } 
        //进度条变化 
        progress.on('change', function (id) {
            var i = id-1;
            line_array[i].visible = true;
            line_array[i].play(0.5);
        });

        //更新
        setInterval(function () {
            if (dataObj.progress >= 5)
                dataObj.progress = 1;
            else
                dataObj.progress++;
            }, 2000);
    });
    
});