重写控制面板
This commit is contained in:
302
index.html
302
index.html
@@ -60,131 +60,6 @@
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#info {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(10px);
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
#info h2 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#info p {
|
||||
margin: 5px 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#sun-controls {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(10px);
|
||||
min-width: 280px;
|
||||
max-height: calc(100vh - 40px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#sun-controls h3 {
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||||
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: 0;
|
||||
}
|
||||
|
||||
.control-group.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
font-size: 11px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.control-group input[type="range"] {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.control-group input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #4a9eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.control-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.control-toggle label {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.control-toggle input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: #5da9ff;
|
||||
}
|
||||
|
||||
.control-value {
|
||||
text-align: right;
|
||||
font-size: 10px;
|
||||
opacity: 0.6;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
#stats {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
@@ -207,183 +82,6 @@
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
<div id="info">
|
||||
<h2>🌊 写实无尽海洋</h2>
|
||||
<p>🖱️ 左键拖动旋转视角</p>
|
||||
<p>🖱️ 右键拖动平移</p>
|
||||
<p>🖱️ 滚轮缩放</p>
|
||||
<p>☀️ 使用右上角控制太阳</p>
|
||||
</div>
|
||||
|
||||
<div id="sun-controls">
|
||||
<h3>☀️ 场景控制</h3>
|
||||
|
||||
<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-toggle">
|
||||
<label for="rain-enabled">启用镜头雨幕</label>
|
||||
<input type="checkbox" id="rain-enabled">
|
||||
</div>
|
||||
<div class="control-grid">
|
||||
<div class="control-group">
|
||||
<label>屏幕雨滴</label>
|
||||
<input type="range" id="rain-screen-intensity" min="0" max="1.5" value="0.41" step="0.01">
|
||||
<div class="control-value" id="rain-screen-intensity-value">0.41</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>雨线强度</label>
|
||||
<input type="range" id="rain-veil-intensity" min="0" max="1.5" value="1.15" step="0.01">
|
||||
<div class="control-value" id="rain-veil-intensity-value">1.15</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>雨滴尺寸</label>
|
||||
<input type="range" id="rain-drop-size" min="0.4" max="1.8" value="1.00" step="0.01">
|
||||
<div class="control-value" id="rain-drop-size-value">1.00</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>速度</label>
|
||||
<input type="range" id="rain-speed" min="0.2" max="2.5" value="1.00" step="0.01">
|
||||
<div class="control-value" id="rain-speed-value">1.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-toggle" style="margin-top: 8px;">
|
||||
<label for="rain-audio-enabled">启用雨声</label>
|
||||
<input type="checkbox" id="rain-audio-enabled" checked>
|
||||
</div>
|
||||
<div class="control-grid">
|
||||
<div class="control-group full-width">
|
||||
<label>雨声音量</label>
|
||||
<input type="range" id="rain-audio-volume" min="0" max="1" value="0.35" step="0.01">
|
||||
<div class="control-value" id="rain-audio-volume-value">0.35</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-section">
|
||||
<div class="control-section-title">雪效</div>
|
||||
<div class="control-toggle">
|
||||
<label for="snow-enabled">启用降雪</label>
|
||||
<input type="checkbox" id="snow-enabled">
|
||||
</div>
|
||||
<div class="control-grid">
|
||||
<div class="control-group">
|
||||
<label>雪量</label>
|
||||
<input type="range" id="snow-intensity" min="0" max="1.5" value="0.65" step="0.01">
|
||||
<div class="control-value" id="snow-intensity-value">0.65</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>速度</label>
|
||||
<input type="range" id="snow-speed" min="0.2" max="2.2" value="0.85" step="0.01">
|
||||
<div class="control-value" id="snow-speed-value">0.85</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-section">
|
||||
<div class="control-section-title">雷闪</div>
|
||||
<div class="control-toggle">
|
||||
<label for="lightning-enabled">启用雷闪</label>
|
||||
<input type="checkbox" id="lightning-enabled" checked>
|
||||
</div>
|
||||
<div class="control-grid">
|
||||
<div class="control-group full-width">
|
||||
<label>雷闪强度</label>
|
||||
<input type="range" id="lightning-intensity" min="0" max="1.5" value="0.75" step="0.01">
|
||||
<div class="control-value" id="lightning-intensity-value">0.75</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="stats">FPS: <span id="fps">60</span></div>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user