增加了 一个 数字地板 场景

src/plugins/floor/components/digitalGround.vue

@@ -0,0 +1,142 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-25 08:31:01
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-08-09 15:27:00
+-->
+<template>
+    <TresGroup>
+        <TresMesh :rotateX="-Math.PI / 2">
+            <TresCircleGeometry :args="[size]" />
+            <TresShaderMaterial v-bind="tsmConfig" />
+        </TresMesh>
+    </TresGroup>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue'
+import * as THREE from 'three'
+import { useTexture, useRenderLoop } from '@tresjs/core'
+
+const props = withDefaults(
+    defineProps<{
+        size?: number
+        speed?: number
+        color?: string
+    }>(),
+    {
+        size: 10,
+        speed: 1,
+        color: '#FFFFFF',
+    },
+)
+
+const pTexture = await useTexture([
+    './plugins/floor/image/digitalGround1.png',
+    './plugins/floor/image/digitalGround2.png',
+    './plugins/floor/image/digitalGround3.png',
+    './plugins/floor/image/digitalGround4.png',
+])
+for (let i = 0; i < pTexture.length; i++) {
+    pTexture[i].colorSpace = THREE.LinearSRGBColorSpace
+    pTexture[i].wrapS = THREE.RepeatWrapping
+    pTexture[i].wrapT = THREE.RepeatWrapping
+    pTexture[i].magFilter = THREE.LinearFilter
+    pTexture[i].minFilter = THREE.LinearMipmapLinearFilter
+}
+
+const tsmConfig = {
+    uniforms: {
+        time: {
+            value: 0,
+        },
+        radius: {
+            value: props.size,
+        },
+        uColor: {
+			value: new THREE.Color(props.color)
+		},
+        texture0: {
+            value: pTexture[0],
+        },
+        texture1: {
+            value: pTexture[1],
+        },
+        texture2: {
+            value: pTexture[2],
+        },
+        texture3: {
+            value: pTexture[3],
+        },
+    },
+    vertexShader: `
+        varying vec3 vPosition;
+        varying vec2 vUv;
+        void main(){
+            vPosition = position;
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }
+    `,
+    fragmentShader: `
+        uniform float time;
+        uniform float radius;
+
+        uniform sampler2D texture0;
+        uniform sampler2D texture1;
+        uniform sampler2D texture2;
+        uniform sampler2D texture3;
+
+        varying vec3 vPosition;
+        uniform vec3 uColor;
+        varying vec2 vUv;
+
+        float wave(float a, float l, float s, float second, float val) {
+            float PI = 3.141592653;
+            float wave = a * sin(- val * 2.0 * PI / l + second * s * 2.0 * PI / l);
+            return (wave + 1.0) / 2.0;
+        }
+        void main(){
+            vec4 basceColor = vec4(uColor, 1.0);
+            vec4 back = texture2D( texture0, vUv * 16.0);
+
+            vec4 ori1 = texture2D( texture1, vUv * 4.0); // 电子元件
+            vec4 ori2 = texture2D( texture2, vUv * 16.0 ); // 点
+            vec4 ori3 = texture2D( texture3, vUv * 16.0 ); // 网格
+
+            float length = length( vec2(vPosition.x, vPosition.y) );
+            // 应用波函数蒙版
+            float flag1 = wave(1.0, radius / 2.0, 45.0, time, length);
+            if (flag1 < 0.5) {
+                flag1 = 0.0;
+            }
+            ori1.a = ori1.a * (flag1 * 0.8 + 0.2);
+            float flag2 = wave(1.0, radius / 3.0, 30.0, time, length);
+            ori2.a = ori2.a * (flag2 * 0.8 + 0.2);
+            float flag3 = wave(1.0, 60.0, 20.0, time, length);
+            ori3.a = ori3.a * (flag3 * 2.0 - 1.5);
+            // 应用蒙版
+            float alpha = clamp(ori1.a + ori2.a + ori3.a + back.a * 0.01, 0.0, 1.0);
+            basceColor.a = alpha*2.0;
+
+            gl_FragColor = basceColor * clamp((2.0 - (length * 2.0 / radius)), 0.0, 1.0);
+        }
+    `,
+    side: THREE.DoubleSide,
+    transparent: true,
+}
+
+watch(
+    () => props.color,
+    (newVal) => {
+        tsmConfig.uniforms.uColor.value = new THREE.Color(newVal)
+    },
+)
+
+const { onLoop } = useRenderLoop()
+onLoop(({ elapsed }) => {
+    tsmConfig.uniforms.time.value = elapsed / 10 * props.speed
+})
+</script>

src/plugins/floor/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-12-20 17:01:37
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-06-18 14:32:02
+ * @LastEditTime: 2024-08-09 14:34:44
  */
 export default {
     name: 'floor',
@@ -24,6 +24,7 @@ export default {
         { src: 'plugins/floor/preview/videoFloor.png', type: 'img', name: 'videoFloor', title: 'video动态底座' },
         { src: 'plugins/floor/preview/imgFloor.png', type: 'img', name: 'imgFloor', title: '图片动态底座' },
         { src: 'plugins/floor/preview/canvasFloor.png', type: 'img', name: 'canvasFloor', title: 'canvas动态底座' },
+        { src: 'plugins/floor/preview/digitalGround.png', type: 'img', name: 'digitalGround', title: '数字动态底座' },
         { src: 'plugins/floor/preview/whiteFloor.png', type: 'img', name: 'whiteFloor', title: '白色边缘模糊' },
         { src: 'plugins/floor/preview/gridPlus.png', type: 'img', name: 'gridPlus', title: '网格扩展' },
         {

src/plugins/floor/pages/digitalGround.vue

@@ -0,0 +1,52 @@
+<template>
+    <TresCanvas clearColor="#666666" window-size>
+        <TresPerspectiveCamera :position="[3, 3, 0]" :fov="45" :near="0.1" :far="10000" />
+        <OrbitControls enableDamping autoRotate />
+
+        <Suspense>
+            <digitalGround 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 digitalGround from '../components/digitalGround.vue'
+
+const reflectorState = reactive({
+    reflectivity: 0.1,
+    showGridHelper: false,
+    scale: 1,
+})
+const configState = reactive({
+    color: '#de62f2', 
+    speed: 0.8,
+    size: 10,
+})
+
+const paneControl = new Pane({
+    title: 'digitalGround',
+    expanded: true,
+})
+paneControl.addBinding(configState, 'color', { label: '颜色' })
+paneControl.addBinding(configState, 'speed', {
+    label: '速度',
+    min: 0.1,
+    max: 5.0,
+    step: 0.1,
+})
+paneControl.addBinding(configState, 'size', {
+    label: '大小',
+    min: 0.1,
+    max: 20,
+    step: 0.1,
+})
+</script>