Skybox (procedural sky)

import * as THREE from 'three';
import { Sky } from 'three/addons/objects/Sky.js';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 400);
camera.position.set(0, 1.2, 6);

const sky = new Sky();
sky.scale.setScalar(100);
scene.add(sky);
const sun = new THREE.Vector3();
sky.material.uniforms.turbidity.value = 3.2;
sky.material.uniforms.rayleigh.value = 1.6;
sky.material.uniforms.mieCoefficient.value = 0.006;
sky.material.uniforms.mieDirectionalG.value = 0.8;

const ground = new THREE.Mesh(new THREE.CircleGeometry(30, 48), new THREE.MeshStandardMaterial({ color: 0x33482c, roughness: 1 }));
ground.rotation.x = -Math.PI / 2;
ground.position.y = -0.6;
scene.add(ground);
const dl = new THREE.DirectionalLight(0xffffff, 1.8);
scene.add(dl);
scene.add(new THREE.AmbientLight(0x9fb3d9, 1.1));

const deco = new THREE.Group();
for (let i = 0; i < 7; i++) {
  const m = new THREE.Mesh(new THREE.ConeGeometry(0.3 + Math.random() * 0.3, 1 + Math.random(), 6), new THREE.MeshStandardMaterial({ color: 0x3a5230, roughness: 0.9 }));
  const a = (i / 7) * Math.PI * 2;
  m.position.set(Math.cos(a) * 3.2, -0.1, Math.sin(a) * 3.2 - 2);
  deco.add(m);
}
scene.add(deco);

function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  const time = t * 0.001;
  const elevation = 20 + Math.sin(time * 0.15) * 12;
  const azimuth = time * 8;
  const phi = THREE.MathUtils.degToRad(90 - elevation);
  const theta = THREE.MathUtils.degToRad(azimuth);
  sun.setFromSphericalCoords(1, phi, theta);
  sky.material.uniforms.sunPosition.value.copy(sun);
  if (sky.material.uniforms.time) sky.material.uniforms.time.value = time;
  dl.position.copy(sun).multiplyScalar(20);
  camera.position.x = Math.sin(time * 0.1) * 1.5;
  camera.lookAt(0, 0.6, -2);
  renderer.render(scene, camera);
});