增加 粒子效果的 模版 从json 读取的 光圈 底座

src/plugins/floor/components/cartoonMagic.vue

@@ -0,0 +1,75 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-06-18 14:32:19
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-06-18 16:01:41
+-->
+<template>
+    <TresGroup>
+        <primitive :object="emitters" />
+        <primitive :object="batchSystem" />
+    </TresGroup>
+</template>
+<script lang="ts" setup>
+import * as THREE from 'three'
+import * as TQK from 'three.quarks'
+import { useRenderLoop } from '@tresjs/core'
+import { watch } from 'vue'
+
+const props = withDefaults(
+    defineProps<{
+        color?: string
+    }>(),
+    {
+        color: '#00ffff',
+    },
+)
+
+const getPropsColor = (a) => {
+    const colorThree = new THREE.Color(props.color)
+    const tv4color = new THREE.Vector4(colorThree.r, colorThree.g, colorThree.b, a)
+    const colorRange = new TQK.ConstantColor(tv4color)
+    return colorRange
+}
+
+const batchSystem = new TQK.BatchedRenderer()
+const loader = new TQK.QuarksLoader()
+loader.setCrossOrigin('')
+
+const emitters = new THREE.Group()
+loader.load('./plugins/floor/json/CartoonMagicZone.json', (obj) => {
+    obj.traverse((child) => {
+        if (child.type === 'ParticleEmitter') {
+            // child.scale.setScalar(0.5)
+            //@ts-ignore
+            const childSystem = child.system
+            if (childSystem.startSpeed.value === -0.25) {
+                childSystem.startSpeed = new TQK.ConstantValue(-0.5)
+            }
+            childSystem.startColor = getPropsColor(childSystem.startColor.color.w)
+            batchSystem.addSystem(childSystem)
+        }
+    })
+    if (obj.type === 'ParticleEmitter') {
+        //@ts-ignore
+        batchSystem.addSystem(obj.system)
+    }
+    emitters.add(obj)
+})
+
+const { onLoop } = useRenderLoop()
+onLoop(({ delta, elapsed }) => {
+    batchSystem.update(delta)
+})
+
+watch(
+    () => [props.color],
+    ([color]) => {
+        batchSystem.systemToBatchIndex.forEach((value, ps) => {
+					(ps as any).startColor = getPropsColor((ps as any).startColor.color.w)
+        })
+    },
+)
+</script>

src/plugins/floor/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-12-20 17:01:37
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-06-12 17:25:39
+ * @LastEditTime: 2024-06-18 14:32:02
  */
 export default {
     name: 'floor',
@@ -34,5 +34,6 @@ export default {
             referenceSource: { title: 'react-three-fiber', url: 'https://codesandbox.io/s/5xho4' },
         },
         { src: 'plugins/floor/preview/circleWave.png', type: 'img', name: 'circleWave', title: 'shaderCircleWave' },
+        { src: 'plugins/floor/preview/cartoonMagicZone.png', type: 'img', name: 'cartoonMagicZone', title: '卡通能量圈' },
     ],
 }

src/plugins/floor/pages/cartoonMagicZone.vue

@@ -0,0 +1,49 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-06-06 15:51:13
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-06-18 16:03:19
+-->
+<template>
+    <TresCanvas clearColor="#201919" window-size>
+        <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="10000" />
+        <OrbitControls enableDamping />
+        <Suspense>
+            <cartoonMagic v-bind="configState" />
+        </Suspense>
+
+        <Suspense>
+            <reflectorDUDV :position="[0, -0.5, 0]" v-bind="reflectorState" />
+        </Suspense>
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+import { OrbitControls } from '@tresjs/cientos'
+import { Pane } from 'tweakpane'
+import reflectorDUDV from '../components/reflectorDUDV.vue'
+import cartoonMagic from '../components/cartoonMagic.vue'
+
+const reflectorState = reactive({
+    reflectivity: 0.1,
+    showGridHelper: false,
+    scale: 2,
+})
+const configState = reactive({
+    color: '#ffffff',
+    scale: 1,
+})
+
+const paneControl = new Pane()
+paneControl.addBinding(configState, 'color', { label: '颜色' })
+paneControl.addBinding(configState, 'scale', {
+    label: '大小',
+    min: 0.1,
+    max: 3.0,
+    step: 0.1,
+})
+</script>