<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>奥运火焰</title>
<link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script src="./js/tooltip.js"></script>
<script src="./js/config.js"></script>
<script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
#toolbar .header {
font-weight: bold;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar" class="param-container tool-bar">
风向：
<select id="options" style="width: 71%">
<option value ="undf"></option>
<option value ="east">东风</option>
<option value ="south">南风</option>
<option value ="west">西风</option>
<option value ="north">北风</option>
</select><br>
<a style="color: white">风速：</a><input id="windlevel" type="text" style="width: 112px;margin-left: 4px" ><br>
<button id="bt" type="button" class="button black">确定</button>
</div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<script>
function onload(Cesium) {
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var widget = viewer.cesiumWidget;
// 折叠参数面板
$(".params-setting-anchor").click(function () {
$(".params-setting").toggleClass("params-setting-hide");
});
//Set bounds of our simulation time
// var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
// var stop = Cesium.JulianDate.addSeconds(start, 500, new Cesium.JulianDate());
//
// //Make sure viewer is at the desired time.
// viewer.clock.startTime = start.clone();
// viewer.clock.stopTime = stop.clone();
// viewer.clock.currentTime = start.clone();
// viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
// viewer.clock.multiplier = 1;
// viewer.clock.shouldAnimate = true;
var viewModelfire= {
emissionRate : 40.0,
gravity : 1.0,
minimumParticleLife : 2,
maximumParticleLife : 3,
minimumSpeed : 3.0,
maximumSpeed : 5.0,
startScale : 5.0,
endScale : 6,
particleSize : 2,
windSpeed: 10,
windType: "undf",
windDirection: [{type:"west",canshu:new Cesium.Cartesian3(1 , 0 , 0),x:1.0,y:0,z:0},//x为正：向西； x为负：向东； y为正：向南向上； y为负：向北向下； z为正：向比向上； z为负：向南向下
{type:"east",canshu:new Cesium.Cartesian3(-1 , 0 , 0),x:-1.0,y:0,z:0},
{type:"south",canshu:new Cesium.Cartesian3(0 , 1 , 0),x:0,y:1.0,z:0},
{type:"north",canshu:new Cesium.Cartesian3(0 , -1 , 0),x:0,y:-1.0,z:0},
{type:"undf",canshu:new Cesium.Cartesian3(0 , 0 , 0),x:0,y:0,z:0}]
};
var viewModelsmoke= {
emissionRate: 40.0,
gravity: 2.0,
minimumParticleLife: 6,
maximumParticleLife: 7,
minimumSpeed: 9,
maximumSpeed: 9.5,
startScale: 2,
endScale: 10,
particleSize: 6.5,
windSpeed: 10,
windType: "undf",
windDirection: [{type:"west",canshu:new Cesium.Cartesian3(1 , 0 , 0),x:1.0,y:0,z:0},//x为正：向西； x为负：向东； y为正：向南向上； y为负：向北向下； z为正：向比向上； z为负：向南向下
{type:"east",canshu:new Cesium.Cartesian3(-1 , 0 , 0),x:-1.0,y:0,z:0},
{type:"south",canshu:new Cesium.Cartesian3(0 , 1 , 0),x:0,y:1.0,z:0},
{type:"north",canshu:new Cesium.Cartesian3(0 , -1 , 0),x:0,y:-1.0,z:0},
{type:"undf",canshu:new Cesium.Cartesian3(0 , 0 , 0),x:0,y:0,z:0}]
};
var promise = scene.open(URL_CONFIG.SCENE_CBD);
Cesium.when(promise, function (layer) {
for(var i=0;i<layer.length;i++){
layer[i].selectEnabled = false
}
scene.camera.setView({
destination : new Cesium.Cartesian3.fromDegrees(116.45509750748982,39.90661075211756,121.84466850338113),
orientation : {
heading : 6.046736017734375,
pitch : -0.2777089418628558,
roll : 6.283185307179586
}
});
smoke();
fire();
}, function () {
var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
widget.showErrorPanel(title, undefined, e);
});
function fire() {
var pos1 = Cesium.Cartesian3.fromDegrees(116.45435918469913,39.90935742145429,146.16445509515142);
var entity = viewer.entities.add({
position: pos1,
});
var particleSystem2 = scene.primitives.add(new Cesium.ParticleSystem({
image : './images/fire.png',
startColor: new Cesium.Color(1, 1, 1, 1),
endColor: new Cesium.Color(0.5, 0, 0, 0),
startScale: viewModelfire.startScale,
endScale: viewModelfire.endScale,
minimumParticleLife: viewModelfire.minimumParticleLife,
maximumParticleLife: viewModelfire.maximumParticleLife,
minimumSpeed: viewModelfire.minimumSpeed,
maximumSpeed: viewModelfire.maximumSpeed,
imageSize: new Cesium.Cartesian2(viewModelfire.particleSize, viewModelfire.particleSize),
emissionRate: viewModelfire.emissionRate,
lifetime: 6.0,
//循环是否开启
updateCallback : applyForce, //设置作用力
loop: true,
emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),
sizeInMeters: true,
}));
viewer.scene.preUpdate.addEventListener(function (scene, time) {
particleSystem2.modelMatrix = computeModelMatrix(entity, time);
particleSystem2.emitterModelMatrix = computeEmitterModelMatrix();
});
function computeModelMatrix(entity, time) {
return entity.computeModelMatrix(time, new Cesium.Matrix4());
}
var emitterModelMatrix = new Cesium.Matrix4();
var translation = new Cesium.Cartesian3();
var rotation = new Cesium.Quaternion();
var hpr = new Cesium.HeadingPitchRoll();
var trs = new Cesium.TranslationRotationScale();
//改变粒子系统的位置
function computeEmitterModelMatrix() {
hpr = Cesium.HeadingPitchRoll.fromDegrees(0,0,0, hpr);
trs.translation = Cesium.Cartesian3.fromElements(0,0, 0, translation);
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);
return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix);
}
//重力的方向
var gravityScratch = new Cesium.Cartesian3();
//风向
//控制风向的方法？？？
//x为正：向西； x为负：向东； y为正：向南向上； y为负：向北向下； z为正：向比向上； z为负：向南向下
var windDirectionForFire = new Cesium.Cartesian3(1 , 0.5 , 0);
//风力 对应风级 每秒多少米
var windSpeed = 5;
//风向和重力方向共同作用的结果
var endDirection=new Cesium.Cartesian3();
function applyForce(p, dt) {
var canshu_x,canshu_y,canshu_z;
var windType = viewModelfire.windType;
for(var i=0;i<viewModelfire.windDirection.length;i++){
if(viewModelfire.windDirection[i].type === windType){
windDirectionForFire = viewModelfire.windDirection[i].canshu;
canshu_x = viewModelfire.windDirection[i].x;
canshu_y = viewModelfire.windDirection[i].y;
canshu_z = viewModelfire.windDirection[i].z;
break
}
}
windDirectionForFire.x = canshu_x;
windDirectionForFire.y = canshu_y;
windDirectionForFire.z = canshu_z;
// We need to compute a local up vector for each particle in geocentric space.
var position = p.position;
//console.log(viewModel.windspeed);
Cesium.Cartesian3.normalize(position, gravityScratch);
//判断windDirectionForFire是否为(0,0,0)，以决定是否执行Cesium.Cartesian3.normalize(windDirection, windDirection);函数
if(!Cesium.Cartesian3.equalsEpsilon(windDirectionForFire,new Cesium.Cartesian3(0,0,0),0))
{
Cesium.Cartesian3.normalize(windDirectionForFire, windDirectionForFire);
}
Cesium.Cartesian3.multiplyByScalar(gravityScratch, viewModelfire.gravity * dt, gravityScratch);
Cesium.Cartesian3.multiplyByScalar(windDirectionForFire, viewModelfire.windSpeed * dt * 0.3, windDirectionForFire);
endDirection = Cesium.Cartesian3.add(gravityScratch, windDirectionForFire, endDirection);
p.velocity = Cesium.Cartesian3.add(p.velocity, endDirection, p.velocity);
}
}
function smoke(){
var pos1 = Cesium.Cartesian3.fromDegrees(116.45435918469913,39.90935742145429,150.16445509515142);
var entity = viewer.entities.add({
position: pos1,
});
var particleSystem1 = scene.primitives.add(new Cesium.ParticleSystem({
image : './images/smoke03.png',
startColor: new Cesium.Color(1, 1, 1, 1),
endColor: new Cesium.Color(0.5, 0, 0, 0),
startScale: viewModelsmoke.startScale,
endScale: viewModelsmoke.endScale,
minimumParticleLife: viewModelsmoke.minimumParticleLife,
maximumParticleLife: viewModelsmoke.maximumParticleLife,
minimumSpeed: viewModelsmoke.minimumSpeed,
maximumSpeed: viewModelsmoke.maximumSpeed,
imageSize: new Cesium.Cartesian2(viewModelsmoke.particleSize, viewModelsmoke.particleSize),
emissionRate: viewModelsmoke.emissionRate,
lifetime: 6.0,
//循环是否开启
updateCallback : applyForce, //设置作用力
loop: true,
emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),
sizeInMeters: true,
}));
viewer.scene.preUpdate.addEventListener(function (scene, time) {
particleSystem1.modelMatrix = computeModelMatrix(entity, time);
particleSystem1.emitterModelMatrix = computeEmitterModelMatrix();
});
function computeModelMatrix(entity, time) {
return entity.computeModelMatrix(time, new Cesium.Matrix4());
}
var emitterModelMatrix = new Cesium.Matrix4();
var translation = new Cesium.Cartesian3();
var rotation = new Cesium.Quaternion();
var hpr = new Cesium.HeadingPitchRoll();
var trs = new Cesium.TranslationRotationScale();
//改变粒子系统的位置
function computeEmitterModelMatrix() {
hpr = Cesium.HeadingPitchRoll.fromDegrees(0,0,0, hpr);
trs.translation = Cesium.Cartesian3.fromElements(0,0, 0, translation);
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);
return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix);
}
//重力的方向
var gravityScratch = new Cesium.Cartesian3();
//风向
//控制风向的方法？？？
//x为正：向西； x为负：向东； y为正：向南向上； y为负：向北向下； z为正：向比向上； z为负：向南向下
var windDirectionForSmoke = new Cesium.Cartesian3(1 , 0.5 , 0);
//风力 对应风级 每秒多少米
var windSpeed = 5;
//风向和重力方向共同作用的结果
var endDirection=new Cesium.Cartesian3();
function applyForce(p, dt) {
var canshu_x,canshu_y,canshu_z;
var windType = viewModelsmoke.windType;
for(var i=0;i<viewModelsmoke.windDirection.length;i++){
if(viewModelsmoke.windDirection[i].type === windType){
windDirectionForSmoke = viewModelsmoke.windDirection[i].canshu;
canshu_x = viewModelsmoke.windDirection[i].x;
canshu_y = viewModelsmoke.windDirection[i].y;
canshu_z = viewModelsmoke.windDirection[i].z;
break
}
}
windDirectionForSmoke.x = canshu_x;
windDirectionForSmoke.y = canshu_y;
windDirectionForSmoke.z = canshu_z;
// We need to compute a local up vector for each particle in geocentric space.
var position = p.position;
//console.log(viewModel.windspeed);
Cesium.Cartesian3.normalize(position, gravityScratch);
//判断windDirectionForFire是否为(0,0,0)，以决定是否执行Cesium.Cartesian3.normalize(windDirection, windDirection);函数
if(!Cesium.Cartesian3.equalsEpsilon(windDirectionForSmoke,new Cesium.Cartesian3(0,0,0),0))
{
Cesium.Cartesian3.normalize(windDirectionForSmoke, windDirectionForSmoke);
}
Cesium.Cartesian3.multiplyByScalar(gravityScratch, viewModelfire.gravity * dt, gravityScratch);
Cesium.Cartesian3.multiplyByScalar(windDirectionForSmoke, viewModelfire.windSpeed * dt, windDirectionForSmoke);
endDirection = Cesium.Cartesian3.add(gravityScratch, windDirectionForSmoke, endDirection);
p.velocity = Cesium.Cartesian3.add(p.velocity, endDirection, p.velocity);
}
}
$('#bt').click(function () {
var windtype = $('#options option:selected') .val();
var windspeed = $('#windlevel').val();
viewModelfire.windSpeed = windspeed;
viewModelfire.windType = windtype;
viewModelsmoke.windSpeed = windspeed;
viewModelsmoke.windType = windtype;
});
//
$("#toolbar").show();
$('#loadingbar').remove();
}
if (typeof Cesium !== 'undefined') {
window.startupCalled = true;
onload(Cesium);
}
</script>
</body>
</html>
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接