diff --git a/index.html b/index.html index 6dfada1..e3ea4ec 100644 --- a/index.html +++ b/index.html @@ -174,8 +174,8 @@

☀️ 场景控制

- -
15.0°
+ +
2.0°
@@ -184,8 +184,8 @@
- -
0.50
+ +
0.10
@@ -199,33 +199,28 @@
- -
0.72
+ +
0.10
- -
0.28
-
-
- - -
0.82
-
-
- - -
0.78
+ +
0.00
- -
0.72
+ +
0.40
- - -
0.28
+ + +
0.50
+
+
+ + +
0.50
diff --git a/session.txt b/session.txt new file mode 100644 index 0000000..4c9384a --- /dev/null +++ b/session.txt @@ -0,0 +1 @@ +codex resume 019d2462-a1f1-7a72-947b-70470e482854 diff --git a/src/OceanScene.js b/src/OceanScene.js index f4a1dad..940a1fe 100644 --- a/src/OceanScene.js +++ b/src/OceanScene.js @@ -30,17 +30,17 @@ export class OceanScene { this.cloudLayers = []; this.params = { - elevation: 15, + elevation: 2, azimuth: 180, - exposure: 0.5, + exposure: 0.1, turbidity: 10, rayleigh: 2, - bloomStrength: 0.72, - bloomRadius: 0.28, - bloomThreshold: 0.82, - cloudOpacity: 0.78, - cloudCoverage: 0.72, - cloudSpeed: 0.28, + bloomStrength: 0.1, + bloomRadius: 0, + bloomThreshold: 0, + cloudCoverage: 0.4, + cloudDensity: 0.5, + cloudElevation: 0.5, mieCoefficient: 0.005, mieDirectionalG: 0.8 }; @@ -172,6 +172,8 @@ export class OceanScene { }); this.scene.add(this.cloudGroup); + this.setCloudElevation(this.params.cloudElevation); + this.setCloudCoverage(this.params.cloudCoverage); this.updateClouds(); } @@ -418,18 +420,21 @@ export class OceanScene { } } - setCloudOpacity(value) { - this.params.cloudOpacity = value; - this.updateClouds(); - } - setCloudCoverage(value) { this.params.cloudCoverage = value; this.updateClouds(); } - setCloudSpeed(value) { - this.params.cloudSpeed = value; + setCloudDensity(value) { + this.params.cloudDensity = value; + this.updateClouds(); + } + + setCloudElevation(value) { + this.params.cloudElevation = value; + if (this.cloudGroup) { + this.cloudGroup.position.y = THREE.MathUtils.lerp(-380, 260, value); + } } updateClouds() { @@ -441,7 +446,9 @@ export class OceanScene { const cloudColor = warmCloud.lerp(dayCloud, sunMix); for (const layer of this.cloudLayers) { - const opacity = layer.baseOpacity * this.params.cloudOpacity * (0.2 + this.params.cloudCoverage * 1.2); + const coverageFactor = 0.15 + this.params.cloudCoverage * 1.15; + const densityFactor = 0.2 + this.params.cloudDensity * 1.35; + const opacity = layer.baseOpacity * coverageFactor * densityFactor; layer.mesh.material.opacity = opacity; layer.mesh.material.color.copy(cloudColor); layer.mesh.visible = opacity > 0.015; @@ -458,10 +465,10 @@ export class OceanScene { } if (this.cloudGroup) { - this.cloudGroup.rotation.y = time * 0.015 * this.params.cloudSpeed; + this.cloudGroup.rotation.y = time * 0.004; this.cloudLayers.forEach((layer) => { - layer.texture.offset.x = time * layer.speedX * this.params.cloudSpeed; - layer.texture.offset.y = time * layer.speedY * this.params.cloudSpeed; + layer.texture.offset.x = time * layer.speedX; + layer.texture.offset.y = time * layer.speedY; }); } diff --git a/src/main.js b/src/main.js index 7552556..2decef1 100644 --- a/src/main.js +++ b/src/main.js @@ -33,6 +33,7 @@ function setupControls(oceanScene) { const bindSlider = (id, formatter, setter) => { const slider = document.getElementById(id); const valueLabel = document.getElementById(`${id}-value`); + if (!slider || !valueLabel) return; slider.addEventListener('input', (e) => { const value = parseFloat(e.target.value); @@ -48,10 +49,9 @@ function setupControls(oceanScene) { bindSlider('rayleigh', (value) => value.toFixed(2), (value) => oceanScene.setRayleigh(value)); bindSlider('bloom-strength', (value) => value.toFixed(2), (value) => oceanScene.setBloomStrength(value)); bindSlider('bloom-radius', (value) => value.toFixed(2), (value) => oceanScene.setBloomRadius(value)); - bindSlider('bloom-threshold', (value) => value.toFixed(2), (value) => oceanScene.setBloomThreshold(value)); - bindSlider('cloud-opacity', (value) => value.toFixed(2), (value) => oceanScene.setCloudOpacity(value)); bindSlider('cloud-coverage', (value) => value.toFixed(2), (value) => oceanScene.setCloudCoverage(value)); - bindSlider('cloud-speed', (value) => value.toFixed(2), (value) => oceanScene.setCloudSpeed(value)); + bindSlider('cloud-density', (value) => value.toFixed(2), (value) => oceanScene.setCloudDensity(value)); + bindSlider('cloud-elevation', (value) => value.toFixed(2), (value) => oceanScene.setCloudElevation(value)); } main().catch(console.error);