'use client'; /** * Brain Regions * Volumetric cloud-like regions representing different memory types * - Short-term (front/orange): Active working memory * - Episodic (middle/purple): Session and event memories * - Long-term (back/blue): Consolidated stable memories */ import { useRef, useMemo } from 'react'; import { useFrame } from '@react-three/fiber'; import { Html } from '@react-three/drei'; import * as THREE from 'three'; interface MemoryRegionProps { type: 'short_term' | 'episodic' | 'long_term'; position: [number, number, number]; color: string; memoryCount?: number; label: string; showLabel?: boolean; } /** * Single volumetric memory region * Uses multiple overlapping transparent spheres for cloud effect */ function MemoryRegion({ type, position, color, memoryCount = 0, label, showLabel = true, }: MemoryRegionProps) { const groupRef = useRef(null); const innerRef = useRef(null); // Scale based on memory count (more memories = larger region) const scale = useMemo(() => { const baseScale = 1; const countScale = Math.min(memoryCount / 30, 0.5); // Max 50% increase return baseScale + countScale; }, [memoryCount]); // Create multiple sphere layers for volumetric effect const layers = useMemo(() => { return [ { radius: 1.8, opacity: 0.03, offset: [0, 0, 0] }, { radius: 1.5, opacity: 0.04, offset: [0.2, 0.1, 0.1] }, { radius: 1.2, opacity: 0.05, offset: [-0.1, 0.15, -0.1] }, { radius: 0.9, opacity: 0.06, offset: [0.1, -0.1, 0.15] }, { radius: 0.6, opacity: 0.08, offset: [0, 0.05, 0] }, ]; }, []); // Animation useFrame((state) => { if (!groupRef.current) return; const time = state.clock.elapsedTime; const typeOffset = type === 'short_term' ? 0 : type === 'episodic' ? 1 : 2; // Gentle floating motion groupRef.current.position.y = position[1] + Math.sin(time * 0.3 + typeOffset) * 0.15; // Subtle rotation groupRef.current.rotation.y = Math.sin(time * 0.2 + typeOffset) * 0.1; // Inner core pulsing if (innerRef.current) { const pulse = Math.sin(time * 1.5 + typeOffset * 2) * 0.15 + 0.85; innerRef.current.scale.setScalar(pulse); (innerRef.current.material as THREE.MeshBasicMaterial).opacity = 0.15 + pulse * 0.1; } }); return ( {/* Volumetric cloud layers */} {layers.map((layer, i) => ( ))} {/* Bright inner core */} {/* Region label */} {showLabel && (

{label} {memoryCount > 0 && ( ({memoryCount}) )}

)} ); } /** * Energy field connecting regions */ function EnergyField() { const meshRef = useRef(null); useFrame((state) => { if (!meshRef.current) return; const time = state.clock.elapsedTime; // Slow rotation meshRef.current.rotation.y = time * 0.05; meshRef.current.rotation.x = Math.sin(time * 0.1) * 0.1; // Pulsing opacity (meshRef.current.material as THREE.MeshBasicMaterial).opacity = 0.02 + Math.sin(time * 0.5) * 0.01; }); return ( ); } /** * Orbital ring around the brain */ function OrbitalRing({ radius = 4.5, color = '#4488ff' }: { radius?: number; color?: string }) { const ringRef = useRef(null); useFrame((state) => { if (!ringRef.current) return; ringRef.current.rotation.z = state.clock.elapsedTime * 0.1; }); return ( ); } interface BrainRegionsProps { shortTermCount?: number; episodicCount?: number; longTermCount?: number; showLabels?: boolean; } /** * All brain regions combined */ export function BrainRegions({ shortTermCount = 0, episodicCount = 0, longTermCount = 0, showLabels = false, }: BrainRegionsProps) { return ( {/* Short-term memory region (front) */} {/* Episodic memory region (middle) */} {/* Long-term memory region (back) */} {/* Energy field connecting regions */} {/* Orbital rings for sci-fi effect */} ); }