CrtPass for Three.js

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!

Installation

npm install @mesmotronic/three-crtpass

Requires three as a peer dependency.

Usage

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();
});

Screenshots