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

最新推荐文章于 2024-08-09 07:25:58 发布

_Ginkgo

最新推荐文章于 2024-08-09 07:25:58 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： HTML5 canvas 3D ThingJs

本文链接：https://blog.csdn.net/nioooom/article/details/84141005

版权

本文介绍了如何使用WebGL技术，通过CampusBuilder构建3D火灾场景，模拟消防救援进攻路线。从搭建场景、设置着火点到绘制路线和进度条，详细阐述了实现过程，并提供了演示地址，旨在提升消防训练的直观性和效率。

摘要由CSDN通过智能技术生成

消防官兵在日常训练中经常会进行沙盘推演，相比传统的沙盘推演利用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);
    })