Creating a Dynamic Sky with Day-Night Transitions in Three.js

Based on the reference image you provided, you can achieve a dynamic sky with day-night transitions using Three.js's Sky object. This is specifically designed for creating realistic sky effects with atmospheric scattering.

Using the Sky Object

The Sky object in Three.js is perfect for creating realistic skies with a moving sun. Here's how you can implement it:

1. First, import the Sky object from Three.js examples:

JAVASCRIPTCopied
import { Sky } from 'three/examples/jsm/objects/Sky.js';

2. Create a basic implementation:

JAVASCRIPTCopied
// Create Sky
const sky = new Sky();
sky.scale.setScalar(450000);
scene.add(sky);

// Add Sun
const sun = new THREE.Vector3();

// Sky parameters
const effectController = {
  turbidity: 10,
  rayleigh: 3,
  mieCoefficient: 0.005,
  mieDirectionalG: 0.7,
  elevation: 2, // Initial sun elevation
  azimuth: 180, // Initial sun azimuth
  exposure: 0.5
};

// Update the sky with parameters
const uniforms = sky.material.uniforms;
uniforms['turbidity'].value = effectController.turbidity;
uniforms['rayleigh'].value = effectController.rayleigh;
uniforms['mieCoefficient'].value = effectController.mieCoefficient;
uniforms['mieDirectionalG'].value = effectController.mieDirectionalG;

// Update sun position
function updateSun() {
  const phi = THREE.MathUtils.degToRad(90 - effectController.elevation);
  const theta = THREE.MathUtils.degToRad(effectController.azimuth);
  
  sun.setFromSphericalCoords(1, phi, theta);
  
  uniforms['sunPosition'].value.copy(sun);
  renderer.toneMappingExposure = effectController.exposure;
}

updateSun();

3. To create a day-night cycle, you can animate the elevation parameter in your animation loop:

JAVASCRIPTCopied
function animate() {
  requestAnimationFrame(animate);
  
  // Update sun position for day-night cycle
  effectController.elevation += 0.05; // Adjust speed as needed
  if (effectController.elevation > 180) {
    effectController.elevation = 0;
  }
  
  updateSun();
  renderer.render(scene, camera);
}

Enhancing the Effect

To make the sky more realistic:

1. Adjust the parameters for different times of day:

   • Lower turbidity and higher rayleigh for clearer skies
   • Higher turbidity for hazier skies
   • Adjust mieCoefficient and mieDirectionalG for different sun glows

2. Add stars that become visible at night:

JAVASCRIPTCopied
// Create stars (visible at night)
const starsGeometry = new THREE.BufferGeometry();
const starsMaterial = new THREE.PointsMaterial({
  color: 0xffffff,
  size: 1,
  transparent: true
});

const starsVertices = [];
for (let i = 0; i < 1000; i++) {
  const x = THREE.MathUtils.randFloatSpread(2000);
  const y = THREE.MathUtils.randFloatSpread(2000);
  const z = THREE.MathUtils.randFloatSpread(2000);
  starsVertices.push(x, y, z);
}

starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3));
const stars = new THREE.Points(starsGeometry, starsMaterial);
scene.add(stars);

// In your animation loop, adjust star visibility based on sun elevation
starsMaterial.opacity = Math.max(0, Math.min(1, (90 - effectController.elevation) / 90));

This implementation should give you a good starting point for creating a dynamic sky with day-night transitions similar to what you're aiming for.