增加了 投射的组件 并可以按照 vue 的组件挂载

src/plugins/basic/components/forCientos/Caustics/index.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { shallowRef, watch, watchEffect } from 'vue'
+import { useTresContext, useRenderLoop } from '@tresjs/core'
+import { Caustics } from '@pmndrs/vanilla'
+import * as THREE from 'three'
+
+const props = withDefaults(
+    defineProps<{
+        color?: string
+        ior?: number
+        backsideIOR?: number
+        far?: number
+        worldRadius?: number
+        intensity?: number
+        causticsOnly?: boolean
+        lightSource?: any
+        resolution?: number
+    }>(),
+    {
+        color: '#ffffff',
+        ior: 1.1,
+        backsideIOR: 1.1,
+        far: 15,
+        worldRadius: 0.3,
+        intensity: 0.05,
+        causticsOnly: false,
+        lightSource: { x: 1, y: 1, z: 1 },
+        resolution: 1024,
+    },
+)
+
+const { renderer } = useTresContext()
+const caustics = Caustics(renderer.value, { frames: Infinity, resolution: props.resolution, worldRadius: props.worldRadius })
+caustics.params.backside = true
+
+const group = shallowRef(null)
+watch(group, (newVal) => {
+    if (newVal) {
+        caustics.scene.add(newVal)
+    }
+})
+const { onBeforeLoop } = useRenderLoop()
+onBeforeLoop(({ elapsed }) => {
+    caustics.update()
+})
+
+watchEffect(() => {
+    if (props.color) {
+        caustics.params.color.set(props.color)
+    }
+    if (props.ior) {
+        caustics.params.ior = props.ior
+    }
+    if (props.backsideIOR) {
+        caustics.params.backsideIOR = props.backsideIOR
+    }
+    if (props.far) {
+        caustics.params.far = props.far
+    }
+    if (props.worldRadius) {
+        caustics.params.worldRadius = props.worldRadius
+    }
+    if (props.intensity) {
+        caustics.params.intensity = props.intensity
+    }
+})
+watch(
+    () => props.causticsOnly,
+    (value) => {
+        caustics.params.causticsOnly = value
+    },
+)
+watch(
+    () => props.lightSource,
+    (value) => {
+        if (value) {
+            if (caustics.params.lightSource instanceof THREE.Vector3) {
+                caustics.params.lightSource.set(value.x, value.y, value.z)
+            }
+        }
+    },
+    { deep: true },
+)
+</script>
+
+<template>
+    <TresGroup ref="group">
+        <slot />
+    </TresGroup>
+    <primitive :object="caustics.group" :position="[0, 0.003, 0]" />
+    <primitive :object="caustics.helper" :visible="false" />
+</template>

src/plugins/basic/index.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-04-09 11:27:03
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-04-25 11:38:50
+ * @LastEditTime: 2024-04-26 11:05:48
  */
 
 import Environment from './components/forCientos/useEnvironment/component.vue'
@@ -12,5 +12,6 @@ import Lightformer from './components/forCientos/Lightformer/index.vue'
 import { useFBO } from './components/forCientos/useFBO/index.ts'
 import TransmissionMaterial from './components/forCientos/TransmissionMaterial/index.vue'
 import Center from './components/forCientos/Center/index.vue'
+import Caustics from './components/forCientos/Caustics/index.vue'
 
-export { Environment, Lightformer, useFBO, TransmissionMaterial,Center }
+export { Environment, Lightformer, useFBO, TransmissionMaterial, Center, Caustics }

src/plugins/projectionShadow/pages/causticsDemo.vue

@@ -1,10 +1,27 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-22 15:33:50
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-26 11:20:17
+-->
 <template>
     <TresCanvas v-bind="state" window-size>
         <TresPerspectiveCamera :position="[-20, 20, 15]" :fov="45" :near="1" :far="1000" />
         <OrbitControls v-bind="controlsState" />
         <TresDirectionalLight :position="[10, 2, 4]" :intensity="1" />
 
-        <causticsTorusMesh v-bind="causticsState" />
+        <Caustics v-bind="causticsState">
+            <TresMesh :position="[8, 5.5, 8.5]" receive-shadow cast-shadow name="sphere">
+                <TresSphereGeometry :args="[3.5]" />
+                <TresMeshStandardMaterial :color="0xff33ff" :roughness="0" :metalness="1" />
+            </TresMesh>
+            <TresMesh ref="torusMesh" :position="[-8, 6, -8]" name="torus">
+                <TresTorusKnotGeometry :args="[3, 1, 100, 32]" />
+                <TresMeshPhysicalMaterial color="#33ffff" :transmission="1" :roughness="0" :thickness="2" />
+            </TresMesh>
+        </Caustics>
 
         <Suspense>
             <groundProjectedEnv :position="[0, -0.1, 0]" />
@@ -14,13 +31,13 @@
 
 <script setup lang="ts">
 import { ACESFilmicToneMapping } from 'three'
-import { reactive } from 'vue'
-import { TresCanvas } from '@tresjs/core'
+import { reactive, ref } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { groundProjectedEnv } from 'PLS/skyBox'
 import { Pane } from 'tweakpane'
 
-import causticsTorusMesh from '../components/causticsTorusMesh.vue'
+import { Caustics } from 'PLS/basic'
 
 const state = reactive({
     alpha: true,
@@ -32,12 +49,20 @@ const controlsState = reactive({
     enableDamping: true,
     autoRotate: false,
 })
+const torusMesh = ref(null)
+const { onBeforeLoop } = useRenderLoop()
+onBeforeLoop(({ elapsed }) => {
+    if (torusMesh.value) {
+        torusMesh.value.rotation.x = elapsed
+        torusMesh.value.rotation.y = elapsed
+    }
+})
 
 const causticsState = reactive({
     color: '#ffffff',
     ior: 1.1,
     backsideIOR: 1.1,
-    far: 15,
+    far: 30,
     worldRadius: 0.3,
     intensity: 0.05,
     causticsOnly: false,
@@ -62,7 +87,7 @@ paneControl.addBinding(causticsState, 'backsideIOR', {
 paneControl.addBinding(causticsState, 'far', {
     label: '可视距离',
     min: 0,
-    max: 15,
+    max: 30,
     step: 1,
 })
 paneControl.addBinding(causticsState, 'worldRadius', {