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:40:44 +08:00
parent 33fcc4c74a
commit 3a362f6487
3 changed files with 321 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
index.html
View File

@@ -89,36 +89,60 @@
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
padding: 20px;
padding: 15px;
border-radius: 10px;
color: white;
z-index: 100;
backdrop-filter: blur(10px);
min-width: 250px;
min-width: 280px;
max-height: calc(100vh - 40px);
overflow-y: auto;
}
#sun-controls h3 {
margin-bottom: 15px;
font-size: 16px;
margin-bottom: 12px;
font-size: 14px;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding-bottom: 10px;
padding-bottom: 8px;
}
.control-section {
margin-bottom: 10px;
}
.control-section-title {
font-size: 11px;
opacity: 0.6;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.control-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
}
.control-group {
margin-bottom: 15px;
margin-bottom: 0;
}
.control-group.full-width {
grid-column: 1 / -1;
}
.control-group label {
display: block;
margin-bottom: 5px;
font-size: 13px;
opacity: 0.9;
margin-bottom: 3px;
font-size: 11px;
opacity: 0.85;
}
.control-group input[type="range"] {
width: 100%;
height: 6px;
border-radius: 3px;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.2);
outline: none;
-webkit-appearance: none;
@@ -126,8 +150,8 @@
.control-group input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #4a9eff;
cursor: pointer;
@@ -135,9 +159,9 @@
.control-value {
text-align: right;
font-size: 12px;
opacity: 0.7;
margin-top: 3px;
font-size: 10px;
opacity: 0.6;
margin-top: 1px;
}
#stats {
@@ -172,11 +196,112 @@
<div id="sun-controls">
<h3>☀️ 场景控制</h3>
<div class="control-group">
<label>太阳高度角 (Elevation)</label>
<input type="range" id="sun-elevation" min="0" max="90" value="2" step="0.1">
<div class="control-value" id="sun-elevation-value">2.0°</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="sun-elevation" min="0" max="90" value="2" step="0.1">
<div class="control-value" id="sun-elevation-value">2.0°</div>
</div>
<div class="control-group">
<label>太阳方位</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>曝光度</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>浑浊度</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>瑞利散射</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>
</div>
<div class="control-section">
<div class="control-section-title">Bloom 效果</div>
<div class="control-grid">
<div class="control-group">
<label>强度</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>扩散</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>
</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="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>密度</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>高度</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 class="control-section">
<div class="control-section-title">雾气</div>
<div class="control-grid">
<div class="control-group">
<label>浓度</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>高度</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>范围</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>
<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">