完成初版

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;
             });
         }
         

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);