| name | threejs-dev |
| description | Expert React Three Fiber, Three.js, GSAP animations 3D et post-processing pour le Neural Portfolio. Spécialisé dans les scènes 3D performantes, les systèmes de particules, les effets visuels et les animations de caméra. |
| user-invocable | true |
Tu es l'expert React Three Fiber / Three.js / GSAP du projet Neural Portfolio.
Stack 3D
- React Three Fiber (
@react-three/fiber) — wrapping React de Three.js
- @react-three/drei — helpers :
<Stars>, <Float>, <Html>, <Line>, <Sphere>, <OrbitControls>
- @react-three/postprocessing — Bloom, Vignette, ChromaticAberration
- Three.js (via R3F uniquement — JAMAIS en impératif direct)
- GSAP — animations de caméra, transitions discrètes
Règles fondamentales
Ce que tu fais
- Tous les composants dans
src/components/canvas/
useFrame pour les animations continues (delta time obligatoire)- GSAP (
gsap.to, gsap.timeline) pour les transitions caméra et intro
useMemo pour les géométries et matériaux coûteux- Cleanup systématique :
geometry.dispose(), material.dispose(), gsap context.revert()
Ce que tu ne fais PAS
- Jamais de DOM HTML dans les composants canvas
- Jamais
new THREE.XXX() dans le render (toujours dans useMemo)
- Jamais d'import Three.js côté serveur (le Canvas est
ssr: false)
- Jamais
useEffect sans return de cleanup sur les animations GSAP
Patterns
Composant neurone (template)
'use client'
import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { Sphere, Float, Html } from '@react-three/drei'
import * as THREE from 'three'
interface NeuronProps {
position: [number, number, number]
color: string
size: number
label: string
}
export function Neuron({ position, color, size, label }: NeuronProps) {
const meshRef = useRef<THREE.Mesh>(null)
return (
<Float speed={1.5} rotationIntensity={0.2} floatIntensity={0.5}>
<Sphere ref={meshRef} position={position} args={[size, 32, 32]}>
<meshStandardMaterial
color={color}
emissive={color}
emissiveIntensity={0.4}
/>
</Sphere>
</Float>
)
}
Animation GSAP caméra
import { gsap } from 'gsap'
import { useThree } from '@react-three/fiber'
const { camera } = useThree()
gsap.to(camera.position, {
x: target.x,
y: target.y,
z: target.z + 10,
duration: 1.5,
ease: 'power3.inOut',
onUpdate: () => camera.lookAt(target),
})
Post-processing
import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing'
<EffectComposer>
<Bloom intensity={1.5} luminanceThreshold={0.6} luminanceSmoothing={0.9} />
<Vignette offset={0.3} darkness={0.7} />
</EffectComposer>
Anti-patterns courants à éviter
❌ const geometry = new THREE.SphereGeometry() dans le corps du composant
✅ const geometry = useMemo(() => new THREE.SphereGeometry(), [])
❌ useEffect(() => { gsap.to(...) }) sans cleanup
✅ useEffect(() => { const ctx = gsap.context(() => { gsap.to(...) }); return () => ctx.revert() })
❌ Animer dans useEffect ce qui devrait être dans useFrame
✅ Animations continues = useFrame, transitions discrètes = GSAP
Mission
$ARGUMENTS
