<template>
<el-container class="cesiumdemo">
<div style="width:100%;height:100%;position: absolute;top:0;float:left"
id='cesiumContainer'>
</div>
<el-main style='position:absolute;top:30px;left:120px;height:auto;width:400px;background:rgba(50,50,50,0.5);text-align:left'>
<el-form ref="form"
:model="viewModel"
label-width="100px">
<el-form-item label="数量">
<el-slider v-model="viewModel.emissionRate"
:min="0.0"
:max="1000.0"
:step="1"></el-slider>
</el-form-item>
<el-form-item label="粒子大小">
<el-slider v-model="viewModel.particleSize"
:min="0.5"
:max="60.0"
:step="0.1"></el-slider>
</el-form-item>
<el-form-item label="最小生命周期">
<el-slider v-model="viewModel.minimumParticleLife"
:min="0.1"
:max="30.0"
:step="1"></el-slider>
</el-form-item>
<el-form-item label="最大生命周期">
<el-slider v-model="viewModel.maximumParticleLife"
:min="0.1"
:max="30.0"
:step="1"></el-slider>
</el-form-item>
<el-form-item label="最小速度">
<el-slider v-model="viewModel.minimumSpeed"
:min="0.0"
:max="30.0"
:step="1"></el-slider>
</el-form-item>
<el-form-item label="最大速度">
<el-slider v-model="viewModel.maximumSpeed"
:min="0.0"
:max="30.0"
:step="1"></el-slider>
</el-form-item>
<el-form-item label="初始比例">
<el-slider v-model="viewModel.startScale"
:min="0.0"
:max="30.0"
:step="1"></el-slider>
</el-form-item>
<el-form-item label="终止比例">
<el-slider v-model="viewModel.endScale"
:min="0.0"
:max="30.0"
:step="1"></el-slider>
</el-form-item>
<el-form-item label="重力">
<el-input-number v-model="viewModel.gravity"
:step="0.1"
:max="10"></el-input-number>
</el-form-item>
<el-form-item label="放射类型">
<el-select v-model="typevalue"
placeholder="请选择">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</el-main>
</el-container>
</template>
<script>
/* eslint-disable */
let particleSystem
export default {
data () {
return {
viewModel: {
emissionRate: 20,
minimumParticleLife: 6,
maximumParticleLife: 7,
minimumSpeed: 9.0,
maximumSpeed: 9.5,
startScale: 1,
endScale: 20,
particleSize: 0.5,
gravity: -3.5
},
typevalue: '圆形放射',
options: [
{
lable: '圆形放射',
value: '圆形放射'
},
{
lable: '球体放射',
value: '球体放射'
},
{
lable: '圆锥体放射',
value: '圆锥体放射'
},
{
lable: '盒状放射',
value: '盒状放射'
}
]
}
},
watch: {
viewModel: {
handler (newValue, oldValue) {
particleSystem.startScale = newValue.startScale
particleSystem.endScale = newValue.endScale
particleSystem.minimumParticleLife = newValue.minimumParticleLife
particleSystem.maximumParticleLife = newValue.maximumParticleLife
particleSystem.minimumSpeed = newValue.minimumSpeed
particleSystem.maximumSpeed = newValue.maximumSpeed
particleSystem.minimumImageSize.x = newValue.particleSize
particleSystem.minimumImageSize.y = newValue.particleSize * 2
particleSystem.maximumImageSize.x = newValue.particleSize
particleSystem.maximumImageSize.y = newValue.particleSize * 2
particleSystem.emissionRate = newValue.emissionRate
},
deep: true
},
typevalue (newValue, oldValue) {
if (newValue === '圆形放射') {
particleSystem.emitter = new Cesium.CircleEmitter(0.2)
} else if (newValue === '球体放射') {
particleSystem.emitter = new Cesium.SphereEmitter(2.5)
} else if (newValue === '圆锥体放射') {
particleSystem.emitter = new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0))
} else if (newValue === '盒状放射') {
particleSystem.emitter = new Cesium.BoxEmitter(new Cesium.Cartesian3(10.0, 10.0, 10.0))
}
}
},
mounted () {
var viewer = new Cesium.Viewer('cesiumContainer')
viewer.scene.debugShowFramesPerSecond = true
window.Viewer = viewer
var scene = viewer.scene
var position = Cesium.Cartesian3.fromDegrees(116.39079313032, 39.9919830785419, 0)
var entity = viewer.entities.add({
position: position
})
let entity2 = viewer.entities.add({
name: 'text',
model: {
uri: '/static/penquan.gltf',
minimumPixelSize: 64
},
viewFrom: new Cesium.Cartesian3(-100.0, 0.0, 100.0),
position: Cesium.Cartesian3.fromDegrees(116.39079313032, 39.9919830785419, -5)
})
viewer.trackedEntity = entity2
particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
// 粒子的图片
image: '/static/fountain2.png',
// 起始颜色
startColor: new Cesium.Color(1, 1, 1, 0.3),
// 结束颜色
endColor: new Cesium.Color(0.80, 0.86, 1, 0.4),
// 开始大小比例
startScale: this.viewModel.startScale,
// 结束大小比例
endScale: this.viewModel.endScale,
// 最小生命周期
minimumParticleLife: this.viewModel.minimumParticleLife,
// 最大生命周期
maximumParticleLife: this.viewModel.maximumParticleLife,
// 最小速度
minimumSpeed: this.viewModel.minimumSpeed,
// 最大速度
maximumSpeed: this.viewModel.maximumSpeed,
// 粒子大小
imageSize: new Cesium.Cartesian2(this.viewModel.particleSize, this.viewModel.particleSize * 2),
// 粒子数量
emissionRate: this.viewModel.emissionRate,
lifetime: 16,
// 循环是否开启
loop: true,
// 粒子的释放方向
emitter: new Cesium.CircleEmitter(0.2),
// 重力回调
updateCallback: applyGravity,
// 是否以米为单位
sizeInMeters: true
}))
var gravityScratch = new Cesium.Cartesian3()
let _this = this
function applyGravity (p, dt) {
var position = p.position
Cesium.Cartesian3.normalize(position, gravityScratch)
Cesium.Cartesian3.multiplyByScalar(gravityScratch, _this.viewModel.gravity * dt, gravityScratch)
p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity)
}
viewer.scene.preUpdate.addEventListener(function (scene, time) {
particleSystem.modelMatrix = computeModelMatrix(entity, time)
particleSystem.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.Qua
