增加了 火球以及烟的效果

src/plugins/digitalCity/components/fire/fireBall.vue

@@ -0,0 +1,77 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-10-27 16:43:05
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-02-19 16:44:32
+-->
+<script setup lang="ts">
+import { useTexture, useRenderLoop } from '@tresjs/core'
+import * as THREE from 'three'
+import { default as SPE } from '../../common/ShaderParticleEngine/build/SPE'
+
+const { map: pTexture } = await useTexture({
+	map: './plugins/digitalCity/image/sprite-explosion.png'
+})
+
+const particleGroup = new SPE.Group({
+	texture: {
+		value: pTexture,
+		frames: new THREE.Vector2(5, 5),
+		loop: 1
+	},
+	depthTest: true,
+	depthWrite: false,
+	blending: THREE.AdditiveBlending,
+	scale: 600
+})
+
+const emitter = new SPE.Emitter({
+	particleCount: 20,
+	type: SPE.distributions.SPHERE,
+	position: {
+		radius: 1
+	},
+	maxAge: { value: 2 },
+	// duration: 1,
+	activeMultiplier: 20,
+	velocity: {
+		value: new THREE.Vector3(10)
+	},
+	size: { value: [20, 100] },
+	color: {
+		value: [
+			new THREE.Color(0.5, 0.1, 0.05),
+			new THREE.Color(0.2, 0.2, 0.2)
+		]
+	},
+	opacity: { value: [0.5, 0.35, 0.1, 0] }
+})
+
+
+const flash = new SPE.Emitter({
+	particleCount: 50,
+	position: { spread: new THREE.Vector3(5, 5, 5) },
+	velocity: {
+		spread: new THREE.Vector3(30),
+		distribution: SPE.distributions.SPHERE
+	},
+	size: { value: [2, 20, 20, 20] },
+	maxAge: { value: 2 },
+	activeMultiplier: 2000,
+	opacity: { value: [0.5, 0.25, 0, 0] }
+})
+particleGroup.addEmitter(emitter).addEmitter(flash)
+
+const objFireBall = particleGroup.mesh
+
+const { onLoop } = useRenderLoop()
+onLoop(({ dt }) => {
+	particleGroup.tick()
+})
+</script>
+
+<template>
+	<primitive :object="objFireBall" :position="[-130, 60, 20]" :renderOrder="3000" />
+</template>

src/plugins/digitalCity/components/smoke/smokeA.vue

@@ -0,0 +1,77 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-10-27 16:43:05
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-02-19 16:20:42
+-->
+<script setup lang="ts">
+import { useTexture, useRenderLoop } from '@tresjs/core'
+import * as THREE from 'three'
+import { default as SPE } from '../../common/ShaderParticleEngine/build/SPE'
+
+const { map: pTexture } = await useTexture({
+	map: './plugins/digitalCity/image/smokeparticle.png'
+})
+
+const particleGroup = new SPE.Group({
+	texture: {
+		value: pTexture
+	},
+	blending: THREE.NormalBlending,
+	depthTest: true,
+	depthWrite: false,
+})
+
+const emitter = new SPE.Emitter({
+	type: SPE.distributions.BOX,
+	particleCount: 100,
+	maxAge: {
+		value: 4,
+	},
+	position: {
+		value: new THREE.Vector3(0, 0, 0),
+		spread: new THREE.Vector3(2, 0, 2),
+		radius: 1,
+	},
+	velocity: {
+		value: new THREE.Vector3(0, 16, 0),
+		spread: new THREE.Vector3(12, 40, 12),
+		distribution: SPE.distributions.BOX,
+	},
+	size: {
+		value: [200, 100, 100],
+		spread: [14, 10, 8],
+		randomise: true,
+	},
+	acceleration: {
+		value: new THREE.Vector3(0, 10, 0),
+	},
+	angle: {
+		value: 0,
+		spread: 120,
+	},
+	opacity: {
+		value: [0.5, 0.1],
+		spread: [0.1, 0],
+		randomise: true,
+	},
+	color: {
+		value: new THREE.Color('#333333'),
+		// spread: new THREE.Vector3(0.1, 0.1, 0.1)
+	}
+})
+
+particleGroup.addEmitter(emitter)
+const objSmoke = particleGroup.mesh
+
+const { onLoop } = useRenderLoop()
+onLoop(({ dt }) => {
+	particleGroup.tick(dt)
+})
+</script>
+
+<template>
+	<primitive :object="objSmoke" :position="[-130, 26, 20]" :renderOrder="3000" />
+</template>

src/plugins/digitalCity/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-26 09:20:42
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-02-06 17:50:10
+ * @LastEditTime: 2024-02-19 16:26:29
  */
 export default {
 	"name": "digitalCity",
@@ -22,11 +22,13 @@ export default {
 		{ "src": "plugins/digitalCity/preview/weather.png", "type": "img", "name": "weather", "title": "天气" },
 		{ "src": "plugins/digitalCity/preview/clouds.png", "type": "img", "name": "clouds", "title": "云☁️" },
 		{ "src": "plugins/digitalCity/preview/fog.png", "type": "img", "name": "fog", "title": "迷雾" },
+		{ "src": "plugins/digitalCity/preview/smoke.png", "type": "img", "name": "smoke", "title": "烟" },
 		{
 			"src": "plugins/digitalCity/preview/fireA.png", "type": "img", "name": "fireA", "title": "火A🔥效果",
 			referenceSource: { title: 'jaimetorrealba', url: 'https://lab.jaimetorrealba.com/fire_shaders_demos' }
 		},
 		{ "src": "plugins/digitalCity/preview/fireB.png", "type": "img", "name": "fireB", "title": "火B🔥效果" },
+		{ "src": "plugins/digitalCity/preview/fireBall.png", "type": "img", "name": "fireBall", "title": "火球🔥效果" },
 		{ "src": "plugins/digitalCity/preview/heatmap.png", "type": "img", "name": "heatmap", "title": "热力图" },
 		{ "src": "plugins/digitalCity/preview/heatmap2.png", "type": "img", "name": "heatmap2", "title": "建筑物-热力图" },
 		{ "src": "plugins/digitalCity/preview/cityRiver.png", "type": "img", "name": "cityRiver", "title": "城市河流" },

src/plugins/digitalCity/pages/fireBall.vue

@@ -0,0 +1,25 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-02-19 16:26:48
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-02-19 16:26:55
+-->
+
+<template>
+	<pagesShow>
+		<template v-slot:ability>
+			<Suspense>
+				<fireBall />
+			</Suspense>
+		</template>
+	</pagesShow>
+</template>
+
+<script setup lang="ts">
+
+import pagesShow from '../components/pagesShow.vue'
+import fireBall from '../components/fire/fireBall.vue'
+
+</script>

src/plugins/digitalCity/pages/smoke.vue

@@ -0,0 +1,25 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-02-19 15:02:15
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-02-19 15:18:34
+-->
+
+<template>
+	<pagesShow>
+		<template v-slot:ability>
+			<Suspense>
+				<smokeA />
+			</Suspense>
+		</template>
+	</pagesShow>
+</template>
+
+<script setup lang="ts">
+
+import pagesShow from '../components/pagesShow.vue'
+import smokeA from '../components/smoke/smokeA.vue'
+
+</script>

src/plugins/postProcessing/config.js

@@ -1,7 +1,15 @@
+/*
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-02-18 10:26:51
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-02-18 16:45:43
+ */
 export default {
     name: 'postProcessing',
     title: '后处理原理剖析',
-    intro: '后处理原理剖析文档地址：',
+    intro: '后处理原理剖析文档地址：完善中，待增加',
     version: '0.0.1',
     author: 'Jsonco',
     website: "https://space.bilibili.com/410503457",