Three.js Demos A collection of Three.js Demos

Rain with Splashes

Fast falling raindrops with wind and fog; reset on ground contact.

What this code does

- PointsMaterial raindrops fall under constant speed with lateral wind.
- Ground plane creates a visual horizon; fog adds depth in the distance.
- GUI controls: fall speed, wind, and raindrop size.

JavaScript (plain)

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

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

// Raindrops as points
const count = 4000
const positions = new Float32Array(count * 3)
const velocities = new Float32Array(count * 2) // x,z wind; y fall derived
for (let i = 0; i < count; i++) {
  const i3 = i * 3
  positions[i3] = (Math.random() - 0.5) * 200
  positions[i3 + 1] = Math.random() * 100
  positions[i3 + 2] = (Math.random() - 0.5) * 200
  velocities[i * 2] = (Math.random() - 0.5) * 6
  velocities[i * 2 + 1] = (Math.random() - 0.5) * 6
}
const geo = new THREE.BufferGeometry()
geo.setAttribute('position', new THREE.BufferAttribute(positions, 3))
const mat = new THREE.PointsMaterial({ color: 0x88aaff, size: 2, sizeAttenuation: true, transparent: true })
const rain = new THREE.Points(geo, mat)
scene.add(rain)
← Back