블룸

import * as THREE from 'three';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.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(0x030308);
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 0.5, 6.5);
const core = new THREE.Mesh(new THREE.IcosahedronGeometry(0.9, 1), new THREE.MeshBasicMaterial({ color: 0xffffff }));
scene.add(core);
const ring1 = new THREE.Mesh(new THREE.TorusGeometry(1.9, 0.045, 16, 100), new THREE.MeshBasicMaterial({ color: 0xff3d7a }));
ring1.rotation.x = Math.PI / 2.3;
scene.add(ring1);
const ring2 = new THREE.Mesh(new THREE.TorusGeometry(2.4, 0.03, 16, 100), new THREE.MeshBasicMaterial({ color: 0x3dd6ff }));
ring2.rotation.x = Math.PI / 2.7;
ring2.rotation.y = 0.6;
scene.add(ring2);
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
const bloom = new UnrealBloomPass(new THREE.Vector2(innerWidth, innerHeight), 1.35, 0.75, 0.15);
composer.addPass(bloom);
composer.addPass(new OutputPass());
function resize() {
  renderer.setSize(innerWidth, innerHeight);
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  composer.setSize(innerWidth, innerHeight);
  composer.setPixelRatio(Math.min(devicePixelRatio, 2));
}
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  core.rotation.y = t * 0.0006;
  ring1.rotation.z = t * 0.0004;
  ring2.rotation.z = -t * 0.0003;
  composer.render();
});