init

src/main.js

@@ -0,0 +1,76 @@
+import { OceanScene } from './OceanScene.js';
+
+async function main() {
+    const container = document.getElementById('container');
+    
+    const oceanScene = new OceanScene(container);
+    
+    try {
+        await oceanScene.init();
+        
+        setupControls(oceanScene);
+        
+        oceanScene.hideLoading();
+        
+        oceanScene.animate();
+        
+        console.log('写实海洋场景加载完成！');
+    } catch (error) {
+        console.error('场景加载失败:', error);
+        
+        const loading = document.getElementById('loading');
+        if (loading) {
+            loading.innerHTML = `
+                <h1 style="color: #ff6b6b;">加载失败</h1>
+                <p style="margin-top: 20px; opacity: 0.8;">${error.message}</p>
+                <p style="margin-top: 10px; opacity: 0.6;">请刷新页面重试</p>
+            `;
+        }
+    }
+}
+
+function setupControls(oceanScene) {
+    const elevationSlider = document.getElementById('sun-elevation');
+    const azimuthSlider = document.getElementById('sun-azimuth');
+    const exposureSlider = document.getElementById('exposure');
+    const turbiditySlider = document.getElementById('turbidity');
+    const rayleighSlider = document.getElementById('rayleigh');
+    
+    const elevationValue = document.getElementById('elevation-value');
+    const azimuthValue = document.getElementById('azimuth-value');
+    const exposureValue = document.getElementById('exposure-value');
+    const turbidityValue = document.getElementById('turbidity-value');
+    const rayleighValue = document.getElementById('rayleigh-value');
+    
+    elevationSlider.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        oceanScene.setSunElevation(value);
+        elevationValue.textContent = value.toFixed(1) + '°';
+    });
+    
+    azimuthSlider.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        oceanScene.setSunAzimuth(value);
+        azimuthValue.textContent = value.toFixed(1) + '°';
+    });
+    
+    exposureSlider.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        oceanScene.setExposure(value);
+        exposureValue.textContent = value.toFixed(2);
+    });
+    
+    turbiditySlider.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        oceanScene.setTurbidity(value);
+        turbidityValue.textContent = value.toFixed(1);
+    });
+    
+    rayleighSlider.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        oceanScene.setRayleigh(value);
+        rayleighValue.textContent = value.toFixed(2);
+    });
+}
+
+main().catch(console.error);