포그

import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const bg = 0x0c0e16;
scene.background = new THREE.Color(bg);
scene.fog = new THREE.FogExp2(bg, 0.085);
const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 100);
camera.position.set(0, 1.1, 0);

const dLight = new THREE.DirectionalLight(0xffffff, 1.4);
dLight.position.set(2, 5, -3);
scene.add(dLight);
scene.add(new THREE.HemisphereLight(0xaeccff, 0x0c0e16, 2.0));

const group = new THREE.Group();
const COLS = 14;
for (let i = 0; i < COLS; i++) {
  const side = i % 2 === 0 ? -1 : 1;
  const geo = new THREE.CylinderGeometry(0.18, 0.22, 3.4, 8);
  const mat = new THREE.MeshStandardMaterial({ color: 0x5b74c9, roughness: 0.55 });
  const pillar = new THREE.Mesh(geo, mat);
  pillar.position.set(side * 1.6, 0.5, -(Math.floor(i / 2)) * 2.6);
  group.add(pillar);
}
scene.add(group);

function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
const totalZ = 2.6 * Math.ceil(COLS / 2);
renderer.setAnimationLoop((t) => {
  const z = (t * 0.0009) % totalZ;
  camera.position.z = -z + 6;
  renderer.render(scene, camera);
});