增加 揭露动画效果

src/plugins/visualArts/components/revealEffectMaterial.vue

@@ -0,0 +1,121 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-01-06 17:34:49
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-01-06 18:29:27
+-->
+<template>
+    <TresShaderMaterial v-bind="smState" />
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue'
+import * as THREE from 'three'
+import { useRenderLoop } from '@tresjs/core'
+import noise from 'PLS/floor/lib/alienJS/shaders/modules/noise/classic3d.glsl'
+
+const props = defineProps({
+    uProgress: { default: 0 },
+    texture: { default: null },
+})
+
+const smState = {
+    uniforms: {
+        uTexture: { value: props.texture },
+        uTime: { value: 0 },
+        uProgress: { value: 0 },
+        uImageRes: { value: new THREE.Vector2(1, 1) },
+        uRes: { value: new THREE.Vector2(1, 1) },
+    },
+    transparent: true,
+    vertexShader: `
+	uniform float uProgress;
+	varying vec2 vUv;
+
+	void main()
+	{
+		vec3 newPosition = position;
+
+		// Calculate the distance to the center of our plane
+		float distanceToCenter = distance(vec2(0.5), uv);
+
+		// Wave effect
+		float wave = (1.0 - uProgress) * sin(distanceToCenter * 20.0 - uProgress * 5.0);
+
+		// Apply the wave effect to the position Z
+		newPosition.z += wave;
+
+		// FINAL POSITION
+		gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+
+		// VARYINGS
+		vUv = uv;
+	}
+	`,
+    fragmentShader: `
+		uniform sampler2D uTexture;
+		uniform float uTime;
+		uniform float uProgress;
+		uniform vec2 uRes;
+		uniform vec2 uImageRes;
+
+		varying vec2 vUv;
+
+		${noise}
+		vec2 CoverUV(vec2 u, vec2 s, vec2 i) {
+			float rs = s.x / s.y; // Aspect plane size
+			float ri = i.x / i.y; // Aspect image size
+			vec2 st = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x); // New st
+			vec2 o = (rs < ri ? vec2((st.x - s.x) / 2.0, 0.0) : vec2(0.0, (st.y - s.y) / 2.0)) / st; // Offset
+			return u * s / st + o;
+		}
+
+		void main()
+		{
+				// New UV to prevent image stretching on fullscreen mode
+				vec2 newUv = CoverUV(vUv, uRes, uImageRes);
+
+				// Displace the UV
+				vec2 displacedUv = vUv + cnoise(vec3(vUv * 5.0, uTime * 0.1));
+
+				// Perlin noise
+				float strength = cnoise(vec3(displacedUv * 5.0, uTime * 0.2 ));
+
+				// Radial gradient
+				float radialGradient = distance(vUv, vec2(0.5)) * 12.5 - 7.0 * uProgress;
+				strength += radialGradient;
+
+				// Clamp the value from 0 to 1 & invert it
+				strength = clamp(strength, 0.0, 1.0);
+				strength = 1.0 - strength;
+
+				// Apply texture
+				vec3 textureColor = texture2D(uTexture, newUv).rgb;
+
+				// Opacity animation
+				float opacityProgress = smoothstep(0.0, 0.7, uProgress);
+
+				// FINAL COLOR
+				gl_FragColor = vec4(textureColor, strength * opacityProgress);
+		}
+	`,
+}
+
+watch(
+    () => props.uProgress,
+    (value) => {
+        if (smState) {
+            smState.uniforms.uProgress.value = value
+        }
+    },
+)
+
+const { onLoop } = useRenderLoop()
+onLoop(({ elapsed }) => {
+    if (smState) {
+        smState.uniforms.uTime.value = elapsed
+    }
+})
+</script>

src/plugins/visualArts/components/revealEffectMesh.vue

@@ -0,0 +1,21 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-01-06 15:52:51
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-01-06 18:28:50
+-->
+<template>
+    <TresMesh :position="[0, 0, -16]">
+        <TresPlaneGeometry :args="[16, 10]" />
+        <revealEffectMaterial v-bind="$attrs" :texture="texture" />
+    </TresMesh>
+</template>
+
+<script lang="ts" setup>
+import { useVideoTexture } from '@tresjs/cientos'
+import revealEffectMaterial from './revealEffectMaterial.vue'
+
+const texture = (await useVideoTexture('./plugins/visualArts/video/vlg.mp4', { loop: true })) || null
+</script>

src/plugins/visualArts/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-04-30 08:18:21
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-12-13 10:31:26
+ * @LastEditTime: 2025-01-06 15:51:37
  */
 export default {
     name: 'visualArts',
@@ -77,5 +77,12 @@ export default {
             title: '碎片模型',
             referenceSource: { title: 'honbingitee', url: 'https://gitee.com/honbingitee/three-template-next.js/commit/f34164073d37a1b23bf5cbfb2f21258b2416e92a' },
         },
+        {
+            src: 'plugins/visualArts/preview/revealEffect.png',
+            type: 'img',
+            name: 'revealEffect',
+            title: '揭露动画效果',
+            referenceSource: { title: 'honbingitee', url: 'https://github.com/colindmg/r3f-image-reveal-effect' },
+        },
     ],
 }

src/plugins/visualArts/pages/revealEffect.vue

@@ -0,0 +1,59 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-01-06 15:52:46
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-01-06 18:31:05
+-->
+<template>
+    <TresCanvas v-bind="state" window-size>
+        <TresPerspectiveCamera :position="[0, 0, 30]" :fov="45" :near="0.1" :far="1000" />
+        <OrbitControls />
+        <TresAmbientLight :intensity="0.5" />
+
+        <Suspense>
+            <revealEffectMesh v-bind="pcssConfig" />
+        </Suspense>
+
+        <Suspense>
+            <reflectorDUDV :position="[0, -6, 0]" v-bind="reflectorState" />
+        </Suspense>
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { useRenderLoop } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { reflectorDUDV } from 'PLS/floor'
+import { Pane } from 'tweakpane'
+import revealEffectMesh from '../components/revealEffectMesh.vue'
+
+const state = {
+    clearColor: '#050505',
+    antialias: false,
+}
+
+const reflectorState = {
+    reflectivity: 0.8,
+    showGridHelper: false,
+    scale: 6,
+}
+
+const pcssConfig = reactive({
+    uProgress: 0,
+})
+const paneControl = new Pane({ title: '参数' })
+paneControl.addBinding(pcssConfig, 'uProgress', {
+    label: '进度',
+    min: 0,
+    max: 1,
+    step: 0.01,
+}).disabled = true
+
+useRenderLoop().onLoop(({ elapsed }) => {
+    pcssConfig.uProgress = (Math.sin(elapsed) + 1) / 2
+    paneControl.refresh()
+})
+</script>