Three.js Demos
Three.js Demos

Volumetric Spotlight Lab (r183 roadmap)

Dense spotlight beam demo combining real spotlight shadows with additive volumetric cone scattering and animated occluders for dynamic light shafts.

Key topics: three.js volumetric spotlight, fog beam, spotlight shadows, light shafts, volumetric lighting

What this code does

- Hybrid Volumetric Setup: uses a real `SpotLight` for shadows plus an additive cone mesh to approximate volumetric scattering.
- Shadow Interaction: moving blockers cast visible shadow patterns through the beam, improving depth perception.
- Fog Coupling: scene fog density and beam opacity are tuned together to control shaft readability.
- Penumbra + Angle Controls: spotlight shape parameters directly affect beam edge softness and cone footprint.
- Practical Pattern: useful for stage lights, searchlights, and dramatic interior lighting without heavy volumetric raymarching.

Related Demos

Continue Learning

Read the Three.js Documentation

JavaScript Implementation

ES6+ 
import * as THREE from 'three'

const spot = new THREE.SpotLight(0xc7ddff, 24, 48, Math.PI / 7, 0.45, 1.15)
spot.castShadow = true
scene.add(spot)

const beam = new THREE.Mesh(
  new THREE.ConeGeometry(2.0, 9.8, 56, 1, true),
  new THREE.MeshBasicMaterial({
    color: 0xc5dbff,
    transparent: true,
    opacity: 0.56,
    blending: THREE.AdditiveBlending,
    depthWrite: false,
    side: THREE.DoubleSide
  })
)
beam.position.copy(spot.position)
beam.lookAt(spot.target.position)
scene.add(beam)
← Back