From 4a9410802d31ce6cf540ad09679e94469dc955a8 Mon Sep 17 00:00:00 2001 From: como Date: Fri, 27 Mar 2026 16:20:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=A4=9C=E7=A9=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/OceanScene.js | 61 +++++++++++++++++++++++++++---------------- src/weatherPresets.js | 2 +- 2 files changed, 39 insertions(+), 24 deletions(-) diff --git a/src/OceanScene.js b/src/OceanScene.js index fc80eeb..f43ded4 100644 --- a/src/OceanScene.js +++ b/src/OceanScene.js @@ -619,7 +619,7 @@ export class OceanScene { } `, transparent: true, - depthTest: false, + depthTest: true, depthWrite: false, blending: THREE.AdditiveBlending, vertexColors: true @@ -638,11 +638,11 @@ export class OceanScene { color: 0xe9f0ff, transparent: true, depthWrite: false, - depthTest: false, - blending: THREE.AdditiveBlending + depthTest: true, + blending: THREE.NormalBlending }); this.moonSprite = new THREE.Sprite(moonMaterial); - this.moonSprite.scale.setScalar(980); + this.moonSprite.scale.setScalar(490); this.scene.add(this.moonSprite); const galaxyTexture = this.createGalaxyTexture(); @@ -652,7 +652,7 @@ export class OceanScene { transparent: true, opacity: 0, depthWrite: false, - depthTest: false, + depthTest: true, blending: THREE.AdditiveBlending }); this.galaxyBand = new THREE.Sprite(galaxyMaterial); @@ -665,25 +665,39 @@ export class OceanScene { canvas.width = 256; canvas.height = 256; const ctx = canvas.getContext('2d'); - const glow = ctx.createRadialGradient(128, 128, 0, 128, 128, 128); - glow.addColorStop(0, 'rgba(255,255,255,0.98)'); - glow.addColorStop(0.2, 'rgba(244,248,255,0.98)'); - glow.addColorStop(0.34, 'rgba(228,238,255,0.96)'); - glow.addColorStop(0.58, 'rgba(175,205,255,0.42)'); - glow.addColorStop(0.82, 'rgba(126,164,235,0.12)'); - glow.addColorStop(1, 'rgba(120,150,220,0)'); - ctx.fillStyle = glow; - ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.clearRect(0, 0, canvas.width, canvas.height); + + ctx.save(); + ctx.translate(128, 128); + + ctx.beginPath(); + ctx.arc(-8, 0, 76, 0, Math.PI * 2); + ctx.closePath(); + ctx.clip(); + + const moonFill = ctx.createLinearGradient(-76, -48, 26, 44); + moonFill.addColorStop(0, 'rgba(250,252,255,1)'); + moonFill.addColorStop(0.55, 'rgba(232,239,250,1)'); + moonFill.addColorStop(1, 'rgba(198,212,232,1)'); + ctx.fillStyle = moonFill; + ctx.beginPath(); + ctx.arc(-8, 0, 76, 0, Math.PI * 2); + ctx.fill(); + + ctx.globalCompositeOperation = 'destination-out'; + ctx.beginPath(); + ctx.arc(42, 0, 76, 0, Math.PI * 2); + ctx.fill(); ctx.globalCompositeOperation = 'multiply'; - ctx.fillStyle = 'rgba(150,170,210,0.18)'; + ctx.fillStyle = 'rgba(138,152,182,0.12)'; ctx.beginPath(); - ctx.arc(152, 104, 34, 0, Math.PI * 2); + ctx.arc(-40, -18, 7, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); - ctx.arc(98, 152, 20, 0, Math.PI * 2); + ctx.arc(-34, 20, 9, 0, Math.PI * 2); ctx.fill(); - ctx.globalCompositeOperation = 'source-over'; + ctx.restore(); const texture = new THREE.CanvasTexture(canvas); texture.colorSpace = THREE.SRGBColorSpace; @@ -1945,6 +1959,7 @@ export class OceanScene { const nightFactor = THREE.MathUtils.clamp((12.0 - this.params.elevation) / 16.0, 0.0, 1.0); const weatherFade = this.params.rainEnabled ? 0.08 : this.params.snowEnabled ? 0.55 : 1.0; const opacity = (this.params.starEnabled ? this.params.starIntensity : 0.0) * nightFactor * weatherFade; + const isBlackNight = this.params.elevation < -1.0; this.starField.visible = opacity > 0.001; this.starField.material.uniforms.intensity.value = opacity; @@ -1957,10 +1972,10 @@ export class OceanScene { THREE.MathUtils.lerp(260, 520, nightFactor), Math.sin(moonAngle) * moonDistance ); - const moonGlow = THREE.MathUtils.clamp((nightFactor - 0.18) / 0.72, 0, 1); - this.moonSprite.visible = moonGlow > 0.01; + const moonGlow = isBlackNight ? THREE.MathUtils.clamp((nightFactor - 0.18) / 0.72, 0, 1) : 0.0; + this.moonSprite.visible = isBlackNight && moonGlow > 0.01; this.moonSprite.material.opacity = THREE.MathUtils.lerp(0.0, 2.4, moonGlow); - const moonScale = THREE.MathUtils.lerp(820, 1460, moonGlow); + const moonScale = THREE.MathUtils.lerp(410, 730, moonGlow); this.moonSprite.scale.setScalar(moonScale); } @@ -1973,9 +1988,9 @@ export class OceanScene { Math.sin(angle) * radius ); this.galaxyBand.material.rotation = THREE.MathUtils.degToRad(-24); - const galaxyFade = THREE.MathUtils.clamp((opacity - 0.18) / 1.1, 0, 1) * weatherFade; + const galaxyFade = isBlackNight ? THREE.MathUtils.clamp((opacity - 0.18) / 1.1, 0, 1) * weatherFade : 0.0; this.galaxyBand.material.opacity = galaxyFade * 0.92; - this.galaxyBand.visible = this.galaxyBand.material.opacity > 0.01; + this.galaxyBand.visible = isBlackNight && this.galaxyBand.material.opacity > 0.01; } } diff --git a/src/weatherPresets.js b/src/weatherPresets.js index 04c129a..208a8be 100644 --- a/src/weatherPresets.js +++ b/src/weatherPresets.js @@ -26,7 +26,7 @@ export const DEFAULT_SCENE_PARAMS = { snowSpeed: 0.85, starEnabled: true, starIntensity: 0.7, - lightningEnabled: false, + lightningEnabled: true, lightningIntensity: 0.75, mieCoefficient: 0.005, mieDirectionalG: 0.8