init
This commit is contained in:
202
index.html
Normal file
202
index.html
Normal file
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>写实无尽海洋场景</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#loading h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 4px solid rgba(255,255,255,0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
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: 20px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(10px);
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
#sun-controls h3 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.control-group input[type="range"] {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.control-group input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #4a9eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.control-value {
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
#stats {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 10px 15px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<h1>写实海洋场景</h1>
|
||||
<div class="loader"></div>
|
||||
<p style="margin-top: 20px; opacity: 0.8;">正在加载场景...</p>
|
||||
</div>
|
||||
|
||||
<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-group">
|
||||
<label>太阳高度角 (Elevation)</label>
|
||||
<input type="range" id="sun-elevation" min="-10" max="90" value="15" step="0.1">
|
||||
<div class="control-value" id="elevation-value">15.0°</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="azimuth-value">180.0°</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>曝光度 (Exposure)</label>
|
||||
<input type="range" id="exposure" min="0.1" max="2" value="0.5" step="0.01">
|
||||
<div class="control-value" id="exposure-value">0.50</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>
|
||||
|
||||
<div id="stats">FPS: <span id="fps">60</span></div>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user