25 DE LECȚII
Toate lecțiile
Fiecare lecție este un shell de Server Component cu canvas-ul WebGL încărcat dinamic în spatele ssr: false. Textul de hero și metadatele sunt randate pe server; canvas-ul se hidratează pe client.
TEHNIC · 12
Tehnic
Parcurgeri detaliate, funcție cu funcție, ale ecosistemului React Three Fiber.
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.
SHOWCASE · 13
Showcase
Tipare reale de site-uri — scene declanșate de scroll, canvas-uri de hero, tipuri de animație întâlnite pe site-urile WebGL de producție.
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.