Cesium粒子特效喷泉特效代码及模型.zip

<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