完善了 投射阴影的展示

src/plugins/projectionShadow/components/causticsTorusMesh.vue

@@ -4,17 +4,41 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-04-22 09:56:51
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-04-22 11:02:24
+ * @LastEditTime: 2024-04-22 15:28:13
 -->
 <template>
     <primitive :object="caustics.group" :position="[0, 0.003, 0]" />
     <primitive :object="caustics.helper" :visible="false" />
 </template>
 <script lang="ts" setup>
+import { defineProps, withDefaults, watchEffect, watch } from 'vue'
 import * as THREE from 'three'
 import { useTresContext, useRenderLoop } from '@tresjs/core'
 import { Caustics } from '@pmndrs/vanilla'
 
+const props = withDefaults(
+    defineProps<{
+        color?: string
+        ior?: number
+        backsideIOR?: number
+        far?: number
+        worldRadius?: number
+        intensity?: number
+        causticsOnly?: boolean
+        lightSource?: any
+    }>(),
+    {
+        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 },
+    },
+)
+
 const geometry = new THREE.TorusKnotGeometry(3, 1, 100, 32)
 const mat = new THREE.MeshPhysicalMaterial({
     transmission: 1,
@@ -25,19 +49,53 @@ mat.thickness = 2
 const torusMesh = new THREE.Mesh(geometry, mat)
 torusMesh.position.set(0, 6, 0)
 
-torusMesh.traverse((child) => {
-    if (child instanceof THREE.Mesh) {
-        child.castShadow = false
-        child.receiveShadow = false
-    }
-})
 const { renderer } = useTresContext()
-const caustics = Caustics(renderer.value, { frames: Infinity, resolution: 1024, worldRadius: 0.3 })
+const caustics = Caustics(renderer.value, { frames: Infinity, resolution: 1024, worldRadius: props.worldRadius })
 caustics.params.backside = true
 caustics.scene.add(torusMesh)
 
 const { onBeforeLoop } = useRenderLoop()
-onBeforeLoop(() => {
+onBeforeLoop(({ elapsed }) => {
+    torusMesh.rotation.x = elapsed
+    torusMesh.rotation.y = 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>

src/plugins/projectionShadow/pages/causticsDemo.vue

@@ -1,16 +1,13 @@
 <template>
     <TresCanvas v-bind="state" window-size>
-        <TresPerspectiveCamera :position="[15, 15, 15]" :fov="45" :near="0.1" :far="1000" />
+        <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" />
 
         <Suspense>
-            <whiteFloorMesh v-bind="configFloor" :position="[0, -0.1, 0]" />
-        </Suspense>
-
-        <causticsTorusMesh />
-
-        <Suspense>
-            <skyBox texture="https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/images/skyBox/workshop_blur.jpg" />
+            <groundProjectedEnv :position="[0, -0.1, 0]" />
         </Suspense>
     </TresCanvas>
 </template>
@@ -20,8 +17,9 @@ import { ACESFilmicToneMapping } from 'three'
 import { reactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
-import { skyBoxAmesh as skyBox } from 'PLS/skyBox'
-import { whiteFloorMesh } from 'PLS/floor'
+import { groundProjectedEnv } from 'PLS/skyBox'
+import { Pane } from 'tweakpane'
+
 import causticsTorusMesh from '../components/causticsTorusMesh.vue'
 
 const state = reactive({
@@ -34,10 +32,58 @@ const controlsState = reactive({
     enableDamping: true,
     autoRotate: false,
 })
-const configFloor = reactive({
-    size: [60, 60],
-    color: '#cbcb96',
-    receiveShadow: false,
-    edge: 0.35,
+
+const causticsState = reactive({
+    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 },
+})
+const paneControl = new Pane({ title: '参数' })
+paneControl.addBinding(causticsState, 'color', {
+    label: '颜色',
+})
+paneControl.addBinding(causticsState, 'ior', {
+    label: '折射系数',
+    min: 0.6,
+    max: 1.3,
+    step: 0.01,
+})
+paneControl.addBinding(causticsState, 'backsideIOR', {
+    label: '折射系数2',
+    min: 0.6,
+    max: 1.3,
+    step: 0.01,
+})
+paneControl.addBinding(causticsState, 'far', {
+    label: '可视距离',
+    min: 0,
+    max: 15,
+    step: 1,
+})
+paneControl.addBinding(causticsState, 'worldRadius', {
+    label: '材质大小',
+    min: 0.001,
+    max: 0.5,
+    step: 0.001,
+})
+paneControl.addBinding(causticsState, 'intensity', {
+    label: '强度',
+    min: 0,
+    max: 1,
+    step: 0.01,
+})
+paneControl.addBinding(causticsState, 'causticsOnly', {
+    label: '只显示投射',
+})
+paneControl.addBinding(causticsState, 'lightSource', {
+    label: '光源位置',
+    x: { min: -1, max: 1 },
+    y: { min: -1, max: 1 },
+    z: { min: -1, max: 1 },
 })
 </script>

src/plugins/skyBox/components/groundProjectedEnvCom.vue

@@ -0,0 +1,39 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-22 14:42:35
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-04-22 14:58:16
+-->
+<template>
+    <primitive :object="groundProjection" :scale="props.size" />
+</template>
+
+<script lang="ts" setup>
+import * as THREE from 'three'
+import { useTresContext } from '@tresjs/core'
+import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader'
+import { GroundProjectedEnv } from 'three-stdlib'
+
+const props = withDefaults(
+    defineProps<{
+        texture?: string
+        size?: number
+    }>(),
+    {
+        texture: 'https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/images/skyBox/round_platform_1k.exr',
+        size: 100,
+    },
+)
+
+const exrLoader = new EXRLoader()
+//exr from polyhaven.com
+const exrTex = await exrLoader.loadAsync(props.texture)
+exrTex.mapping = THREE.EquirectangularReflectionMapping
+
+const { scene } = useTresContext()
+scene.value.environment = exrTex
+// scene.value.background = exrTex
+const groundProjection = new GroundProjectedEnv(exrTex)
+</script>

src/plugins/skyBox/index.js

@@ -4,10 +4,11 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-03-27 22:08:16
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-04-22 10:58:40
+ * @LastEditTime: 2024-04-22 14:45:49
  */
 
 import environmentForLightformers from './components/environmentForLightformers.vue'
 import skyBoxAmesh from './components/skyBoxAmesh.vue'
+import groundProjectedEnv from './components/groundProjectedEnvCom.vue'
 
-export { environmentForLightformers, skyBoxAmesh }
+export { environmentForLightformers, skyBoxAmesh, groundProjectedEnv }