threejs-postprocessinglisted
Install: claude install-skill CypherPoet/THREE-JS-APOD-Air-and-Space-Museum
# Three.js Post-Processing
## Quick Start
```javascript
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";
// Setup composer
const composer = new EffectComposer(renderer);
// Render scene
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// Add bloom
const bloomPass = new UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
1.5, // strength
0.4, // radius
0.85, // threshold
);
composer.addPass(bloomPass);
// Animation loop - use composer instead of renderer
function animate() {
requestAnimationFrame(animate);
composer.render(); // NOT renderer.render()
}
```
## EffectComposer Setup
```javascript
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
const composer = new EffectComposer(renderer);
// First pass: render scene
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// Add more passes...
composer.addPass(effectPass);
// Last pass should render to screen
effectPass.renderToScreen = true; // Default for last pass
// Handle resize
function onResize() {
const width = window.innerWidth;
const height = window.innerHeight;
camera.aspect = width / height;
ca