diff --git a/src/constants/config.ts b/src/constants/config.ts index 9bcca11..fc54a94 100644 --- a/src/constants/config.ts +++ b/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, diff --git a/src/utils/createTravelScene.ts b/src/utils/createTravelScene.ts index cfb54ac..876ee5c 100644 --- a/src/utils/createTravelScene.ts +++ b/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