ThreeJS Fixed UnrealBloomPass for Transparent Backgrounds

Visit the example here

This example illustrates a fix to UnrealBloomPass in ThreeJS that won't allow transparent backgrounds to work.

The issue is described here: mrdoob/three.js#14104 (comment)

I made this because I wanted to experiment with ThreeJS. ThreeJS has a massive API and TypeScript is pretty critical for a nice auto-complete experience in an IDE like VSCode. I also wanted live-reloading for fast iteration.

Getting Started:

1. Clone this repo
2. yarn install or npm install
3. yarn dev or npm run dev
4. Open up your browser to localhost:9000

Just get started with editing your typescript code in: ./src/index.ts

Commentary

• This uses ts-loader, webpack
• See webpack.config.js for configuration

Ending thoughts

I love threejs and 3D in general! Follow me on twitter @sudomax

I'm one of the CoFounders of Ditto, which an SDK that allows apps to sync even without an internet connection. You can follow us more on @dittolive.