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-26 11:52:54 +08:00
parent 3a362f6487
commit 2ee34c7598
3 changed files with 1 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
index.html
View File

@@ -285,83 +285,6 @@
</div>
</div>
</div>
<div class="control-section">
<div class="control-section-title">海天线柔和</div>
<div class="control-grid">
<div class="control-group">
<label>模糊强度</label>
<input type="range" id="horizon-blend" min="0" max="1" value="0.45" step="0.01">
<div class="control-value" id="horizon-blend-value">0.45</div>
</div>
<div class="control-group">
<label>发光强度</label>
<input type="range" id="horizon-glow" min="0" max="1" value="0.28" step="0.01">
<div class="control-value" id="horizon-glow-value">0.28</div>
</div>
</div>
</div>
</div>
<div class="control-group">
<label>太阳方位角 (Azimuth)</label>
<input type="range" id="sun-azimuth" min="-180" max="180" value="180" step="0.1">
<div class="control-value" id="sun-azimuth-value">180.0°</div>
</div>
<div class="control-group">
<label>曝光度 (Exposure)</label>
<input type="range" id="exposure" min="0" max="1" value="0.1" step="0.01">
<div class="control-value" id="exposure-value">0.10</div>
</div>
<div class="control-group">
<label>大气浑浊度 (Turbidity)</label>
<input type="range" id="turbidity" min="1" max="20" value="10" step="0.1">
<div class="control-value" id="turbidity-value">10.0</div>
</div>
<div class="control-group">
<label>瑞利散射 (Rayleigh)</label>
<input type="range" id="rayleigh" min="0" max="4" value="2" step="0.01">
<div class="control-value" id="rayleigh-value">2.00</div>
</div>
<div class="control-group">
<label>Bloom 强度 (Bloom Strength)</label>
<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.10</div>
</div>
<div class="control-group">
<label>Bloom 扩散 (Bloom Radius)</label>
<input type="range" id="bloom-radius" min="0" max="1" value="0" step="0.01">
<div class="control-value" id="bloom-radius-value">0.00</div>
</div>
<div class="control-group">
<label>云层覆盖度 (Cloud Coverage)</label>
<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.40</div>
</div>
<div class="control-group">
<label>云层密度 (Cloud Density)</label>
<input type="range" id="cloud-density" min="0" max="1" value="0.5" step="0.01">
<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 class="control-group">
<label>雾浓度 (Fog Density)</label>
<input type="range" id="fog-density" min="0" max="1" value="0.42" step="0.01">
<div class="control-value" id="fog-density-value">0.42</div>
</div>
<div class="control-group">
<label>雾高度 (Fog Height)</label>
<input type="range" id="fog-height" min="0" max="1" value="0.32" step="0.01">
<div class="control-value" id="fog-height-value">0.32</div>
</div>
<div class="control-group">
<label>雾范围 (Fog Range)</label>
<input type="range" id="fog-range" min="0" max="1" value="0.55" step="0.01">
<div class="control-value" id="fog-range-value">0.55</div>
</div>
</div>
<div id="stats">FPS: <span id="fps">60</span></div>

160
src/OceanScene.js
View File

@@ -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();
}
@@ -457,105 +449,6 @@ export class OceanScene {
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) {

2
src/main.js
View File

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