R3F · NEXT.JS 16 · TYPESCRIPT
Un teren de joacă pentru învățarea React Three Fiber
Shell-uri randate pe server, WebGL hidratat pe client. Lecții care acoperă tiparele pe care le folosești zi de zi cu @react-three/fiber, drei, @react-three/rapier, zustand — referințe în loc de state, mesh-uri memoizate, instancing, asset-uri încărcate prin Suspense, shadere custom, fizică și performanță adaptivă.
Noțiuni de bază
Cub, sferă, lumini, OrbitControls — forma canonică R3F.
Texturi & PBR
useTexture, Environment, MeshPhysical — asset-uri încărcate prin Suspense.
Instancing
5000 de cuburi prin drei <Instances> — comută pentru a vedea diferența de FPS.
Post-procesare
Bloom, aberație cromatică, vignette prin EffectComposer.
Evenimente pointer
Hover, click, schimbări de cursor — raycasting integrat în JSX.
Camere
Perspective vs Orthographic, cameră animată, CameraShake.
Medii
Sky, Stars, Sparkles, Cloud, presetări Environment — utilitare de lume.
Shadere personalizate
shaderMaterial cu GLSL — deformare de vertex și uniforms.
Fizică
@react-three/rapier — RigidBody, collideri, impuls la click.
Text
drei Text (SDF) și Text3D — tipografie în trei dimensiuni.
Modele
useGLTF — asset-uri glTF încărcate prin Suspense cu loader-ul drei.
Animații
useAnimations — playback de clipuri și crossfade pe glTF cu schelet.
Journey
Scenă declanșată de scroll cu particule și lumini pe orbită.
Hero Parallax
Canvas de fundal cu cameră controlată de mouse și geometrie plutitoare — tiparul de homepage de agenție.
Card holografic
Card cu folie iridescentă și parallax la înclinare cu mouse-ul — tiparul de element UI premium.
Teren de joacă cu fizică
Corpuri rigide lansate la click — tiparul de jucărie interactivă cu fizică.
Configurator
Customizare de produs în timp real (culoare, finisaj) cu tranziții line între materiale.
Distorsiune de imagine
Grilă de imagini distorsionate la hover cu shader custom de vertex + UV-warp.
Glob & Arcuri
Glob punctat procedural cu arcuri animate între puncte lat/lon — tiparul de hero pentru data-viz.
Ferestre portal
drei MeshPortalMaterial — trei panouri rotunjite care expun scene complet diferite înăuntru.
Showcase de produs
Pagină de produs cu hotspot-uri la click — camera face tween spre poza de focalizare, panoul lateral afișează specul.
Scroll cinematic
Camera pe șine printre momente 3D regizate — tiparul Apple AirPods / Vision Pro.
Vizualizator audio
Icosaedru reactiv la microfon, controlat de bin-urile FFT printr-un shader custom de vertex.
Storyline cu scroll
Patru canvas-uri fixate care fac crossfade pe măsură ce utilizatorul derulează — tiparul de site one-page cu mai multe scene.
Storyline pe un singur canvas
Un canvas, o singură traiectorie de cameră care leagă patru capitole spațiale — varianta de lume continuă a storyline-ului cu scroll.
Arhitectură: fiecare lecție trăiește la /lessons/[slug] ca un shell de Server Component, cu canvas-ul WebGL importat dinamic dintr-un wrapper subțire "use client" care setează ssr: false. Textul de hero și metadatele sunt randate pe server; canvas-ul se hidratează în spatele unui schelet stabil la CLS.
Vezi README.md pentru turul proiectului și CLAUDE.md pentru convențiile și bunele practici R3F codificate în acest codebase.