Depth of field

import * as THREE from 'three';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a14);
const camera = new THREE.PerspectiveCamera(45, 1, 0.5, 30);
camera.position.set(0, 0.3, 1.6);
camera.lookAt(0, 0, -6);

scene.add(new THREE.AmbientLight(0x556080, 1.2));
const dLight = new THREE.DirectionalLight(0xffffff, 1.1);
dLight.position.set(3, 5, 2);
scene.add(dLight);

const meshes = [];
const N = 6;
for (let i = 0; i < N; i++) {
  const mesh = new THREE.Mesh(
    new THREE.IcosahedronGeometry(0.5, 0),
    new THREE.MeshStandardMaterial({ color: new THREE.Color().setHSL(i / N, 0.65, 0.6), roughness: 0.4 })
  );
  mesh.position.set((i % 2 === 0 ? -1 : 1) * 0.6, 0, -i * 1.7 - 1);
  scene.add(mesh);
  meshes.push(mesh);
}

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
const bokeh = new BokehPass(scene, camera, { focus: 3, aperture: 0.008, maxblur: 0.01 });
composer.addPass(bokeh);
composer.addPass(new OutputPass());

function resize() {
  renderer.setSize(innerWidth, innerHeight);
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  composer.setSize(innerWidth, innerHeight);
}
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  const time = t * 0.001;
  bokeh.uniforms.focus.value = 5.5 + Math.sin(time * 0.6) * 4.0;
  meshes.forEach((m, i) => { m.rotation.y = time * 0.6 + i; m.rotation.x = time * 0.4; });
  composer.render();
});