I’m trying to apply a bloom filter to a simple 2d curve. I’ve installed the postprocessing package.
But I get _postprocessing.UnrealBloomPass is not a constructor
error on the following code.
import * as THREE from "three";
import { BloomEffect, EffectComposer, EffectPass, RenderPass, UnrealBloomPass } from "postprocessing";
let camera;
let composer, renderer, mixer, clock;
const params = {
exposure: 1,
bloomStrength: 1.5,
bloomThreshold: 0.3,
bloomRadius: 0.5
};
const container = document.getElementById( 'app' );
clock = new THREE.Clock();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ReinhardToneMapping;
container.appendChild( renderer.domElement );
const scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
camera.position.set( - 5, 2.5, - 3.5 );
scene.add( camera );
scene.add( new THREE.AmbientLight( 0x404040 ) );
const pointLight = new THREE.PointLight( 0xffffff, 1 );
camera.add( pointLight );
const curve = new THREE.CubicBezierCurve3(
new THREE.Vector3(-100, 0, 50),
new THREE.Vector3(-5, 15, -10),
new THREE.Vector3(20, 15, 20),
new THREE.Vector3(10, 0, -0)
);
const points = curve.getPoints(50);
//create a blue LineBasicMaterial
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const line = new THREE.Line( geometry, material );
scene.add( line );
const renderScene = new RenderPass( scene, camera );
const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;
composer = new EffectComposer( renderer );
composer.addPass( renderScene );
composer.addPass( bloomPass );
composer.render();
What am I doing wrong? Have I installed postprocessing incorrectly? I’d like to do it through npm/yarn ideally.