97 lines
3.4 KiB
HTML
97 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vanta Clouds</title>
|
|
<style>
|
|
html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; }
|
|
#vanta { width: 100vw; height: 100vh; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="vanta"></div>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.clouds.min.js"></script>
|
|
<script>
|
|
var effect = VANTA.CLOUDS({
|
|
el: "#vanta",
|
|
mouseControls: false,
|
|
touchControls: false,
|
|
gyroControls: false,
|
|
minHeight: 200.00,
|
|
minWidth: 200.00,
|
|
scale: 1.00,
|
|
scaleMobile: 4,
|
|
speed: 0.4,
|
|
backgroundColor: 0x0,
|
|
backgroundAlpha: 1,
|
|
skyColor: 0x1c1b1f,
|
|
cloudColor: 0x6d6a63,
|
|
lightColor: 0xe6dfd1
|
|
});
|
|
|
|
function hexToRgb(h) {
|
|
return [(h >> 16) & 255, (h >> 8) & 255, h & 255];
|
|
}
|
|
function rgbToHex(r, g, b) {
|
|
return (Math.round(r) << 16) | (Math.round(g) << 8) | Math.round(b);
|
|
}
|
|
function lerp(a, b, t) {
|
|
return a + (b - a) * t;
|
|
}
|
|
function lerpColor(c1, c2, t) {
|
|
var a = hexToRgb(c1), b = hexToRgb(c2);
|
|
return rgbToHex(lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t));
|
|
}
|
|
function smooth(t) {
|
|
return t * t * (3 - 2 * t);
|
|
}
|
|
|
|
var CYCLE = 20000;
|
|
|
|
var palette = [
|
|
{ t: 0.00, sky: 0x100f12, cloud: 0x54514f, light: 0x999187 },
|
|
{ t: 0.15, sky: 0x29282c, cloud: 0x6d6a63, light: 0xb0a89a },
|
|
{ t: 0.30, sky: 0x1c1b1f, cloud: 0x6d6a63, light: 0xe6dfd1 },
|
|
{ t: 0.50, sky: 0x3a383d, cloud: 0x999187, light: 0xf3ede1 },
|
|
{ t: 0.70, sky: 0x29282c, cloud: 0x6d6a63, light: 0xe0914f },
|
|
{ t: 0.85, sky: 0x1c1b1f, cloud: 0x54514f, light: 0xb0a89a },
|
|
{ t: 1.00, sky: 0x100f12, cloud: 0x54514f, light: 0x999187 }
|
|
];
|
|
|
|
function getColor(t) {
|
|
t = t % 1;
|
|
for (var i = 0; i < palette.length - 1; i++) {
|
|
if (t >= palette[i].t && t <= palette[i + 1].t) {
|
|
var span = palette[i + 1].t - palette[i].t;
|
|
var localT = span === 0 ? 0 : (t - palette[i].t) / span;
|
|
var s = smooth(localT);
|
|
return {
|
|
sky: lerpColor(palette[i].sky, palette[i + 1].sky, s),
|
|
cloud: lerpColor(palette[i].cloud, palette[i + 1].cloud, s),
|
|
light: lerpColor(palette[i].light, palette[i + 1].light, s)
|
|
};
|
|
}
|
|
}
|
|
return { sky: palette[0].sky, cloud: palette[0].cloud, light: palette[0].light };
|
|
}
|
|
|
|
var startTime = Date.now();
|
|
|
|
function animate() {
|
|
var elapsed = (Date.now() - startTime) % CYCLE;
|
|
var t = elapsed / CYCLE;
|
|
var c = getColor(t);
|
|
effect.setOptions({
|
|
skyColor: c.sky,
|
|
cloudColor: c.cloud,
|
|
lightColor: c.light
|
|
});
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html> |