View your Three.js projects like it's the 80s with this CRT TV post-processing effect for Three.js.
The perfect companion for our colour and resolution reducing RetroPass!
npm install @mesmotronic/three-crtpassRequires three as a peer dependency.
Here’s an example of how to use CrtPass in your Three.js project:
import * as THREE from "three";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { CrtPass } from "@mesmotronic/three-crtpass";
// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Time
const clock = new THREE.Clock();
// Composer setup
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// Add CrtPass
const crtPass = new CrtPass();
composer.addPass(crtPass);
// Render loop
renderer.setAnimationLoop(() => {
crtPass.update(clock.getElapsedTime());
composer.render();
});