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
      )
      // Keep the camera >=5deg above the horizon and out of the scene: a bare
      // ArcRotateCamera tilts under the ground and zooms through everything.
      camera.lowerBetaLimit = (20 * Math.PI) / 180
      camera.upperBetaLimit = (85 * Math.PI) / 180
      camera.lowerRadiusLimit = 4
      camera.upperRadiusLimit = 30
      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