Remove Unwanted Files and restrcit the animation view in Mobile screen
This commit is contained in:
@@ -1,192 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
||||
import { MeshDistortMaterial, Sphere, Preload, Float } from "@react-three/drei";
|
||||
import * as THREE from "three";
|
||||
|
||||
// --- CONFIGURATION ---
|
||||
const NEURON_COUNT = 18; // Fewer, but more detailed neurons
|
||||
const CONNECTION_DISTANCE = 5.5; // Distance to form a synapse
|
||||
const PULSE_SPEED = 2.5; // Speed of the electric signal
|
||||
|
||||
// 1. SINGLE NEURON CELL (The Soma)
|
||||
// We use a distorted sphere to make it look like organic tissue
|
||||
function NeuronCell({ position }: { position: [number, number, number] }) {
|
||||
const meshRef = useRef<THREE.Mesh>(null!);
|
||||
const [hovered, setHover] = useState(false);
|
||||
|
||||
// Randomize size slightly for variety
|
||||
const scale = useMemo(() => 0.6 + Math.random() * 0.4, []);
|
||||
|
||||
useFrame((state) => {
|
||||
// Gentle heartbeat pulsation
|
||||
const t = state.clock.getElapsedTime();
|
||||
const pulse = Math.sin(t * 3) * 0.05 + 1;
|
||||
if (meshRef.current) {
|
||||
meshRef.current.scale.set(scale * pulse, scale * pulse, scale * pulse);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Float speed={2} rotationIntensity={0.5} floatIntensity={0.5}>
|
||||
<Sphere
|
||||
ref={meshRef}
|
||||
args={[1, 32, 32]} // Geometry args
|
||||
position={position}
|
||||
onPointerOver={() => setHover(true)}
|
||||
onPointerOut={() => setHover(false)}
|
||||
>
|
||||
<MeshDistortMaterial
|
||||
color={hovered ? "#06b6d4" : "#22d3ee"} // Cyan 500 to 400
|
||||
emissive={hovered ? "#0891b2" : "#0e7490"}
|
||||
emissiveIntensity={0.6}
|
||||
roughness={0.2}
|
||||
metalness={0.1}
|
||||
distort={0.4} // The "wobble" amount (0-1)
|
||||
speed={2} // Speed of the wobble
|
||||
/>
|
||||
<pointLight distance={3} intensity={2} color="#22d3ee" />
|
||||
</Sphere>
|
||||
</Float>
|
||||
);
|
||||
}
|
||||
|
||||
// 2. SYNAPSE (The Connection & The Impulse)
|
||||
// Draws a curved organic line and a traveling light pulse
|
||||
function Synapse({ start, end }: { start: THREE.Vector3; end: THREE.Vector3 }) {
|
||||
const curve = useMemo(() => {
|
||||
// Create a quadratic bezier curve for a natural "tendon" look
|
||||
// Control point is midway but offset randomly to create the curve
|
||||
const mid = new THREE.Vector3().lerpVectors(start, end, 0.5);
|
||||
mid.x += (Math.random() - 0.5) * 2;
|
||||
mid.y += (Math.random() - 0.5) * 2;
|
||||
mid.z += (Math.random() - 0.5) * 2;
|
||||
return new THREE.QuadraticBezierCurve3(start, mid, end);
|
||||
}, [start, end]);
|
||||
|
||||
// Create points for the line geometry
|
||||
const points = useMemo(() => curve.getPoints(20), [curve]);
|
||||
|
||||
// The traveling impulse ref
|
||||
const impulseRef = useRef<THREE.Mesh>(null!);
|
||||
|
||||
useFrame((state) => {
|
||||
// Move the impulse along the curve
|
||||
const t = (state.clock.getElapsedTime() * PULSE_SPEED) % 1; // 0 to 1 loop
|
||||
if (impulseRef.current) {
|
||||
const pos = curve.getPointAt(t);
|
||||
impulseRef.current.position.copy(pos);
|
||||
|
||||
// Scale impulse based on position (fade in/out at ends)
|
||||
const scale = Math.sin(t * Math.PI);
|
||||
impulseRef.current.scale.setScalar(scale * 0.15);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<group>
|
||||
{/* The Axon (Line) */}
|
||||
<line>
|
||||
<bufferGeometry>
|
||||
<bufferAttribute
|
||||
attach="attributes-position"
|
||||
count={points.length}
|
||||
array={new Float32Array(points.flatMap((p) => [p.x, p.y, p.z]))}
|
||||
itemSize={3}
|
||||
/>
|
||||
</bufferGeometry>
|
||||
<lineBasicMaterial
|
||||
color="#155e75" // Dark Cyan
|
||||
transparent
|
||||
opacity={0.3}
|
||||
linewidth={1}
|
||||
/>
|
||||
</line>
|
||||
|
||||
{/* The Electric Impulse (Glowing Dot) */}
|
||||
<mesh ref={impulseRef}>
|
||||
<sphereGeometry args={[1, 8, 8]} />
|
||||
<meshBasicMaterial color="#ecfeff" toneMapped={false} />
|
||||
<pointLight distance={2} intensity={2} color="#22d3ee" decay={2} />
|
||||
</mesh>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
// 3. MAIN SCENE CONTROLLER
|
||||
function NeuralNetworkScene() {
|
||||
const { viewport } = useThree();
|
||||
const mouse = useRef(new THREE.Vector2());
|
||||
|
||||
// Generate Neurons
|
||||
const neurons = useMemo(() => {
|
||||
const temp = [];
|
||||
for (let i = 0; i < NEURON_COUNT; i++) {
|
||||
temp.push({
|
||||
position: new THREE.Vector3(
|
||||
(Math.random() - 0.5) * 20,
|
||||
(Math.random() - 0.5) * 20,
|
||||
(Math.random() - 0.5) * 10
|
||||
),
|
||||
id: i,
|
||||
});
|
||||
}
|
||||
return temp;
|
||||
}, []);
|
||||
|
||||
// Generate Connections (Proximity based)
|
||||
const connections = useMemo(() => {
|
||||
const conns = [];
|
||||
for (let i = 0; i < neurons.length; i++) {
|
||||
for (let j = i + 1; j < neurons.length; j++) {
|
||||
const dist = neurons[i].position.distanceTo(neurons[j].position);
|
||||
if (dist < CONNECTION_DISTANCE) {
|
||||
conns.push({ start: neurons[i].position, end: neurons[j].position, key: `${i}-${j}` });
|
||||
}
|
||||
}
|
||||
}
|
||||
return conns;
|
||||
}, [neurons]);
|
||||
|
||||
useFrame((state) => {
|
||||
// Soft camera movement based on mouse
|
||||
const x = (state.pointer.x * viewport.width) / 10;
|
||||
const y = (state.pointer.y * viewport.height) / 10;
|
||||
|
||||
state.camera.position.x = THREE.MathUtils.lerp(state.camera.position.x, x, 0.05);
|
||||
state.camera.position.y = THREE.MathUtils.lerp(state.camera.position.y, y, 0.05);
|
||||
state.camera.lookAt(0, 0, 0);
|
||||
});
|
||||
|
||||
return (
|
||||
<group>
|
||||
{/* Draw Neurons */}
|
||||
{neurons.map((n) => (
|
||||
<NeuronCell key={n.id} position={[n.position.x, n.position.y, n.position.z]} />
|
||||
))}
|
||||
|
||||
{/* Draw Synapses */}
|
||||
{connections.map((c) => (
|
||||
<Synapse key={c.key} start={c.start} end={c.end} />
|
||||
))}
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BioNeurons() {
|
||||
return (
|
||||
<div className="absolute inset-0 z-0 h-full w-full">
|
||||
<Canvas
|
||||
camera={{ position: [0, 0, 14], fov: 45 }}
|
||||
gl={{ alpha: true, antialias: true }}
|
||||
dpr={[1, 2]}
|
||||
>
|
||||
<ambientLight intensity={0.2} />
|
||||
<pointLight position={[10, 10, 10]} intensity={1} color="#06b6d4" />
|
||||
<NeuralNetworkScene />
|
||||
<Preload all />
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,183 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useRef } from "react";
|
||||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
||||
import * as THREE from "three";
|
||||
import { Preload } from "@react-three/drei";
|
||||
|
||||
// CONFIGURATION
|
||||
const PARTICLE_COUNT = 80;
|
||||
const CONNECT_DISTANCE = 3.5;
|
||||
const MOUSE_INFLUENCE_RADIUS = 6; // Radius of the mouse wave
|
||||
const WAVE_AMPLITUDE = 1.5; // How high the wave ripples (Z-axis)
|
||||
|
||||
function NeuralMesh() {
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
const particlesRef = useRef<THREE.Points>(null);
|
||||
const linesRef = useRef<THREE.LineSegments>(null);
|
||||
|
||||
// Get viewport to map mouse coordinates correctly to world space
|
||||
const { viewport } = useThree();
|
||||
|
||||
// 1. Generate Initial Random Positions & Velocities
|
||||
// We store "original positions" to calculate the wave offset from
|
||||
const [positions, velocities, originalPositions] = useMemo(() => {
|
||||
const pos = new Float32Array(PARTICLE_COUNT * 3);
|
||||
const origPos = new Float32Array(PARTICLE_COUNT * 3);
|
||||
const vel = [];
|
||||
|
||||
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
||||
const x = (Math.random() - 0.5) * 18;
|
||||
const y = (Math.random() - 0.5) * 18;
|
||||
const z = (Math.random() - 0.5) * 10;
|
||||
|
||||
pos[i * 3] = x;
|
||||
pos[i * 3 + 1] = y;
|
||||
pos[i * 3 + 2] = z;
|
||||
|
||||
origPos[i * 3] = x;
|
||||
origPos[i * 3 + 1] = y;
|
||||
origPos[i * 3 + 2] = z;
|
||||
|
||||
vel.push({
|
||||
x: (Math.random() - 0.5) * 0.05, // Slower natural drift
|
||||
y: (Math.random() - 0.5) * 0.05,
|
||||
z: (Math.random() - 0.5) * 0.05,
|
||||
});
|
||||
}
|
||||
return [pos, vel, origPos];
|
||||
}, []);
|
||||
|
||||
useFrame((state, delta) => {
|
||||
// 2. Map Mouse to World Coordinates
|
||||
// state.pointer is normalized (-1 to 1). Convert to world units using viewport.
|
||||
const mouseX = (state.pointer.x * viewport.width) / 2;
|
||||
const mouseY = (state.pointer.y * viewport.height) / 2;
|
||||
|
||||
if (particlesRef.current && linesRef.current) {
|
||||
const positionsAttr = particlesRef.current.geometry.attributes.position;
|
||||
const currentPositions = positionsAttr.array as Float32Array;
|
||||
|
||||
// 3. Update Particles
|
||||
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
||||
const i3 = i * 3;
|
||||
|
||||
// A. Natural Drift (Gravity)
|
||||
// We use the "original" position as an anchor to prevent them from flying away too far
|
||||
// but we add the velocity to keep them moving organically.
|
||||
originalPositions[i3] += velocities[i].x * delta * 2;
|
||||
originalPositions[i3 + 1] += velocities[i].y * delta * 2;
|
||||
|
||||
// Bounce logic for the anchor points
|
||||
if (Math.abs(originalPositions[i3]) > 10) velocities[i].x *= -1;
|
||||
if (Math.abs(originalPositions[i3 + 1]) > 10) velocities[i].y *= -1;
|
||||
|
||||
// B. Mouse Interaction (The Wave)
|
||||
// Calculate distance from particle to mouse
|
||||
const dx = mouseX - originalPositions[i3];
|
||||
const dy = mouseY - originalPositions[i3 + 1];
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
// Apply Wave Effect
|
||||
// If the mouse is close, we disturb the position
|
||||
let xOffset = 0;
|
||||
let yOffset = 0;
|
||||
let zOffset = 0;
|
||||
|
||||
if (dist < MOUSE_INFLUENCE_RADIUS) {
|
||||
// 1. Repulsion force (XY Plane) - pushes them slightly aside
|
||||
const force = (MOUSE_INFLUENCE_RADIUS - dist) / MOUSE_INFLUENCE_RADIUS;
|
||||
const angle = Math.atan2(dy, dx);
|
||||
|
||||
xOffset = -Math.cos(angle) * force * 2; // Push away X
|
||||
yOffset = -Math.sin(angle) * force * 2; // Push away Y
|
||||
|
||||
// 2. Wave Ripple (Z Plane) - Sine wave based on distance and time
|
||||
// This creates the "water ripple" effect in 3D depth
|
||||
zOffset = Math.sin(dist * 1.5 - state.clock.elapsedTime * 3) * WAVE_AMPLITUDE * force;
|
||||
}
|
||||
|
||||
// Apply calculated positions
|
||||
currentPositions[i3] = originalPositions[i3] + xOffset;
|
||||
currentPositions[i3 + 1] = originalPositions[i3 + 1] + yOffset;
|
||||
currentPositions[i3 + 2] = originalPositions[i3 + 2] + zOffset;
|
||||
}
|
||||
positionsAttr.needsUpdate = true;
|
||||
|
||||
// 4. Update Connections (Plexus)
|
||||
// Re-calculate lines based on the NEW modified positions
|
||||
const linePositions: number[] = [];
|
||||
|
||||
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
||||
for (let j = i + 1; j < PARTICLE_COUNT; j++) {
|
||||
const x1 = currentPositions[i * 3];
|
||||
const y1 = currentPositions[i * 3 + 1];
|
||||
const z1 = currentPositions[i * 3 + 2];
|
||||
|
||||
const x2 = currentPositions[j * 3];
|
||||
const y2 = currentPositions[j * 3 + 1];
|
||||
const z2 = currentPositions[j * 3 + 2];
|
||||
|
||||
const dist = Math.sqrt(
|
||||
Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) + Math.pow(z2 - z1, 2)
|
||||
);
|
||||
|
||||
if (dist < CONNECT_DISTANCE) {
|
||||
linePositions.push(x1, y1, z1, x2, y2, z2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
linesRef.current.geometry.setAttribute(
|
||||
"position",
|
||||
new THREE.Float32BufferAttribute(linePositions, 3)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<group ref={groupRef}>
|
||||
<points ref={particlesRef}>
|
||||
<bufferGeometry>
|
||||
<bufferAttribute
|
||||
attach="attributes-position"
|
||||
count={PARTICLE_COUNT}
|
||||
array={positions}
|
||||
itemSize={3}
|
||||
/>
|
||||
</bufferGeometry>
|
||||
<pointsMaterial
|
||||
size={0.15}
|
||||
color="#22d3ee" // Cyan
|
||||
sizeAttenuation={true}
|
||||
transparent
|
||||
opacity={0.8}
|
||||
/>
|
||||
</points>
|
||||
|
||||
<lineSegments ref={linesRef}>
|
||||
<bufferGeometry />
|
||||
<lineBasicMaterial
|
||||
color="#0891b2" // Cyan-600
|
||||
transparent
|
||||
opacity={0.15}
|
||||
/>
|
||||
</lineSegments>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NeuronsGravity() {
|
||||
return (
|
||||
<div className="absolute inset-0 z-0 h-full w-full">
|
||||
<Canvas
|
||||
camera={{ position: [0, 0, 12], fov: 50 }}
|
||||
gl={{ alpha: true, antialias: true }}
|
||||
dpr={[1, 2]}
|
||||
>
|
||||
<NeuralMesh />
|
||||
<Preload all />
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,259 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useRef } from "react";
|
||||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
||||
import { MeshDistortMaterial, Sphere, Preload, Float } from "@react-three/drei";
|
||||
import { EffectComposer, Bloom, Vignette } from "@react-three/postprocessing";
|
||||
import * as THREE from "three";
|
||||
|
||||
// --- CONFIGURATION ---
|
||||
const NEURON_COUNT = 15; // Keep low for high-quality geometry
|
||||
const CONNECTION_DISTANCE = 6.5;
|
||||
const PULSE_SPEED = 1.8;
|
||||
|
||||
// 1. REALISTIC CELL (Soma + Nucleus)
|
||||
function NeuronCell({ position }: { position: [number, number, number] }) {
|
||||
const membraneRef = useRef<THREE.Mesh>(null!);
|
||||
const nucleusRef = useRef<THREE.Mesh>(null!);
|
||||
|
||||
// Randomize biology
|
||||
const size = useMemo(() => 0.5 + Math.random() * 0.3, []);
|
||||
|
||||
useFrame((state) => {
|
||||
const t = state.clock.getElapsedTime();
|
||||
|
||||
// Biological breathing/pulsing
|
||||
if (membraneRef.current) {
|
||||
const scale = size + Math.sin(t * 2 + position[0]) * 0.05;
|
||||
membraneRef.current.scale.setScalar(scale);
|
||||
}
|
||||
|
||||
// Nucleus gentle pulse (faster)
|
||||
if (nucleusRef.current) {
|
||||
const nScale = (size * 0.4) + Math.sin(t * 4) * 0.02;
|
||||
nucleusRef.current.scale.setScalar(nScale);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Float speed={1.5} rotationIntensity={0.6} floatIntensity={0.8}>
|
||||
<group position={position}>
|
||||
|
||||
{/* A. The Membrane (Outer Shell) */}
|
||||
<Sphere ref={membraneRef} args={[1, 64, 64]}>
|
||||
<MeshDistortMaterial
|
||||
color="#083344" // Deep blue-black (organic tissue)
|
||||
emissive="#155e75" // Cyan glow from within
|
||||
emissiveIntensity={0.2}
|
||||
roughness={0.1}
|
||||
metalness={0.8}
|
||||
distort={0.5} // High distortion for "blobby" look
|
||||
speed={2}
|
||||
transparent
|
||||
opacity={0.7}
|
||||
/>
|
||||
</Sphere>
|
||||
|
||||
{/* B. The Nucleus (Inner Core) */}
|
||||
<Sphere ref={nucleusRef} args={[1, 32, 32]}>
|
||||
<meshStandardMaterial
|
||||
color="#a5f3fc" // Bright Cyan
|
||||
emissive="#22d3ee" // Strong Glow
|
||||
emissiveIntensity={2} // Push this high for Bloom to pick it up
|
||||
toneMapped={false}
|
||||
/>
|
||||
<pointLight distance={4} intensity={2} color="#22d3ee" decay={2} />
|
||||
</Sphere>
|
||||
|
||||
</group>
|
||||
</Float>
|
||||
);
|
||||
}
|
||||
|
||||
// 2. SYNAPSE (Axon + Electric Pulse)
|
||||
function Synapse({ start, end }: { start: THREE.Vector3; end: THREE.Vector3 }) {
|
||||
const curve = useMemo(() => {
|
||||
// Create organic curve
|
||||
const mid = new THREE.Vector3().lerpVectors(start, end, 0.5);
|
||||
// Randomize control point for "tendon" shape
|
||||
mid.add(new THREE.Vector3(
|
||||
(Math.random() - 0.5) * 3,
|
||||
(Math.random() - 0.5) * 3,
|
||||
(Math.random() - 0.5) * 3
|
||||
));
|
||||
return new THREE.QuadraticBezierCurve3(start, mid, end);
|
||||
}, [start, end]);
|
||||
|
||||
const points = useMemo(() => curve.getPoints(30), [curve]);
|
||||
const impulseRef = useRef<THREE.Mesh>(null!);
|
||||
|
||||
useFrame((state) => {
|
||||
// Move electric pulse
|
||||
const t = (state.clock.getElapsedTime() * PULSE_SPEED) % 1;
|
||||
if (impulseRef.current) {
|
||||
const pos = curve.getPointAt(t);
|
||||
impulseRef.current.position.copy(pos);
|
||||
|
||||
// Stretch effect for speed illusion
|
||||
const tangent = curve.getTangent(t).normalize();
|
||||
impulseRef.current.lookAt(pos.clone().add(tangent));
|
||||
impulseRef.current.scale.set(0.6, 0.6, 2.5); // Stretch Z
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<group>
|
||||
{/* The physical connection (Axon) */}
|
||||
<line>
|
||||
<bufferGeometry>
|
||||
<bufferAttribute
|
||||
attach="attributes-position"
|
||||
count={points.length}
|
||||
array={new Float32Array(points.flatMap(p => [p.x, p.y, p.z]))}
|
||||
itemSize={3}
|
||||
/>
|
||||
</bufferGeometry>
|
||||
<lineBasicMaterial color="#0e7490" transparent opacity={0.15} />
|
||||
</line>
|
||||
|
||||
{/* The Traveling Spark (Electricity) */}
|
||||
<mesh ref={impulseRef}>
|
||||
<sphereGeometry args={[0.08, 8, 8]} />
|
||||
<meshBasicMaterial color="#ccfbf1" />
|
||||
<pointLight distance={3} intensity={3} color="#22d3ee" decay={2} />
|
||||
</mesh>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
// 3. BACKGROUND PARTICLES (Neurotransmitters)
|
||||
function NeuroDust() {
|
||||
const count = 200;
|
||||
const mesh = useRef<THREE.InstancedMesh>(null!);
|
||||
|
||||
const particles = useMemo(() => {
|
||||
const temp = [];
|
||||
for(let i=0; i<count; i++) {
|
||||
const t = Math.random() * 100;
|
||||
const factor = 20 + Math.random() * 10;
|
||||
const speed = 0.01 + Math.random() / 200;
|
||||
const x = (Math.random() - 0.5) * 30;
|
||||
const y = (Math.random() - 0.5) * 30;
|
||||
const z = (Math.random() - 0.5) * 15;
|
||||
temp.push({ t, factor, speed, x, y, z, mx: 0, my: 0 });
|
||||
}
|
||||
return temp;
|
||||
}, []);
|
||||
|
||||
const dummy = useMemo(() => new THREE.Object3D(), []);
|
||||
|
||||
useFrame((state) => {
|
||||
particles.forEach((particle, i) => {
|
||||
let { t, factor, speed, x, y, z } = particle;
|
||||
t = particle.t += speed / 2;
|
||||
const a = Math.cos(t) + Math.sin(t * 1) / 10;
|
||||
const b = Math.sin(t) + Math.cos(t * 2) / 10;
|
||||
const s = Math.cos(t);
|
||||
|
||||
dummy.position.set(
|
||||
x + Math.cos(t) + Math.sin(t) * 2,
|
||||
y + Math.sin(t) + Math.cos(t) * 2,
|
||||
z + Math.cos(t)
|
||||
);
|
||||
dummy.scale.setScalar(s * 0.03); // Tiny dust
|
||||
dummy.rotation.set(s * 5, s * 5, s * 5);
|
||||
dummy.updateMatrix();
|
||||
|
||||
if (mesh.current) mesh.current.setMatrixAt(i, dummy.matrix);
|
||||
});
|
||||
if (mesh.current) mesh.current.instanceMatrix.needsUpdate = true;
|
||||
});
|
||||
|
||||
return (
|
||||
<instancedMesh ref={mesh} args={[undefined, undefined, count]}>
|
||||
<dodecahedronGeometry args={[0.2, 0]} />
|
||||
<meshPhongMaterial color="#0891b2" emissive="#06b6d4" transparent opacity={0.4} />
|
||||
</instancedMesh>
|
||||
);
|
||||
}
|
||||
|
||||
// 4. MAIN SCENE
|
||||
function Scene() {
|
||||
const { viewport } = useThree();
|
||||
|
||||
// Generate random positions for neurons
|
||||
const neurons = useMemo(() => {
|
||||
const temp = [];
|
||||
for (let i = 0; i < NEURON_COUNT; i++) {
|
||||
temp.push({
|
||||
position: new THREE.Vector3(
|
||||
(Math.random() - 0.5) * 22,
|
||||
(Math.random() - 0.5) * 22,
|
||||
(Math.random() - 0.5) * 10
|
||||
),
|
||||
id: i
|
||||
});
|
||||
}
|
||||
return temp;
|
||||
}, []);
|
||||
|
||||
// Connect them
|
||||
const connections = useMemo(() => {
|
||||
const conns = [];
|
||||
for(let i=0; i<neurons.length; i++) {
|
||||
for(let j=i+1; j<neurons.length; j++) {
|
||||
if(neurons[i].position.distanceTo(neurons[j].position) < CONNECTION_DISTANCE) {
|
||||
conns.push({ start: neurons[i].position, end: neurons[j].position, key: `${i}-${j}` });
|
||||
}
|
||||
}
|
||||
}
|
||||
return conns;
|
||||
}, [neurons]);
|
||||
|
||||
useFrame((state) => {
|
||||
// Subtle Camera Parallax based on Mouse
|
||||
const x = (state.pointer.x * viewport.width) / 12;
|
||||
const y = (state.pointer.y * viewport.height) / 12;
|
||||
state.camera.position.x = THREE.MathUtils.lerp(state.camera.position.x, x, 0.02);
|
||||
state.camera.position.y = THREE.MathUtils.lerp(state.camera.position.y, y, 0.02);
|
||||
state.camera.lookAt(0,0,0);
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<color attach="background" args={["#020617"]} /> {/* Match gray-950 */}
|
||||
<ambientLight intensity={0.2} />
|
||||
<pointLight position={[10, 10, 10]} intensity={1} color="#22d3ee" />
|
||||
|
||||
{neurons.map(n => <NeuronCell key={n.id} position={[n.position.x, n.position.y, n.position.z]} />)}
|
||||
{connections.map(c => <Synapse key={c.key} start={c.start} end={c.end} />)}
|
||||
<NeuroDust />
|
||||
|
||||
{/* POST PROCESSING - The Secret Sauce for Realism */}
|
||||
<EffectComposer disableNormalPass>
|
||||
<Bloom
|
||||
luminanceThreshold={1} // Only very bright things glow
|
||||
mipmapBlur
|
||||
intensity={1.5} // Strength of the glow
|
||||
radius={0.6}
|
||||
/>
|
||||
<Vignette eskil={false} offset={0.1} darkness={1.1} />
|
||||
</EffectComposer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RealisticNeurons() {
|
||||
return (
|
||||
<div className="absolute inset-0 z-0 h-full w-full">
|
||||
<Canvas
|
||||
camera={{ position: [0, 0, 16], fov: 40 }}
|
||||
gl={{ alpha: false, antialias: false, toneMapping: THREE.ReinhardToneMapping }}
|
||||
dpr={[1, 1.5]} // Limit DPR for performance with post-processing
|
||||
>
|
||||
<Scene />
|
||||
<Preload all />
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user