Lecția 1, Toolchain-ul 3D

Unealtă	Pentru ce o folosești
Three.js	Motorul 3D de bază. Vanilla JS, putere completă.
React Three Fiber (R3F)	Three.js sub formă de componente React. Alegerea implicită pentru proiecte React.
Drei	Peste 100 de helpere pentru R3F: OrbitControls, Stars, Shadows, Text3D.
Spline	Editor 3D cu GUI. Drag-and-drop. Export către React dintr-un click.
Blender	Modelare 3D gratuită. Îți faci propriile asset-uri .glb.

Lecția 2, Prima ta scenă R3F

📜 Prompt Playbook,

Cel mai bun AI. • De ce.

import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { useRef } from 'react';

function Box() {
  const ref = useRef();
  useFrame((_, delta) => { ref.current.rotation.x += delta * 0.5; ref.current.rotation.y += delta * 0.3; });
  return (
    <mesh ref={ref}>
      <boxGeometry args={[1.5, 1.5, 1.5]} />
      <meshStandardMaterial color='#8b5cf6' metalness={0.4} roughness={0.2} />
    </mesh>
  );
}

export function Hero() {
  return (
    <Canvas camera={{ position: [3, 3, 3] }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} intensity={1.2} />
      <Box />
      <OrbitControls enableZoom={false} />
    </Canvas>
  );
}

Lecția 3, Încărcarea unui model .glb real

📜 Prompt Playbook,

Cel mai bun AI. • De ce.

import { useGLTF, Float } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/models/your-model.glb');
  return <Float speed={2} rotationIntensity={0.4} floatIntensity={1.2}>
    <primitive object={scene} scale={1.2} />
  </Float>;
}
useGLTF.preload('/models/your-model.glb');

Surse pentru modele GLB gratuite: Sketchfab, Poly Pizza, Quaternius, Kenney.nl.

Lecția 4, Spline, scurtătura 3D fără cod

Spline (spline.design) e un editor în stil Figma pentru scene 3D. Proiectezi cu mouse-ul, dai click pe 'Export to React', lipești două linii, iar scena ta e în site.

📜 Prompt Playbook,

Cel mai bun AI. • De ce.

import Spline from '@splinetool/react-spline';

export function Hero() {
  return <Spline scene='https://prod.spline.design/your-scene-id/scene.splinecode' />;
}

Compromisul: scenele Spline sunt fișiere mai mari. Folosește Spline pentru o singură scenă hero, nu pentru 5 secțiuni.

Lecția 5, Scroll de cameră, mișcarea care vinde cel mai mult

📜 Prompt Playbook,

Cel mai bun AI. • De ce.

import { useFrame, useThree } from '@react-three/fiber';
import { useScroll, ScrollControls } from '@react-three/drei';

function CameraRig() {
  const data = useScroll();
  useFrame((state) => {
    state.camera.position.z = 5 - data.offset * 4;
    state.camera.position.y = data.offset * 2;
    state.camera.lookAt(0, 0, 0);
  });
  return null;
}

export function Scene() {
  return (
    <Canvas>
      <ScrollControls pages={3} damping={0.2}>
        <CameraRig />
        <YourModel />
      </ScrollControls>
    </Canvas>
  );
}

Lecția 6, Performanța, adevărurile dure ale 3D-ului

Comprimă modelele GLB cu gltfpack sau gltf-transform. Modelele de 10MB nu sunt acceptabile.

Dezactivează umbrele dacă nu fac o diferență reală. Sunt scumpe.

Folosește <Suspense> cu un fallback, ca pagina să nu aștepte.

Încarcă lazy scenele 3D de sub fold.

Testează mereu pe un Android de gamă medie. Dacă se bâlbâie acolo, e stricat.

🎯 Pachet de quest-uri Nivel 4

🥉 QUEST BRONZ +150 XP

🧊Construiește hero-ul cu cubul care se rotește

Obiectiv. Prima scenă 3D, fără scuze.

Pași

Folosește codul din Lecția 2 în /level4/cube pe sandbox-ul tău.
Înlocuiește cubul cu o sferă, apoi cu un torus knot, ca să vezi cât e de simplu.
Adaugă ceață și o lumină punctuală slabă.
Fă deploy.

Gata când…

☐ URL live cu scenă 3D care se rotește

🥈 QUEST ARGINT +350 XP

🦄Bagă un GLB real și fă-l hero

Obiectiv. Model real, iluminare reală, farmec real.

Pași

Alege un GLB gratuit de pe Sketchfab sau Quaternius.
Comprimă-l cu CLI-ul gltf-transform.
Construiește un hero cu modelul plutind, iluminare blândă, OrbitControls dezactivat, rotație lentă.
Adaugă o versiune alternativă cu Spline pe /level4/spline-hero.
Compară bundle-ul și timpii de încărcare.

Gata când…

☐ Două versiuni live, R3F și Spline
☐ GLB comprimat sub 1MB

🥇 QUEST AUR +400 XP

💼Vinde un upgrade de 'hero 3D' pentru 3.000+ USD

Obiectiv. 3D-ul e un upsell premium. Ia bani pe el.

Pași

Pitch-uiește un hero 3D către 5 branduri (DTC, produs hardware, fintech, fashion).
Fă un demo R3F rapid cu produsul sau logo-ul lor.
Prinde 1 client. Cere între 3.000 și 8.000 USD.
Procură/modelează asset-ul (Blender, Spline sau cumpără un model de pe Sketchfab Pro).
Optimizează fără milă, țintește Lighthouse Performance >= 85 pe mobil.
Predă cu un Loom despre cum se actualizează scena.

Gata când…

☐ 1 client plătitor
☐ URL live cu hero 3D
☐ Lighthouse mobil >= 85

Nivel 4, Măiestrie 3D

Măiestrie 3D

Lecția 1, Toolchain-ul 3D

Lecția 2, Prima ta scenă R3F

Lecția 3, Încărcarea unui model .glb real

Lecția 4, Spline, scurtătura 3D fără cod

Lecția 5, Scroll de cameră, mișcarea care vinde cel mai mult

Lecția 6, Performanța, adevărurile dure ale 3D-ului

🎯 Pachet de quest-uri Nivel 4