Three.js Demos
Three.js Demos

Three.js Snowfall Particle System Demo

Real-time snowfall particle system in Three.js with wind drift, vertical fall velocity, sprite-based flakes, and continuous particle recycling for stable performance.

Key topics: three.js, particles, snow, weather, wind, buffer geometry

What this code does

- Particle Buffer Layout: 2000+ flakes are stored in typed arrays and rendered in one `THREE.Points` draw call.
- Motion Model: each flake uses gravity-like fall, wind drift, and lateral sway offsets for natural variation.
- Infinite Looping: particles respawn at altitude when they hit the ground plane to keep density consistent.
- Sprite Appearance: a canvas-generated alpha texture creates soft round flakes without loading external assets.
- Depth Atmosphere: fog and cool-toned lighting increase depth perception and winter ambience.
- Runtime Controls: tweak wind strength, snowfall speed, sway amplitude, and particle size to test visual ranges.
- Optimization Note: this pattern scales well for weather effects in games, dashboards, and background environments.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x001122)
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(0, 5, 20)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)
document.querySelector('#app').appendChild(renderer.domElement)

// Create snow particles
const snowGeometry = new THREE.BufferGeometry()
const snowCount = 2000
const positions = new Float32Array(snowCount * 3)
const velocities = new Float32Array(snowCount * 3)

for (let i = 0; i < snowCount * 3; i += 3) {
  positions[i] = (Math.random() - 0.5) * 200
  positions[i + 1] = Math.random() * 100
  positions[i + 2] = (Math.random() - 0.5) * 200
  velocities[i + 1] = -Math.random() * 2 - 0.5
}

snowGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
const snowMaterial = new THREE.PointsMaterial({
  color: 0xffffff,
  size: 2,
  transparent: true,
  opacity: 0.8
})
const snow = new THREE.Points(snowGeometry, snowMaterial)
scene.add(snow)

function animate() {
  requestAnimationFrame(animate)
  // Update snow positions
  renderer.render(scene, camera)
}
animate()
← Back