增加了 地板场景内的 网格材质 的图片纹理扩展

src/plugins/floor/components/hexGridMaterial.vue

@@ -4,15 +4,22 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-12-26 09:31:40
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-12-27 11:36:52
+ * @LastEditTime: 2025-01-06 14:58:37
 -->
 <template>
-    <CustomShaderMaterial :baseMaterial="baseMaterial" :vertexShader="vertexShader" :side="THREE.DoubleSide" transparent :fragmentShader="fragmentShader" :uniforms="uniforms" />
+    <CustomShaderMaterial
+        :baseMaterial="baseMaterial"
+        :vertexShader="vertexShader"
+        :side="THREE.DoubleSide"
+        transparent
+        :fragmentShader="fragmentShader"
+        :uniforms="uniforms"
+    />
 </template>
 <script setup lang="ts">
 import { watch } from 'vue'
 import * as THREE from 'three'
-import { useRenderLoop } from '@tresjs/core'
+import { useRenderLoop, useTexture } from '@tresjs/core'
 import { CustomShaderMaterial } from '@tresjs/cientos'
 import fragmentShader from '../shaders/hexGridMaterial.frag'
 
@@ -33,6 +40,8 @@ const props = defineProps({
     divisionScaleX: { default: 1.0 },
     direction: { default: 4 }, // vertical: 4, horizontal: 3, radial: 5 , circle: 6
     isReversed: { default: false },
+    hasMaskTexture: { default: false },
+    maskTexture: { default: null },
 })
 
 const vertexShader = `
@@ -41,6 +50,7 @@ void main() {
     uvPosition = uv;
 }
 `
+
 const uniforms = {
     gridWeight: { value: props.gridWeight },
     raisedBottom: { value: props.raisedBottom },
@@ -55,9 +65,24 @@ const uniforms = {
     time: { value: 0.0 },
 } as any
 
+if (props.maskTexture) {
+    // uniforms.hasMaskTexture.value = true
+    uniforms.maskTexture.value = await useTexture([props.maskTexture])
+}
+
 watch(
-    () => [props.gridWeight, props.raisedBottom, props.waveFrequency, props.wavePow, props.division, props.divisionScaleX, props.direction, props.isReversed],
-    ([gridWeight, raisedBottom, waveFrequency, wavePow, division, divisionScaleX, direction, isReversed]) => {
+    () => [
+        props.gridWeight,
+        props.raisedBottom,
+        props.waveFrequency,
+        props.wavePow,
+        props.division,
+        props.divisionScaleX,
+        props.direction,
+        props.isReversed,
+        props.hasMaskTexture,
+    ],
+    ([gridWeight, raisedBottom, waveFrequency, wavePow, division, divisionScaleX, direction, isReversed, hasMaskTexture]) => {
         uniforms.gridWeight.value = gridWeight
         uniforms.raisedBottom.value = raisedBottom
         uniforms.waveFrequency.value = waveFrequency
@@ -66,6 +91,7 @@ watch(
         uniforms.divisionScaleX.value = divisionScaleX
         uniforms.direction.value = direction
         uniforms.isReversed.value = isReversed
+        uniforms.hasMaskTexture.value = hasMaskTexture
     },
 )
 

src/plugins/floor/components/hexGridMesh.vue

@@ -4,12 +4,14 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-12-26 15:55:05
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-12-27 11:32:04
+ * @LastEditTime: 2025-01-06 15:21:10
 -->
 <template>
     <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
         <TresPlaneGeometry :args="[1, 1]" />
-        <hexGridMaterial :baseMaterial="baseMaterial" v-bind="$attrs" />
+        <Suspense>
+            <hexGridMaterial :baseMaterial="baseMaterial" v-bind="$attrs" maskTexture="./plugins/floor/image/logoBlack.png" />
+        </Suspense>
     </TresMesh>
 </template>
 <script setup lang="ts">

src/plugins/floor/pages/hexGridGround.vue

@@ -44,12 +44,16 @@ const configState = reactive({
     divisionScaleX: 1.0,
     isReversed: false,
     direction: 4,
+    hasMaskTexture: false,
 })
 
 const paneControl = new Pane({
     title: 'hexGridGround',
     expanded: true,
 })
+paneControl.addBinding(configState, 'hasMaskTexture', {
+    label: '图片纹理',
+})
 paneControl.addBinding(configState, 'color', { label: '颜色' })
 paneControl.addBinding(configState, 'speed', {
     label: '速度',