b3d-particles

Declarative particle effect component wrapping Babylon.js ParticleSystem. Use it for fire, smoke, explosions, thrusters, weapon trails, and more.

Supports point, box, sphere, and cone emitter shapes. Colors are specified as CSS hex strings. Call burst(count) for one-shot effects like explosions.

Demo

import { b3d, b3dParticles, b3dLight, b3dSkybox, b3dGround, label3d, slider3d, button3d } from 'tosijs-3d'
import { tosi } from 'tosijs'

const { demo } = tosi({ demo: { emitRate: 80 } })

const explosion = b3dParticles({
  x: 3, y: 0.5, z: 0,
  capacity: 300,
  emitRate: 0,
  autoStart: false,
  minLifeTime: 0.3,
  maxLifeTime: 1.0,
  minSize: 0.1,
  maxSize: 0.6,
  minEmitPower: 4,
  maxEmitPower: 10,
  useSceneGravity: true,
  color1: '#ffffff',
  color2: '#ff8800',
  colorDead: '#330000',
  blendMode: 'additive',
  emitterShape: 'sphere',
  emitterRadius: 0.2,
})

const scene = b3d(
  {
    scenePanel: () => [
      label3d({ text: 'Particles' }),
      slider3d({ label: 'emit rate', value: demo.emitRate, min: 0, max: 200, step: 5 }),
      button3d({ label: 'Burst', onClick() { explosion.burst(150) } }),
    ],
    sceneCreated(el, BABYLON) {
      const camera = new BABYLON.ArcRotateCamera(
        'cam', -Math.PI / 2, Math.PI / 3, 12,
        new BABYLON.Vector3(0, 1, 0), el.scene
      )
      camera.attachControl(el.querySelector('canvas'), true)
      el.setActiveCamera(camera)
    },
  },
  b3dLight({ y: 1, intensity: 0.5 }),
  b3dSkybox({ timeOfDay: 12 }),
  b3dGround({ width: 20, height: 20 }),
  // Continuous fire
  b3dParticles({
    x: -3, y: 0.2, z: 0,
    autoStart: true,
    emitRate: demo.emitRate,
    minLifeTime: 0.2,
    maxLifeTime: 0.8,
    minSize: 0.05,
    maxSize: 0.3,
    minEmitPower: 1,
    maxEmitPower: 3,
    gravityY: 3,
    color1: '#ffff00',
    color2: '#ff3300',
    colorDead: '#110000',
    blendMode: 'additive',
    emitterShape: 'cone',
    emitterRadius: 0.15,
  }),
  // Smoke
  b3dParticles({
    x: -3, y: 1.2, z: 0,
    autoStart: true,
    emitRate: 20,
    minLifeTime: 1,
    maxLifeTime: 3,
    minSize: 0.2,
    maxSize: 0.8,
    minEmitPower: 0.5,
    maxEmitPower: 1.5,
    gravityY: 1,
    color1: '#444444',
    color2: '#666666',
    colorDead: '#22222200',
    emitterShape: 'sphere',
    emitterRadius: 0.2,
  }),
  // Explosion (burst on click)
  explosion,
)
preview.append(scene)

Attributes