增加 扩散圈球

src/plugins/basic/pages/shine/shader.vue

@@ -4,7 +4,7 @@
  * @Autor: Hawk
  * @Date: 2023-10-12 11:41:10
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-09-12 10:22:39
+ * @LastEditTime: 2024-09-17 16:01:46
 -->
 <template>
     <TresCanvas v-bind="gl" window-size>

src/plugins/digitalCity/components/radras/diffuseCircle.vue

@@ -0,0 +1,48 @@
+threshold
+<template>
+    <TresGroup :scale="curScale">
+        <TresMesh :renderOrder="2200">
+            <TresSphereGeometry :args="[props.radius, 64, 64, 0, Math.PI * 2, 0, Math.PI / 2]" />
+            <TresMeshBasicMaterial :side="THREE.DoubleSide" transparent :map="pTexture[0]" :color="ballColor" :opacity="opacity" />
+        </TresMesh>
+        <TresMesh :renderOrder="2201" :position="[0, props.radius * 0.3, 0]">
+            <TresCylinderGeometry :args="[props.radius * 1.02, props.radius * 1.02, props.radius * 0.6, 32, 1, true]" :openEnded="true" />
+            <TresMeshBasicMaterial :side="THREE.DoubleSide" transparent :map="pTexture[1]" :color="wallColor" :opacity="opacity" />
+        </TresMesh>
+    </TresGroup>
+</template>
+
+<script setup lang="ts">
+import { useRenderLoop, useTexture } from '@tresjs/core'
+import * as THREE from 'three'
+import { ref } from 'vue'
+
+const props = withDefaults(
+    defineProps<{
+        radius?: number
+        ballColor?: string
+        wallColor?: string
+        speed?: number
+    }>(),
+    {
+        radius: 100,
+        ballColor: '#ffff00',
+        wallColor: '#ffffff',
+        speed: 1,
+    },
+)
+
+const pTexture = await useTexture(['./plugins/digitalCity/image/diffuseCircle1.png', './plugins/digitalCity/image/diffuseCircle2.png'])
+pTexture[1].offset.set(0.5, 0.5)
+
+const curScale = ref(0)
+const opacity = ref(1)
+const { onLoop } = useRenderLoop()
+onLoop(({ delta }) => {
+    if (curScale.value > 1) {
+        curScale.value = 0
+    }
+    curScale.value += delta * props.speed
+    opacity.value = 1.4 - curScale.value
+})
+</script>

src/plugins/digitalCity/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-08-19 20:24:59
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-09-17 15:05:30
+ * @LastEditTime: 2024-09-17 15:53:45
  */
 export default {
     name: 'digitalCity',
@@ -19,6 +19,7 @@ export default {
         // { "src": "plugins/digitalCity/preview/buildings.mp4", "type": "video", "name": "buildings", "title": "建筑物" },
         { src: 'plugins/digitalCity/preview/buildings.png', type: 'img', name: 'buildings', title: '建筑物' },
         { src: 'plugins/digitalCity/preview/radars.png', type: 'img', name: 'radars', title: '雷达' },
+        { src: 'plugins/digitalCity/preview/diffuseCircle.png', type: 'img', name: 'diffuseCircle', title: '扩散圈球' },
         { src: 'plugins/digitalCity/preview/depthBufferDiffuse.png', type: 'img', name: 'depthBufferDiffuse', title: '带深度的半球扩散' },
         { src: 'plugins/digitalCity/preview/weather.png', type: 'img', name: 'weather', title: '天气' },
         { src: 'plugins/digitalCity/preview/lightningStorm.png', type: 'img', name: 'lightningStorm', title: '闪电' },

src/plugins/digitalCity/index.js

@@ -4,10 +4,11 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-03-15 22:00:55
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-09-17 15:05:52
+ * @LastEditTime: 2024-09-17 15:53:19
  */
 import radraA from './components/radras/radraA.vue'
 import radraB from './components/radras/radraB.vue'
+import diffuseCircle from './components/radras/diffuseCircle.vue'
 import depthBufferDiffuse from './components/radras/depthBufferDiffuse.vue'
 import precipitation from './components/weather/precipitation.vue'
 import cloudMesh from './components/weather/cloudMesh.vue'
@@ -26,6 +27,7 @@ import { reAnchorCenter, toMeshSceneCenter, objectToSceneCenter, adjustGroupCent
 export {
     radraA,
     radraB,
+    diffuseCircle,
     depthBufferDiffuse,
     precipitation,
     cloudMesh,

src/plugins/digitalCity/pages/diffuseCircle.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-09-17 15:53:04
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-09-17 16:41:55
+-->
+<template>
+    <loading></loading>
+    <pagesShow ref="pagesShowRef">
+        <template v-slot:ability>
+            <Suspense>
+                <diffuseCircle :position="[0, 20, 0]" v-bind="cmConfig" />
+            </Suspense>
+        </template>
+    </pagesShow>
+</template>
+
+<script setup lang="ts">
+import { defaultLoading as loading } from 'PLS/UIdemo'
+import { diffuseCircle } from 'PLS/digitalCity'
+import { Pane } from 'tweakpane'
+import { reactive, shallowRef, watchEffect } from 'vue'
+import pagesShow from '../components/pagesShow.vue'
+
+const cmConfig = reactive({
+		ballColor: '#ff7a3a',
+    wallColor: '#ffff00',
+    speed: 0.5,
+    radius: 158,
+})
+const paneControl = new Pane()
+paneControl.addBinding(cmConfig, 'ballColor', { label: '球颜色' })
+paneControl.addBinding(cmConfig, 'wallColor', { label: '墙颜色' })
+paneControl.addBinding(cmConfig, 'speed', { label: '速度', min: 0.01, max: 1, step: 0.01 })
+paneControl.addBinding(cmConfig, 'radius', { label: '大小', min: 10, max: 200, step: 1 })
+
+const pagesShowRef = shallowRef(null)
+watchEffect(() => {
+    if (pagesShowRef.value) {
+        pagesShowRef.value.$refs.perspectiveCameraRef.position.set(-135, 250, 320)
+    }
+})
+</script>