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-25 18:30:39 +08:00
parent f8d3192deb
commit c5f19afa4b
3 changed files with 250 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/main.js
View File

@@ -30,47 +30,28 @@ async function main() {
}
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);
});
const bindSlider = (id, formatter, setter) => {
const slider = document.getElementById(id);
const valueLabel = document.getElementById(`${id}-value`);
slider.addEventListener('input', (e) => {
const value = parseFloat(e.target.value);
setter(value);
valueLabel.textContent = formatter(value);
});
};
bindSlider('sun-elevation', (value) => `${value.toFixed(1)}°`, (value) => oceanScene.setSunElevation(value));
bindSlider('sun-azimuth', (value) => `${value.toFixed(1)}°`, (value) => oceanScene.setSunAzimuth(value));
bindSlider('exposure', (value) => value.toFixed(2), (value) => oceanScene.setExposure(value));
bindSlider('turbidity', (value) => value.toFixed(1), (value) => oceanScene.setTurbidity(value));
bindSlider('rayleigh', (value) => value.toFixed(2), (value) => oceanScene.setRayleigh(value));
bindSlider('bloom-strength', (value) => value.toFixed(2), (value) => oceanScene.setBloomStrength(value));
bindSlider('bloom-radius', (value) => value.toFixed(2), (value) => oceanScene.setBloomRadius(value));
bindSlider('bloom-threshold', (value) => value.toFixed(2), (value) => oceanScene.setBloomThreshold(value));
bindSlider('cloud-opacity', (value) => value.toFixed(2), (value) => oceanScene.setCloudOpacity(value));
bindSlider('cloud-coverage', (value) => value.toFixed(2), (value) => oceanScene.setCloudCoverage(value));
bindSlider('cloud-speed', (value) => value.toFixed(2), (value) => oceanScene.setCloudSpeed(value));
}
main().catch(console.error);