Animated Background: Three + Vanta FOG v2

Three.js es una biblioteca de JavaScript que permite crear gráficos 3D en el navegador de manera eficiente, usando WebGL. En este ejemplo, se combina Three.js con Vanta.js (una librería ligera para efectos animados) para generar un fondo animado llamado Vanta FOG v2, que simula niebla interactiva en 3D.

HTML+Javascript

				
					<div id="vanta-bg"></div>

<div class="container">
  <h1>Animated Background: Three + Vanta FOG v2</h1>
  Three.js es una biblioteca de JavaScript que permite crear gráficos 3D en el navegador de manera eficiente, usando WebGL. En este ejemplo, se combina Three.js con Vanta.js (una librería ligera para efectos animados) para generar un fondo animado llamado Vanta FOG v2, que simula niebla interactiva en 3D.
<p><button onclick="changeEffect('fog')">CAMBIAR FONDO</button>
  <button id="fullscreen-toggle">PANTALLA COMPLETA</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js"></script>
<script>
let vantaEffect;
let highlightFrequency = 1.0;
let midtoneFrequency = 0.5;
let lowlightFrequency = 0.3;
let baseFrequency = 0.005;

function initVanta() {
  vantaEffect = VANTA.FOG({
    el: "#vanta-bg",
    highlightColor: 0xff0000,
    midtoneColor: 0x00ff00,
    lowlightColor: 0x0000ff,
    baseColor: 0xffffff,
    blurFactor: 0.5,
    speed: 2.0,
    zoom: 1.0,
    scale: 2,
    scaleMobile: 4
  });
}

function colorCycle() {
// Cycle through rainbow colors at different frequencies
	vantaEffect.setOptions({
	  highlightColor: cycleColor(highlightFrequency),
	  midtoneColor: cycleColor(midtoneFrequency),
	  lowlightColor: cycleColor(lowlightFrequency),
	  baseColor: cycleColor(baseFrequency),
	});
	requestAnimationFrame(colorCycle);
}

function cycleColor(frequency) {
	const time = Date.now() * 0.001;
	const r = Math.sin(frequency * time + 0) * 127 + 128;
	const g = Math.sin(frequency * time + 2) * 127 + 128;
	const b = Math.sin(frequency * time + 4) * 127 + 128;
	return (r << 16) + (g << 8) + b;
}

function changeEffect(effect) {
  switch(effect) {
    case 'fog':
      vantaEffect.setOptions({
        //highlightColor: Math.random() * 0xFFFFFF,
        //midtoneColor: Math.random() * 0x0000AA,
        //lowlightColor: Math.random() * 0xAA0000,
        //baseColor: Math.random() * 0xFF0000,
        blurFactor: Math.random() * 1.5 + 0.2,
        speed: Math.random() * 3 + 0.1,
      });
      break;
  }
}

document.addEventListener("DOMContentLoaded", initVanta);
requestAnimationFrame(colorCycle);

// Fullscreen toggle functionality
const fullscreenToggle = document.getElementById('fullscreen-toggle');

fullscreenToggle.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch((err) => {
      console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
  } else {
    document.exitFullscreen();
  }
});

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    fullscreenToggle.textContent = 'Exit Fullscreen';
  } else {
    fullscreenToggle.textContent = 'Toggle Fullscreen';
  }
});</script>
				
			

CSS

				
					@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

body, html {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  color: #333;
  background-color: #f0f0f0;
  height: 100%;

}

#vanta-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.container {
  margin: 0 auto;
  padding: 2rem;
  position: absolute;
  font-family: 'Roboto', sans-serif;
  color: #FFF;
  max-width: 1200px;
  z-index: 1;
}

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 10px;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: background-color 0.3s;
  &:hover {
    background-color: #25902950;
  }
  &:active {
    background-color: #292990CC;
  }
}
				
			

El efecto Vanta FOG utiliza la potencia de Three.js para renderizar elementos gráficos 3D directamente en el navegador, permitiendo efectos visuales llamativos sin necesidad de plugins o aplicaciones adicionales.

En el código mostrado:

  • Se define un área (div) donde se aplicará el fondo animado.
  • Con CSS, se estilizan los textos y el contenedor.
  • Con JavaScript, se utiliza Vanta.js para controlar los colores y la frecuencia de los movimientos de la niebla con Three.js.

El resultado es un fondo fluido y dinámico que reacciona a la interacción del usuario, ofreciendo una experiencia visual moderna y envolvente, ideal para mejorar la presentación de páginas web o proyectos digitales.