修噶材质，和模型位置功能存储

src/components/Scene3D.vue

@@ -106,8 +106,9 @@ const flowParams = ref({
   power: 0.538,
   waterGate: 100.0,
   waterGate02: 0.0,
-  edgeMaskIntensity: 0.5478,
+  edgeMaskIntensity: 1.0,
   opaquePower: 5.532769,
+  edgeFade: 0.15,
 })
 
 const FLOW_DEFAULTS_KEY = 'flowMatParams_defaults'
@@ -143,6 +144,7 @@ function syncFlowParams() {
   flowMaterial.uniforms.uWaterGate02.value = p.waterGate02
   flowMaterial.uniforms.uEdgeMaskIntensity.value = p.edgeMaskIntensity
   flowMaterial.uniforms.uOpaquePower.value = p.opaquePower
+  flowMaterial.uniforms.uEdgeFade.value = p.edgeFade
 }
 
 loadFlowDefaults()
@@ -196,7 +198,11 @@ function loadModelDefaults() {
   if (saved) {
     try {
       const parsed = JSON.parse(saved)
-      Object.assign(modelTransformMap, parsed)
+      for (const key of Object.keys(modelTransformMap)) {
+        if (parsed[key]) {
+          modelTransformMap[key] = { ...modelTransformMap[key], ...parsed[key] }
+        }
+      }
       modelTransform.value = { ...modelTransformMap[selectedModelKey.value] }
     } catch (e) {
       console.warn('Failed to parse model defaults:', e)
@@ -205,7 +211,18 @@ function loadModelDefaults() {
 }
 
 function saveModelDefaults() {
-  modelTransformMap[selectedModelKey.value] = { ...modelTransform.value }
+  const t = modelTransform.value
+  modelTransformMap[selectedModelKey.value] = {
+    positionX: t.positionX,
+    positionY: t.positionY,
+    positionZ: t.positionZ,
+    rotationX: t.rotationX,
+    rotationY: t.rotationY,
+    rotationZ: t.rotationZ,
+    scaleX: t.scaleX,
+    scaleY: t.scaleY,
+    scaleZ: t.scaleZ,
+  }
   const data: Record<string, typeof modelTransformMap.foam> = {}
   for (const key in modelTransformMap) {
     data[key] = { ...modelTransformMap[key] }
@@ -214,15 +231,13 @@ function saveModelDefaults() {
   showToast('模型变换默认值已保存')
 }
 
-loadModelDefaults()
-
 const modelList: Record<string, THREE.Object3D | null> = {}
 const selectedModelKey = ref('foam')
 
 const materialList: Record<string, THREE.Material | null> = {}
 const selectedMaterialKey = ref('water')
 
-const modelTransformMap: Record<string, { positionX: number; positionY: number; positionZ: number; rotationX: number; rotationY: number; rotationZ: number; scaleX: number; scaleY: number }> = {
+const modelTransformMap: Record<string, { positionX: number; positionY: number; positionZ: number; rotationX: number; rotationY: number; rotationZ: number; scaleX: number; scaleY: number; scaleZ: number }> = {
   foam: {
     positionX: -854.3537,
     positionY: 16.01539,
@@ -232,6 +247,7 @@ const modelTransformMap: Record<string, { positionX: number; positionY: number;
     rotationZ: 52,
     scaleX: 7.5,
     scaleY: 16,
+    scaleZ: 1,
   },
   water: {
     positionX: -843.0744,
@@ -242,6 +258,7 @@ const modelTransformMap: Record<string, { positionX: number; positionY: number;
     rotationZ: 0,
     scaleX: 200,
     scaleY: 200,
+    scaleZ: 1,
   },
   flow: {
     positionX: -2152.61,
@@ -252,10 +269,12 @@ const modelTransformMap: Record<string, { positionX: number; positionY: number;
     rotationZ: 0,
     scaleX: 200,
     scaleY: 200,
+    scaleZ: 200,
   },
 }
 
 const modelTransform = ref({ ...modelTransformMap.foam })
+loadModelDefaults()
 
 function applyModelTransform(key: string) {
   const obj = modelList[key]
@@ -275,7 +294,7 @@ function applyModelTransform(key: string) {
       geom.dispose()
       mesh.geometry = new THREE.PlaneGeometry(t.scaleX, t.scaleY)
     }
-  } else if (key === 'water' || key === 'flow') {
+  } else if (key === 'water') {
     obj.position.set(t.positionX, t.positionY, t.positionZ)
     obj.rotation.order = 'YXZ'
     obj.rotation.set(
@@ -283,9 +302,15 @@ function applyModelTransform(key: string) {
       THREE.MathUtils.degToRad(t.rotationY),
       THREE.MathUtils.degToRad(t.rotationZ)
     )
-    if (key === 'flow') {
-      obj.scale.set(t.scaleX, t.scaleY, t.scaleX)
-    }
+  } else if (key === 'flow') {
+    obj.position.set(t.positionX, t.positionY, t.positionZ)
+    obj.rotation.order = 'YXZ'
+    obj.rotation.set(
+      THREE.MathUtils.degToRad(t.rotationX),
+      THREE.MathUtils.degToRad(t.rotationY),
+      THREE.MathUtils.degToRad(t.rotationZ)
+    )
+    obj.scale.set(t.scaleX, t.scaleY, t.scaleZ)
   }
 }
 
@@ -458,6 +483,7 @@ function loadWaterFlowModel() {
       THREE.MathUtils.degToRad(t.rotationY),
       THREE.MathUtils.degToRad(t.rotationZ)
     )
+    object.scale.set(t.scaleX, t.scaleY, t.scaleZ)
     object.name = 'flow'
     scene.add(object)
     modelList['flow'] = object
@@ -854,13 +880,17 @@ watch(() => flowParams.value, () => {
     <div class="model-section">
       <div class="section-label">缩放</div>
       <div class="input-item">
-        <span class="input-label">宽</span>
+        <span class="input-label">X</span>
         <input type="number" v-model.number="modelTransform.scaleX" step="0.5" class="number-input" />
       </div>
       <div class="input-item">
-        <span class="input-label">高</span>
+        <span class="input-label">Y</span>
         <input type="number" v-model.number="modelTransform.scaleY" step="0.5" class="number-input" />
       </div>
+      <div class="input-item">
+        <span class="input-label">Z</span>
+        <input type="number" v-model.number="modelTransform.scaleZ" step="0.5" class="number-input" />
+      </div>
     </div>
     <div class="model-section">
       <button class="default-btn" @click="saveModelDefaults">设置默认值</button>
@@ -1205,7 +1235,7 @@ watch(() => flowParams.value, () => {
       <div class="material-section">
         <div class="section-label">边缘遮罩强度</div>
         <div class="slider-item">
-          <input type="range" v-model.number="flowParams.edgeMaskIntensity" min="0" max="2" step="0.01" />
+          <input type="range" v-model.number="flowParams.edgeMaskIntensity" min="0" max="1" step="0.01" />
           <span class="slider-value">{{ flowParams.edgeMaskIntensity.toFixed(2) }}</span>
         </div>
       </div>
@@ -1216,6 +1246,13 @@ watch(() => flowParams.value, () => {
           <span class="slider-value">{{ flowParams.opaquePower.toFixed(2) }}</span>
         </div>
       </div>
+      <div class="material-section">
+        <div class="section-label">边缘渐变淡出</div>
+        <div class="slider-item">
+          <input type="range" v-model.number="flowParams.edgeFade" min="0" max="0.5" step="0.01" />
+          <span class="slider-value">{{ flowParams.edgeFade.toFixed(2) }}</span>
+        </div>
+      </div>
       <div class="material-section">
         <button class="default-btn" @click="saveFlowDefaults">设置默认值</button>
       </div>

src/components/waterFlow.ts

@@ -22,6 +22,7 @@ uniform float uWaterGate;
 uniform float uWaterGate02;
 uniform float uEdgeMaskIntensity;
 uniform float uOpaquePower;
+uniform float uEdgeFade;
 
 uniform sampler2D uFlowTexture;
 uniform sampler2D uFoamMacroTexture;
@@ -64,10 +65,16 @@ void main() {
     float gateIntensity = pow(max(gateMask, 0.0), uWaterGate);
 
     float edgeMask = texture2D(uMaskTexture, vUv).r;
-    float maskValue = edgeMask * uEdgeMaskIntensity;
+    float maskValue = mix(1.0, edgeMask, uEdgeMaskIntensity);
 
     float combinedIntensity = foamIntensity * gateIntensity * maskValue;
 
+    float edgeFade = 1.0;
+    if (uEdgeFade > 0.0) {
+      edgeFade = smoothstep(0.0, uEdgeFade, vUv.y) * (1.0 - smoothstep(1.0 - uEdgeFade, 1.0, vUv.y));
+    }
+    combinedIntensity *= edgeFade;
+
     vec3 baseColor = combinedIntensity * uColor;
 
     float opacity = combinedIntensity * uOpaquePower;
@@ -97,6 +104,7 @@ interface WaterFlowMaterialOptions {
   waterGate02?: number
   edgeMaskIntensity?: number
   opaquePower?: number
+  edgeFade?: number
   flowTexture?: THREE.Texture
   foamMacroTexture?: THREE.Texture
   maskTexture?: THREE.Texture
@@ -115,8 +123,9 @@ function createWaterFlowMaterial(options: WaterFlowMaterialOptions = {}) {
     power = 0.538,
     waterGate = 100.0,
     waterGate02 = 0.0,
-    edgeMaskIntensity = 0.5478,
+    edgeMaskIntensity = 1.0,
     opaquePower = 5.532769,
+    edgeFade = 0.15,
     flowTexture,
     foamMacroTexture,
     maskTexture,
@@ -143,6 +152,7 @@ function createWaterFlowMaterial(options: WaterFlowMaterialOptions = {}) {
       uWaterGate02: { value: waterGate02 },
       uEdgeMaskIntensity: { value: edgeMaskIntensity },
       uOpaquePower: { value: opaquePower },
+      uEdgeFade: { value: edgeFade },
       uFlowTexture: { value: flowTexture || new THREE.Texture() },
       uFoamMacroTexture: { value: foamMacroTexture || new THREE.Texture() },
       uMaskTexture: { value: maskTexture || new THREE.Texture() },