ParticleBeast × three.js

Effects are regular Object3Ds: the thruster is parented to the flying ship, the campfire and portal sit in the scene, and clicks raycast explosions onto the ground.

— fps · — particles

Using the addon

Import particle-beast/three (or particle-beast-three.js from the downloads page) alongside your three.js app. The engine renders straight into your renderer's WebGL2 context and depth buffer, restoring all GL state it touches.

import { ParticleBeastThree } from 'particle-beast/three';

const particles = new ParticleBeastThree(renderer);          // THREE.WebGLRenderer
const explosion = await particles.loadEffect('presets/explosion.json');

// effects are Object3Ds — parent them to anything:
const fx = particles.spawn(explosion, { parent: ship, tint: '#ff8833' });
fx.position.set(0, 0, -2);

// in your render loop:
particles.update(clock.getDelta());
renderer.render(scene, camera);
particles.render(camera);                                    // after the scene