完成初版

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