Fireworks

What this code does

- Click to Launch: click anywhere on screen to launch fireworks at that location.
- Particle Burst: each firework explodes into 80+ colored particles with physics.
- Gravity Physics: particles fall under gravity with realistic trajectories.
- Color Variety: each firework uses random hue with slight per-particle variation.
- Auto Launch Mode: continuous random fireworks for automated light show.
- Additive Blending: particles glow and blend together for bright effects.

JavaScript (plain)

const scene = new THREE.Scene()
scene.background = new THREE.Color(0x000011)
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(0, 5, 25)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

document.querySelector('#app').appendChild(renderer.domElement)

let fireworks = []

function createFirework(x, y, z) {
  const particles = []
  const count = 80
  const color = new THREE.Color().setHSL(Math.random(), 1, 0.5)

  for (let i = 0; i < count; i++) {
    const particle = {
      position: new THREE.Vector3(x, y, z),
      velocity: new THREE.Vector3(
        (Math.random() - 0.5) * 0.3,
        (Math.random() - 0.5) * 0.3,
        (Math.random() - 0.5) * 0.3
      ),
      life: 1.0
    }
    particles.push(particle)
  }

  fireworks.push({ particles, color })
}

canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect()
  const x = ((event.clientX - rect.left) / rect.width) * 2 - 1
  const y = -((event.clientY - rect.top) / rect.height) * 2 + 1
  createFirework(x * 20, y * 15, 0)
})

function animate() {
  requestAnimationFrame(animate)
  // Update fireworks particles
  renderer.render(scene, camera)
}
animate()