Volumetric Light Beam

Installation

Architecture & Rendering

Volumetric Light Beam implements a performant approximation of atmospheric light scattering (Mie scattering):

1. Light Cone Shader: Instead of expensive raymarching, the light shaft is rendered as a double-sided cylinder geometry. The custom fragment shader calculates the rim-angle (Fresnel) and axial height falloff to create a soft, gradient-faded cone of light that blends additively (THREE.AdditiveBlending) with the scene.
2. Dynamic Target Tracking: A hidden dummy Object3D interpolates smoothly towards the 2D cursor coordinates projected into 3D space. The spotlight and volumetric cone continuously invoke lookAt(target) to follow the mouse effortlessly.
3. Suspended Dust Motes: Instanced THREE.Points float gently through the scene. Because the volumetric beam is rendered additively, particles appear brightly illuminated when floating inside the light shaft.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { VolumetricLightBeam } from "@/components/creative/volumetric-light-beam";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { VolumetricLightBeam } from "@/components/creative/volumetric-light-beam";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <VolumetricLightBeam
        beamIntensity{10}
        beamColor="example"
        coneAngle{10}
      />
    </div>
  );
}