orb

1"use client"
2 
3import { useEffect, useMemo, useRef } from "react"
4import { useTexture } from "@react-three/drei"
5import { Canvas, useFrame, useThree } from "@react-three/fiber"
6import * as THREE from "three"
7 
8export type AgentState = null | "thinking" | "listening" | "talking"
9 
10type OrbProps = {
11  colors?: [string, string]
12  colorsRef?: React.RefObject<[string, string]>
13  resizeDebounce?: number
14  seed?: number
15  agentState?: AgentState
16  volumeMode?: "auto" | "manual"
17  manualInput?: number
18  manualOutput?: number
19  inputVolumeRef?: React.RefObject<number>
20  outputVolumeRef?: React.RefObject<number>
21  getInputVolume?: () => number
22  getOutputVolume?: () => number
23  className?: string
24}
25 
26export function Orb({
27  colors = ["#CADCFC", "#A0B9D1"],
28  colorsRef,
29  resizeDebounce = 100,
30  seed,
31  agentState = null,
32  volumeMode = "auto",
33  manualInput,
34  manualOutput,
35  inputVolumeRef,
36  outputVolumeRef,
37  getInputVolume,
38  getOutputVolume,
39  className,
40}: OrbProps) {
41  return (
42    <div className={className ?? "relative h-full w-full"}>
43      <Canvas
44        resize={{ debounce: resizeDebounce }}
45        gl={{
46          alpha: true,
47          antialias: true,
48          premultipliedAlpha: true,
49        }}
50      >
51        <Scene
52          colors={colors}
53          colorsRef={colorsRef}
54          seed={seed}
55          agentState={agentState}
56          volumeMode={volumeMode}
57          manualInput={manualInput}
58          manualOutput={manualOutput}
59          inputVolumeRef={inputVolumeRef}
60          outputVolumeRef={outputVolumeRef}
61          getInputVolume={getInputVolume}
62          getOutputVolume={getOutputVolume}
63        />
64      </Canvas>
65    </div>
66  )
67}
68 
69function Scene({
70  colors,
71  colorsRef,
72  seed,
73  agentState,
74  volumeMode,
75  manualInput,
76  manualOutput,
77  inputVolumeRef,
78  outputVolumeRef,
79  getInputVolume,
80  getOutputVolume,
81}: {
82  colors: [string, string]
83  colorsRef?: React.RefObject<[string, string]>
84  seed?: number
85  agentState: AgentState
86  volumeMode: "auto" | "manual"
87  manualInput?: number
88  manualOutput?: number
89  inputVolumeRef?: React.RefObject<number>
90  outputVolumeRef?: React.RefObject<number>
91  getInputVolume?: () => number
92  getOutputVolume?: () => number
93}) {
94  const { gl } = useThree()
95  const circleRef =
96    useRef<THREE.Mesh<THREE.CircleGeometry, THREE.ShaderMaterial>>(null)
97  const initialColorsRef = useRef<[string, string]>(colors)
98  const targetColor1Ref = useRef(new THREE.Color(colors[0]))
99// … truncated