优化 完成

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

@@ -11,11 +11,22 @@ const MeshTransmissionMaterialClass = shallowRef()
 const { extend, scene, renderer, camera } = useTresContext()
 const parent = shallowRef<TresObject>()
 
-const backside = true
-const backsideThickness = 0
-const thickness = 0
+const props = withDefaults(
+    defineProps<{
+        backside?: boolean
+        thickness?: number
+        backsideThickness?: number
+        fboResolution?: number
+    }>(),
+    {
+        backside: true,
+        thickness: 1,
+        backsideThickness: 0.5,
+        fboResolution: 256,
+    },
+)
+
 const backsideEnvMapIntensity = 0
-const fboResolution = 256
 
 extend({ MeshTransmissionMaterial })
 
@@ -31,11 +42,10 @@ function findMeshByMaterialUuid(scene: TresObject, materialUuid: string): TresOb
 const discardMaterial = new MeshDiscardMaterial()
 const { onBeforeLoop } = useRenderLoop()
 
-const fboBack = useFBO({ width: fboResolution, height: fboResolution, isLoop: false }) as unknown as Ref<WebGLRenderTarget<Texture>>
-const fboMain = useFBO({ width: fboResolution, height: fboResolution, isLoop: false }) as unknown as Ref<WebGLRenderTarget<Texture>>
+const fboBack = useFBO({ width: props.fboResolution, height: props.fboResolution, isLoop: false }) as unknown as Ref<WebGLRenderTarget<Texture>>
+const fboMain = useFBO({ width: props.fboResolution, height: props.fboResolution, isLoop: false }) as unknown as Ref<WebGLRenderTarget<Texture>>
 onMounted(async () => {
     await nextTick()
-    MeshTransmissionMaterialClass.value.buffer = fboMain.value.texture
     parent.value = findMeshByMaterialUuid(scene.value as unknown as TresObject, MeshTransmissionMaterialClass.value.uuid)
 })
 let oldBg
@@ -53,11 +63,11 @@ onBeforeLoop(({ elapsed }) => {
 
             parent.value.material = discardMaterial
 
-            if (backside) {
+            if (props.backside) {
                 renderer.value.setRenderTarget(fboBack.value)
                 renderer.value.render(scene.value, camera.value as Camera)
                 parent.value.material = MeshTransmissionMaterialClass.value
-                parent.value.material.thickness = backsideThickness
+                parent.value.material.thickness = props.backsideThickness
                 parent.value.material.buffer = fboBack.value.texture
                 parent.value.material.side = BackSide
                 parent.value.material.envMapIntensity = backsideEnvMapIntensity
@@ -66,10 +76,8 @@ onBeforeLoop(({ elapsed }) => {
             renderer.value.render(scene.value, camera.value as Camera)
             parent.value.material.buffer = fboMain.value.texture
             parent.value.material = MeshTransmissionMaterialClass.value
-            parent.value.material.thickness = thickness
+            parent.value.material.thickness = props.thickness
             parent.value.material.side = oldSide
-
-            // parent.value.material.buffer = fboMain.value.texture
             parent.value.material.envMapIntensity = oldEnvMapIntensity
 
             scene.value.background = oldBg
@@ -85,10 +93,7 @@ defineExpose({ root: MeshTransmissionMaterialClass, constructor: MeshTransmissio
 <template>
     <TresMeshTransmissionMaterial
         ref="MeshTransmissionMaterialClass"
-        :transmission="0"
-        :_transmission="1"
-        :anisotropic-blur="0.1"
-        :thickness="0"
+        :buffer="fboMain.texture"
         :side="DoubleSide"
     />
 </template>

src/plugins/basic/pages/materials/transmissionMaterial.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-04-25 10:54:10
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-04-25 17:02:07
+ * @LastEditTime: 2024-04-25 18:02:39
 -->
 <template>
     <TresCanvas v-bind="state" window-size>
@@ -15,12 +15,12 @@
 
         <TresMesh :position="[0, 1.9, 0]" name="torus">
             <TresTorusKnotGeometry :args="[1, 0.35, 100, 32]" />
-            <TresMeshStandardMaterial color="#ff33ff" :roughness="0" :metalness="1" />
+            <TransmissionMaterial v-bind="materialState" />
         </TresMesh>
 
         <TresMesh :position="[-2.5, 1.5, 2.5]" receive-shadow cast-shadow name="cube">
             <TresCylinderGeometry :args="[1.5, 1.5, 2]" />
-            <TransmissionMaterial />
+            <TresMeshStandardMaterial color="#ff33ff" :roughness="0" :metalness="1" />
         </TresMesh>
 
         <gridPlus :args="[3, 3]" />
@@ -57,23 +57,83 @@ const controlsState = reactive({
     autoRotate: false,
 })
 
-const outlineState = reactive({
-    color: '#ff00ae',
-    thickness: 0.1,
-    screenspace: false,
+const materialState = reactive({
+    color: '#ffffff',
+    roughness: 0,
+    reflectivity: 0.5,
+    attenuationColor: '#ffffff',
+    attenuationDistance: 2,
+    chromaticAberration: 0.05,
+    anisotropicBlur: 0.1,
+    distortion: 0,
+    temporalDistortion: 0,
+    backside: true,
+    thickness: 1,
+    backsideThickness: 0.5,
 })
 
 const paneControl = new Pane()
-paneControl.addBinding(outlineState, 'color', {
+paneControl.addBinding(materialState, 'color', {
     label: '颜色',
 })
-paneControl.addBinding(outlineState, 'thickness', {
-    label: 'thickness',
+paneControl.addBinding(materialState, 'roughness', {
+    label: 'roughness',
+    min: 0,
+    max: 1,
+    step: 0.01,
+})
+paneControl.addBinding(materialState, 'reflectivity', {
+    label: 'reflectivity',
+    min: 0,
+    max: 1,
+    step: 0.01,
+})
+paneControl.addBinding(materialState, 'attenuationColor', {
+    label: 'attenuationColor',
+})
+paneControl.addBinding(materialState, 'attenuationDistance', {
+    label: 'attenuationDistance',
     min: 0,
     max: 2,
     step: 0.01,
 })
-paneControl.addBinding(outlineState, 'screenspace', {
-    label: 'space',
+paneControl.addBinding(materialState, 'chromaticAberration', {
+    label: 'chromaticAberration',
+    min: 0,
+    max: 2,
+    step: 0.01,
+})
+paneControl.addBinding(materialState, 'anisotropicBlur', {
+    label: 'anisotropicBlur',
+    min: 0,
+    max: 10,
+    step: 0.01,
+})
+paneControl.addBinding(materialState, 'distortion', {
+    label: 'distortion',
+    min: 0,
+    max: 10,
+    step: 0.01,
+})
+paneControl.addBinding(materialState, 'temporalDistortion', {
+    label: 'temporalDistortion',
+    min: 0,
+    max: 1,
+    step: 0.01,
+})
+paneControl.addBinding(materialState, 'backside', {
+    label: 'backside',
+})
+paneControl.addBinding(materialState, 'thickness', {
+    label: 'thickness',
+    min: 0,
+    max: 4,
+    step: 0.01,
+})
+paneControl.addBinding(materialState, 'backsideThickness', {
+    label: 'backsideThickness',
+    min: 0,
+    max: 4,
+    step: 0.01,
 })
 </script>