como/three-offshore-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成初版

Browse Source
This commit is contained in:
como
2026-03-25 18:41:39 +08:00
parent c5f19afa4b
commit d751437fca
4 changed files with 48 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
index.html
View File

@@ -174,8 +174,8 @@
<h3>☀️ 场景控制</h3> <h3>☀️ 场景控制</h3>
<div class="control-group"> <div class="control-group">
<label>太阳高度角 (Elevation)</label> <label>太阳高度角 (Elevation)</label>
<input type="range" id="sun-elevation" min="-10" max="90" value="15" step="0.1"> <input type="range" id="sun-elevation" min="0" max="90" value="2" step="0.1">
<div class="control-value" id="sun-elevation-value">15.0°</div> <div class="control-value" id="sun-elevation-value">2.0°</div>
</div> </div>
<div class="control-group"> <div class="control-group">
<label>太阳方位角 (Azimuth)</label> <label>太阳方位角 (Azimuth)</label>
@@ -184,8 +184,8 @@
</div> </div>
<div class="control-group"> <div class="control-group">
<label>曝光度 (Exposure)</label> <label>曝光度 (Exposure)</label>
<input type="range" id="exposure" min="0.1" max="2" value="0.5" step="0.01"> <input type="range" id="exposure" min="0" max="1" value="0.1" step="0.01">
<div class="control-value" id="exposure-value">0.50</div> <div class="control-value" id="exposure-value">0.10</div>
</div> </div>
<div class="control-group"> <div class="control-group">
<label>大气浑浊度 (Turbidity)</label> <label>大气浑浊度 (Turbidity)</label>
@@ -199,33 +199,28 @@
</div> </div>
<div class="control-group"> <div class="control-group">
<label>Bloom 强度 (Bloom Strength)</label> <label>Bloom 强度 (Bloom Strength)</label>
<input type="range" id="bloom-strength" min="0" max="2.5" value="0.72" step="0.01"> <input type="range" id="bloom-strength" min="0" max="3" value="0.1" step="0.01">
<div class="control-value" id="bloom-strength-value">0.72</div> <div class="control-value" id="bloom-strength-value">0.10</div>
</div> </div>
<div class="control-group"> <div class="control-group">
<label>Bloom 扩散 (Bloom Radius)</label> <label>Bloom 扩散 (Bloom Radius)</label>
<input type="range" id="bloom-radius" min="0" max="1" value="0.28" step="0.01"> <input type="range" id="bloom-radius" min="0" max="1" value="0" step="0.01">
<div class="control-value" id="bloom-radius-value">0.28</div> <div class="control-value" id="bloom-radius-value">0.00</div>
</div>
<div class="control-group">
<label>Bloom 阈值 (Bloom Threshold)</label>
<input type="range" id="bloom-threshold" min="0" max="1.5" value="0.82" step="0.01">
<div class="control-value" id="bloom-threshold-value">0.82</div>
</div>
<div class="control-group">
<label>云层透明度 (Cloud Opacity)</label>
<input type="range" id="cloud-opacity" min="0" max="1" value="0.78" step="0.01">
<div class="control-value" id="cloud-opacity-value">0.78</div>
</div> </div>
<div class="control-group"> <div class="control-group">
<label>云层覆盖度 (Cloud Coverage)</label> <label>云层覆盖度 (Cloud Coverage)</label>
<input type="range" id="cloud-coverage" min="0" max="1" value="0.72" step="0.01"> <input type="range" id="cloud-coverage" min="0" max="1" value="0.4" step="0.01">
<div class="control-value" id="cloud-coverage-value">0.72</div> <div class="control-value" id="cloud-coverage-value">0.40</div>
</div> </div>
<div class="control-group"> <div class="control-group">
<label>云层速度 (Cloud Speed)</label> <label>云层密度 (Cloud Density)</label>
<input type="range" id="cloud-speed" min="0" max="2" value="0.28" step="0.01"> <input type="range" id="cloud-density" min="0" max="1" value="0.5" step="0.01">
<div class="control-value" id="cloud-speed-value">0.28</div> <div class="control-value" id="cloud-density-value">0.50</div>
</div>
<div class="control-group">
<label>云层高度 (Cloud Elevation)</label>
<input type="range" id="cloud-elevation" min="0" max="1" value="0.5" step="0.01">
<div class="control-value" id="cloud-elevation-value">0.50</div>
</div> </div>
</div> </div>

1
session.txt Normal file
View File

@@ -0,0 +1 @@
codex resume 019d2462-a1f1-7a72-947b-70470e482854

45
src/OceanScene.js
View File

@@ -30,17 +30,17 @@ export class OceanScene {
this.cloudLayers = []; this.cloudLayers = [];
this.params = { this.params = {
elevation: 15, elevation: 2,
azimuth: 180, azimuth: 180,
exposure: 0.5, exposure: 0.1,
turbidity: 10, turbidity: 10,
rayleigh: 2, rayleigh: 2,
bloomStrength: 0.72, bloomStrength: 0.1,
bloomRadius: 0.28, bloomRadius: 0,
bloomThreshold: 0.82, bloomThreshold: 0,
cloudOpacity: 0.78, cloudCoverage: 0.4,
cloudCoverage: 0.72, cloudDensity: 0.5,
cloudSpeed: 0.28, cloudElevation: 0.5,
mieCoefficient: 0.005, mieCoefficient: 0.005,
mieDirectionalG: 0.8 mieDirectionalG: 0.8
}; };
@@ -172,6 +172,8 @@ export class OceanScene {
}); });
this.scene.add(this.cloudGroup); this.scene.add(this.cloudGroup);
this.setCloudElevation(this.params.cloudElevation);
this.setCloudCoverage(this.params.cloudCoverage);
this.updateClouds(); this.updateClouds();
} }
@@ -418,18 +420,21 @@ export class OceanScene {
} }
} }
setCloudOpacity(value) {
this.params.cloudOpacity = value;
this.updateClouds();
}
setCloudCoverage(value) { setCloudCoverage(value) {
this.params.cloudCoverage = value; this.params.cloudCoverage = value;
this.updateClouds(); this.updateClouds();
} }
setCloudSpeed(value) { setCloudDensity(value) {
this.params.cloudSpeed = 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() { updateClouds() {
@@ -441,7 +446,9 @@ export class OceanScene {
const cloudColor = warmCloud.lerp(dayCloud, sunMix); const cloudColor = warmCloud.lerp(dayCloud, sunMix);
for (const layer of this.cloudLayers) { 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.opacity = opacity;
layer.mesh.material.color.copy(cloudColor); layer.mesh.material.color.copy(cloudColor);
layer.mesh.visible = opacity > 0.015; layer.mesh.visible = opacity > 0.015;
@@ -458,10 +465,10 @@ export class OceanScene {
} }
if (this.cloudGroup) { if (this.cloudGroup) {
this.cloudGroup.rotation.y = time * 0.015 * this.params.cloudSpeed; this.cloudGroup.rotation.y = time * 0.004;
this.cloudLayers.forEach((layer) => { this.cloudLayers.forEach((layer) => {
layer.texture.offset.x = time * layer.speedX * this.params.cloudSpeed; layer.texture.offset.x = time * layer.speedX;
layer.texture.offset.y = time * layer.speedY * this.params.cloudSpeed; layer.texture.offset.y = time * layer.speedY;
}); });
} }

6
src/main.js
View File

@@ -33,6 +33,7 @@ function setupControls(oceanScene) {
const bindSlider = (id, formatter, setter) => { const bindSlider = (id, formatter, setter) => {
const slider = document.getElementById(id); const slider = document.getElementById(id);
const valueLabel = document.getElementById(`${id}-value`); const valueLabel = document.getElementById(`${id}-value`);
if (!slider || !valueLabel) return;
slider.addEventListener('input', (e) => { slider.addEventListener('input', (e) => {
const value = parseFloat(e.target.value); const value = parseFloat(e.target.value);
@@ -48,10 +49,9 @@ function setupControls(oceanScene) {
bindSlider('rayleigh', (value) => value.toFixed(2), (value) => oceanScene.setRayleigh(value)); bindSlider('rayleigh', (value) => value.toFixed(2), (value) => oceanScene.setRayleigh(value));
bindSlider('bloom-strength', (value) => value.toFixed(2), (value) => oceanScene.setBloomStrength(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-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-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); main().catch(console.error);