优化银河

src/constants/config.ts

@@ -85,7 +85,7 @@ export const APP_CONFIG = {
         scale: 1.05,
         opacity: 0.42,
         blendMode: 'normal',
-        rotationSpeed: 0.0024,
+        rotationSpeed: 0.0036,
         armCount: 2,
         twist: 12,
         armSharpness: 0.6,
@@ -103,7 +103,7 @@ export const APP_CONFIG = {
         scale: 1.25,
         opacity: 0.38,
         blendMode: 'normal',
-        rotationSpeed: 0.0016,
+        rotationSpeed: 0.0024,
         armCount: 3,
         twist: 10.4,
         armSharpness: 0.52,
@@ -121,7 +121,7 @@ export const APP_CONFIG = {
         scale: 1.45,
         opacity: 0.52,
         blendMode: 'additive',
-        rotationSpeed: 0.0009,
+        rotationSpeed: 0.00135,
         armCount: 4,
         twist: 9.2,
         armSharpness: 0.58,
@@ -139,7 +139,7 @@ export const APP_CONFIG = {
         scale: 1.75,
         opacity: 0.25,
         blendMode: 'normal',
-        rotationSpeed: 0.00036,
+        rotationSpeed: 0.00054,
         armCount: 2,
         twist: 6.8,
         armSharpness: 0.28,
@@ -157,7 +157,7 @@ export const APP_CONFIG = {
         scale: 2.1,
         opacity: 0.22,
         blendMode: 'normal',
-        rotationSpeed: 0.00018,
+        rotationSpeed: 0.00027,
         armCount: 2,
         twist: 4.2,
         armSharpness: 0.16,

src/utils/createTravelScene.ts

@@ -391,8 +391,9 @@ function pickTier() {
 
 function createSmokeTexture() {
   const canvas = document.createElement('canvas')
-  canvas.width = 256
-  canvas.height = 256
+  // 扩大画布分辨率，为柔和的边缘留出空间
+  canvas.width = 512
+  canvas.height = 512
 
   const context = canvas.getContext('2d')
   if (!context) {
@@ -402,10 +403,11 @@ function createSmokeTexture() {
   context.clearRect(0, 0, canvas.width, canvas.height)
   context.globalCompositeOperation = 'screen'
 
-  for (let index = 0; index < 12; index += 1) {
-    const radius = randomRange(42, 94)
-    const x = randomRange(64, 192)
-    const y = randomRange(64, 192)
+  for (let index = 0; index < 18; index += 1) {
+    const radius = randomRange(48, 160)
+    // 确保圆的生成范围相对靠中心，避免直接接触到画布边缘
+    const x = randomRange(radius + 8, 512 - radius - 8)
+    const y = randomRange(radius + 8, 512 - radius - 8)
     const gradient = context.createRadialGradient(x, y, radius * 0.12, x, y, radius)
 
     gradient.addColorStop(0, 'rgba(255, 255, 255, 0.5)')
@@ -418,6 +420,14 @@ function createSmokeTexture() {
     context.fill()
   }
 
+  // 增加全局径向渐变蒙版，强制边缘完全透明，彻底消除“贴纸边界”
+  context.globalCompositeOperation = 'destination-in'
+  const globalGradient = context.createRadialGradient(256, 256, 128, 256, 256, 250)
+  globalGradient.addColorStop(0, 'rgba(0, 0, 0, 1)')
+  globalGradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
+  context.fillStyle = globalGradient
+  context.fillRect(0, 0, 512, 512)
+
   const texture = new THREE.CanvasTexture(canvas)
   texture.colorSpace = THREE.SRGBColorSpace
   texture.needsUpdate = true
@@ -570,7 +580,8 @@ export function createTravelScene(container: HTMLElement): TravelSceneController
       source.x + randomRange(-2.2, 2.2),
       source.y + randomRange(-2.2, 2.2),
     )
-    const scaleBase = randomRange(5.8, 14.5)
+    // 增大烟雾的基础尺寸
+    const scaleBase = randomRange(15.0, 35.0)
     const material = mesh
       ? mesh.material
       : new THREE.MeshBasicMaterial({
@@ -597,9 +608,11 @@ export function createTravelScene(container: HTMLElement): TravelSceneController
       vz: randomRange(9.5, 17.5),
       rotation: randomRange(0, Math.PI * 2),
       spin: randomRange(-0.16, 0.16),
-      baseScaleX: scaleBase * randomRange(0.8, 1.2),
-      baseScaleY: scaleBase * randomRange(0.75, 1.25),
-      opacity: randomRange(0.05, 0.13),
+      // 大幅增加长宽缩放比例的随机性，并且有概率翻转纹理，使形状更随机
+      baseScaleX: scaleBase * randomRange(0.5, 1.8) * (Math.random() < 0.5 ? 1 : -1),
+      baseScaleY: scaleBase * randomRange(0.5, 1.8) * (Math.random() < 0.5 ? 1 : -1),
+      // 由于面积变大，稍微降低一点点透明度避免过度曝光
+      opacity: randomRange(0.03, 0.09),
       wobble: randomRange(0.5, 1.2),
       wobbleSpeed: randomRange(0.35, 0.9),
     }
@@ -844,6 +857,11 @@ export function createTravelScene(container: HTMLElement): TravelSceneController
     travelRoot.position.x = -viewX * 1.8
     travelRoot.position.y = -viewY * 1.0
 
+    // 减弱银河的摆动幅度以增强深空视差
+    // 通过让银河在世界坐标中部分跟随相机视线的偏移，减小其在屏幕上的相对位移
+    galaxyGroup.position.x = viewX * 1.2
+    galaxyGroup.position.y = viewY * 0.6
+
     // 加大相机的偏移幅度和观察点偏移
     // 增加一点默认偏移，让相机的中心略微向左上，从而使画面整体偏向右下，填补空旷
     const baseLookX = -3.0