photon-beam

1"use client"
2 
3import { useEffect, useRef } from "react"
4import * as THREE from "three"
5import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"
6import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js"
7import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js"
8 
9interface Signal {
10  mesh: THREE.Line
11  laneIndex: number
12  speed: number
13  progress: number
14  history: THREE.Vector3[]
15  assignedColor: THREE.Color
16}
17 
18interface Params {
19  colorBg: string
20  colorLine: string
21  colorSignal: string
22  useColor2: boolean
23  colorSignal2: string
24  useColor3: boolean
25  colorSignal3: string
26  lineCount: number
27  globalRotation: number
28  positionX: number
29  positionY: number
30  spreadHeight: number
31  spreadDepth: number
32  curveLength: number
33  straightLength: number
34  curvePower: number
35  waveSpeed: number
36  waveHeight: number
37  lineOpacity: number
38  signalCount: number
39  speedGlobal: number
40  trailLength: number
41  bloomStrength: number
42  bloomRadius: number
43}
44 
45interface PhotonBeamProps {
46  colorBg?: string
47  colorLine?: string
48  colorSignal?: string
49  useColor2?: boolean
50  colorSignal2?: string
51  useColor3?: boolean
52  colorSignal3?: string
53  lineCount?: number
54  spreadHeight?: number
55  spreadDepth?: number
56  curveLength?: number
57  straightLength?: number
58  curvePower?: number
59  waveSpeed?: number
60  waveHeight?: number
61  lineOpacity?: number
62  signalCount?: number
63  speedGlobal?: number
64  trailLength?: number
65  bloomStrength?: number
66  bloomRadius?: number
67}
68 
69const CONSTANTS = {
70  segmentCount: 150,
71}
72 
73export default function PhotonBeam(props: PhotonBeamProps = {}) {
74  const containerRef = useRef<HTMLDivElement>(null)
75 
76  useEffect(() => {
77    const container = containerRef.current
78    if (!container) return
79 
80    let frameId: number
81    let cancelled = false
82    let renderer: THREE.WebGLRenderer | null = null
83    let composer: InstanceType<typeof EffectComposer> | null = null
84    let handleResize: (() => void) | null = null
85    let backgroundLines: THREE.Line[] = []
86    let signals: Signal[] = []
87 
88    const init = (): void => {
89      if (cancelled) return
90 
91      const width = container.clientWidth
92      const height = container.clientHeight
93      if (width === 0 || height === 0) {
94        frameId = requestAnimationFrame(init)
95        return
96      }
97 
98      // --- CONFIGURATION ---
99      const params: Params = {
100        colorBg: props.colorBg ?? "#080808",
101// … truncated