Three.js Demos A collection of Three.js Demos

Snowfall

Realistic snow particle system with wind and swaying motion.

What this code does

- Particle System: 2000+ individual snowflakes using BufferGeometry for performance.
- Physics Simulation: gravity, wind drift, and swaying motion for realism.
- Particle Recycling: flakes reset to top when they hit ground for infinite snowfall.
- Custom Texture: canvas-generated snowflake sprite with soft alpha gradient.
- Atmospheric Effects: fog and cool lighting create winter atmosphere.
- Interactive Controls: adjust wind strength, fall speed, and sway amount.

JavaScript (plain)

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