From 2ee34c75989945443297064eff4b656be8320ac6 Mon Sep 17 00:00:00 2001 From: como Date: Thu, 26 Mar 2026 11:52:54 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E4=BA=86=E6=97=A0=E6=95=88?= =?UTF-8?q?=E7=9A=84=E6=B5=B7=E5=A4=A9=E7=BA=BF=E6=9F=94=E5=92=8C=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 77 ---------------------- src/OceanScene.js | 160 +--------------------------------------------- src/main.js | 2 - 3 files changed, 1 insertion(+), 238 deletions(-) diff --git a/index.html b/index.html index 9ff7f6f..3c759ff 100644 --- a/index.html +++ b/index.html @@ -285,83 +285,6 @@ - -
-
海天线柔和
-
-
- - -
0.45
-
-
- - -
0.28
-
-
-
- -
- - -
180.0°
-
-
- - -
0.10
-
-
- - -
10.0
-
-
- - -
2.00
-
-
- - -
0.10
-
-
- - -
0.00
-
-
- - -
0.40
-
-
- - -
0.50
-
-
- - -
0.50
-
-
- - -
0.42
-
-
- - -
0.32
-
-
- - -
0.55
-
FPS: 60
diff --git a/src/OceanScene.js b/src/OceanScene.js index e599f2f..58518aa 100644 --- a/src/OceanScene.js +++ b/src/OceanScene.js @@ -34,8 +34,6 @@ export class OceanScene { this.fogLayers = []; this.horizonFog = null; this.skyHazeBand = null; - this.horizonSoftBlend = null; - this.horizonGlow = null; this.params = { elevation: 2, @@ -53,9 +51,7 @@ export class OceanScene { fogHeight: 0.32, fogRange: 0.55, mieCoefficient: 0.005, - mieDirectionalG: 0.8, - horizonBlend: 0.45, - horizonGlow: 0.28 + mieDirectionalG: 0.8 }; this.clock = new THREE.Clock(); @@ -289,10 +285,6 @@ export class OceanScene { this.fogGroup.add(this.horizonFog); this.skyHazeBand = this.createSkyHazeBand(); this.fogGroup.add(this.skyHazeBand); - this.horizonSoftBlend = this.createHorizonSoftBlend(); - this.fogGroup.add(this.horizonSoftBlend); - this.horizonGlow = this.createHorizonGlow(); - this.fogGroup.add(this.horizonGlow); this.scene.add(this.fogGroup); this.updateFog(); } @@ -456,105 +448,6 @@ export class OceanScene { mesh.userData.texture = texture; return mesh; } - - createHorizonSoftBlendTexture() { - const canvas = document.createElement('canvas'); - canvas.width = 64; - canvas.height = 512; - - const context = canvas.getContext('2d'); - const gradient = context.createLinearGradient(0, 0, 0, canvas.height); - gradient.addColorStop(0, 'rgba(255,255,255,0)'); - gradient.addColorStop(0.15, 'rgba(255,255,255,0.01)'); - gradient.addColorStop(0.3, 'rgba(255,255,255,0.08)'); - gradient.addColorStop(0.45, 'rgba(255,255,255,0.25)'); - gradient.addColorStop(0.5, 'rgba(255,255,255,0.32)'); - gradient.addColorStop(0.55, 'rgba(255,255,255,0.25)'); - gradient.addColorStop(0.7, 'rgba(255,255,255,0.08)'); - gradient.addColorStop(0.85, 'rgba(255,255,255,0.01)'); - gradient.addColorStop(1, 'rgba(255,255,255,0)'); - context.fillStyle = gradient; - context.fillRect(0, 0, canvas.width, canvas.height); - - const texture = new THREE.CanvasTexture(canvas); - texture.colorSpace = THREE.SRGBColorSpace; - texture.wrapS = THREE.RepeatWrapping; - texture.wrapT = THREE.ClampToEdgeWrapping; - texture.repeat.set(5, 1); - texture.needsUpdate = true; - return texture; - } - - createHorizonSoftBlend() { - const texture = this.createHorizonSoftBlendTexture(); - const material = new THREE.MeshBasicMaterial({ - map: texture, - alphaMap: texture, - color: 0xe8f0f5, - transparent: true, - opacity: 0.45, - fog: false, - depthWrite: false, - side: THREE.BackSide, - blending: THREE.NormalBlending - }); - - const geometry = new THREE.CylinderGeometry(4850, 4850, 1200, 72, 1, true); - const mesh = new THREE.Mesh(geometry, material); - mesh.position.y = 180; - mesh.renderOrder = -3; - mesh.userData.texture = texture; - return mesh; - } - - createHorizonGlowTexture() { - const canvas = document.createElement('canvas'); - canvas.width = 64; - canvas.height = 512; - - const context = canvas.getContext('2d'); - const gradient = context.createLinearGradient(0, 0, 0, canvas.height); - gradient.addColorStop(0, 'rgba(255,255,255,0)'); - gradient.addColorStop(0.25, 'rgba(255,255,255,0.02)'); - gradient.addColorStop(0.4, 'rgba(255,255,255,0.12)'); - gradient.addColorStop(0.48, 'rgba(255,255,255,0.22)'); - gradient.addColorStop(0.52, 'rgba(255,255,255,0.22)'); - gradient.addColorStop(0.6, 'rgba(255,255,255,0.12)'); - gradient.addColorStop(0.75, 'rgba(255,255,255,0.02)'); - gradient.addColorStop(1, 'rgba(255,255,255,0)'); - context.fillStyle = gradient; - context.fillRect(0, 0, canvas.width, canvas.height); - - const texture = new THREE.CanvasTexture(canvas); - texture.colorSpace = THREE.SRGBColorSpace; - texture.wrapS = THREE.RepeatWrapping; - texture.wrapT = THREE.ClampToEdgeWrapping; - texture.repeat.set(6, 1); - texture.needsUpdate = true; - return texture; - } - - createHorizonGlow() { - const texture = this.createHorizonGlowTexture(); - const material = new THREE.MeshBasicMaterial({ - map: texture, - alphaMap: texture, - color: 0xfff5e8, - transparent: true, - opacity: 0.28, - fog: false, - depthWrite: false, - side: THREE.BackSide, - blending: THREE.AdditiveBlending - }); - - const geometry = new THREE.CylinderGeometry(4600, 4600, 600, 72, 1, true); - const mesh = new THREE.Mesh(geometry, material); - mesh.position.y = 120; - mesh.renderOrder = -4; - mesh.userData.texture = texture; - return mesh; - } async initWater() { const waterGeometry = new THREE.PlaneGeometry(10000, 10000, 128, 128); @@ -825,16 +718,6 @@ export class OceanScene { this.updateFog(); } - setHorizonBlend(value) { - this.params.horizonBlend = value; - this.updateFog(); - } - - setHorizonGlow(value) { - this.params.horizonGlow = value; - this.updateFog(); - } - updateClouds() { if (!this.cloudGroup) return; @@ -904,41 +787,6 @@ export class OceanScene { ); this.skyHazeBand.visible = this.skyHazeBand.material.opacity > 0.01; } - - if (this.horizonSoftBlend) { - const softBlendColor = horizonColor.clone().lerp(skyBlendColor, 0.35); - this.horizonSoftBlend.material.color.copy(softBlendColor); - this.horizonSoftBlend.material.opacity = - this.params.horizonBlend * - THREE.MathUtils.lerp(0.8, 1.2, this.params.fogDensity) * - THREE.MathUtils.lerp(0.85, 1.1, this.params.fogRange); - this.horizonSoftBlend.position.y = THREE.MathUtils.lerp(120, 220, this.params.fogHeight); - this.horizonSoftBlend.scale.set( - THREE.MathUtils.lerp(0.9, 1.18, this.params.fogRange), - THREE.MathUtils.lerp(0.85, 1.12, this.params.fogHeight), - THREE.MathUtils.lerp(0.9, 1.18, this.params.fogRange) - ); - this.horizonSoftBlend.visible = this.horizonSoftBlend.material.opacity > 0.01; - } - - if (this.horizonGlow) { - const warmGlow = new THREE.Color(0xfff5e8); - const coolGlow = new THREE.Color(0xe8f4ff); - const glowColor = warmGlow.clone().lerp(coolGlow, sunMix); - this.horizonGlow.material.color.copy(glowColor); - this.horizonGlow.material.opacity = - this.params.horizonGlow * - THREE.MathUtils.lerp(0.7, 1.1, this.params.fogDensity) * - THREE.MathUtils.lerp(0.8, 1.05, this.params.fogRange) * - THREE.MathUtils.clamp((this.params.elevation + 5) / 50, 0.1, 1); - this.horizonGlow.position.y = THREE.MathUtils.lerp(80, 160, this.params.fogHeight); - this.horizonGlow.scale.set( - THREE.MathUtils.lerp(0.92, 1.15, this.params.fogRange), - THREE.MathUtils.lerp(0.88, 1.1, this.params.fogHeight), - THREE.MathUtils.lerp(0.92, 1.15, this.params.fogRange) - ); - this.horizonGlow.visible = this.horizonGlow.material.opacity > 0.01; - } } animate() { @@ -970,12 +818,6 @@ export class OceanScene { if (this.skyHazeBand?.userData.texture) { this.skyHazeBand.userData.texture.offset.x = -time * 0.00018; } - if (this.horizonSoftBlend?.userData.texture) { - this.horizonSoftBlend.userData.texture.offset.x = time * 0.00012; - } - if (this.horizonGlow?.userData.texture) { - this.horizonGlow.userData.texture.offset.x = -time * 0.00008; - } } if (this.vegetationSystem) { diff --git a/src/main.js b/src/main.js index db25070..9c48ea3 100644 --- a/src/main.js +++ b/src/main.js @@ -55,8 +55,6 @@ function setupControls(oceanScene) { bindSlider('fog-density', (value) => value.toFixed(2), (value) => oceanScene.setFogDensity(value)); bindSlider('fog-height', (value) => value.toFixed(2), (value) => oceanScene.setFogHeight(value)); bindSlider('fog-range', (value) => value.toFixed(2), (value) => oceanScene.setFogRange(value)); - bindSlider('horizon-blend', (value) => value.toFixed(2), (value) => oceanScene.setHorizonBlend(value)); - bindSlider('horizon-glow', (value) => value.toFixed(2), (value) => oceanScene.setHorizonGlow(value)); } main().catch(console.error);