פרק 11: 3D באינטרנט — Three.js, Spline ו-React Three Fiber

בפרק 10 למדתם Canvas — ציור פיקסלי בדפדפן, מערכות חלקיקים, ורקעים פרוצדורליים. עכשיו אנחנו עוברים למימד נוסף — פשוטו כמשמעו. תלת-מימד באינטרנט כבר לא שמור רק למשחקים ולסימולציות מדעיות. אתרי e-commerce מציגים מוצרים שמסתובבים, סטארטאפים בונים hero sections עם אובייקטים תלת-ממדיים צפים, ומותגים יוצרים חוויות אינטראקטיביות שגורמות למבקרים לחזור. Three.js הוא המנוע שמריץ את רוב ה-3D באינטרנט. Spline הוא העורך הוויזואלי שמאפשר ל-Vibe Coders ליצור סצנות 3D בלי לכתוב שורת קוד אחת. React Three Fiber הופך את Three.js לקומפוננטות React דקלרטיביות. ובפרק הזה תלמדו את שלושתם — מתי להשתמש בכל אחד, איך לשלב 3D באתר, ואיך לבקש מ-AI אלמנטים תלת-ממדיים שהופכים אתר רגיל לחוויה.

11.1 מה זה WebGL ותלת-מימד באינטרנט — ולמה צריך abstractions

כל מה שאתם רואים במסך — כל פיקסל, כל צבע, כל צורה — מצויר על ידי ה-GPU (Graphics Processing Unit). כשאתם כותבים CSS או Canvas 2D, הדפדפן מתרגם את הפקודות שלכם ל-GPU בשבילכם. אבל כשמדברים על תלת-מימד — על אובייקטים עם עומק, פרספקטיבה, תאורה, צללים, ושיקופים — צריך לדבר עם ה-GPU ישירות. וזה מה ש-WebGL עושה.

WebGL (Web Graphics Library) הוא API של JavaScript שמאפשר לדפדפן לשלוח פקודות ישירות ל-GPU. הוא מבוסס על OpenGL ES — אותו ה-API שמריץ גרפיקה במשחקי מובייל. WebGL קיים בכל הדפדפנים המודרניים מ-2011, ויש לו גרסה חדשה — WebGPU — שיותר מהירה ויעילה (נכנסת בהדרגה מ-2023).

אבל הנה הבעיה: WebGL קשה. קשה מאוד. כדי לצייר משולש אחד ב-WebGL צריכים לכתוב vertex shader (תוכנה שרצה על ה-GPU ומגדירה את מיקום כל קודקוד), fragment shader (תוכנה שרצה על ה-GPU ומגדירה את הצבע של כל פיקסל), buffer objects (מערכי נתונים שמועברים ל-GPU), ועשרות שורות של boilerplate code. רק משולש אחד — כ-100 שורות קוד.

זו בדיוק הסיבה שנוצרו abstractions — שכבות שמסתירות את המורכבות של WebGL ומאפשרות לכם לעבוד ברמה גבוהה יותר:

• Three.js — הספרייה הגדולה ביותר. במקום shaders ו-buffers, אתם עובדים עם scene, camera, mesh, material, light. הקוביה שדורשת 100 שורות ב-WebGL דורשת 15 שורות ב-Three.js
• React Three Fiber (R3F) — Three.js כ-React components. במקום new THREE.Mesh() כותבים <mesh>. אם אתם עובדים ב-React — זה הכלי שלכם
• Spline — עורך ויזואלי. לא כותבים קוד בכלל. גוררים אובייקטים, מוסיפים תאורה, מגדירים אינטראקציות — ומייצאים לאתר. הכלי הכי חשוב ל-Vibe Coders

למה 3D באתרים בכלל? שלוש סיבות מעשיות:

1. מוצר שצריך להסתובב — נעליים, שעונים, אלקטרוניקה, רהיטים. במקום 20 תמונות סטטיות מזוויות שונות — product viewer אחד שהמשתמש שולט בו. מחקרים מראים עלייה של 40% בזמן שהייה ו-25% יותר conversions
2. hero section שמרשים — אובייקטים תלת-ממדיים צפים, טקסט 3D, רקע אינטראקטיבי. ההבדל בין "אתר יפה" ל-"אתר שאי אפשר לשכוח"
3. data visualization ותיאור מורכב — ארכיטקטורה, מוצרים רפואיים, הדמיות מדעיות. דברים שפשוט לא ניתן להסביר ב-2D

ומה שהשתנה ב-2024-2026: הכלים הפכו נגישים. Three.js דורש ידע ב-JavaScript, אבל Spline מאפשר ל-designer ליצור סצנת 3D שלמה בלי שורת קוד. React Three Fiber עם drei מאפשרים product viewer ב-20 שורות. וכלי AI כמו Bolt, Lovable ו-Cursor יודעים לייצר קוד Three.js ו-R3F ברמה מרשימה. 3D באינטרנט כבר לא "רק למפתחים מנוסים".

11.2 Three.js — scene, camera, renderer: שלושת עמודי התלת-מימד

Three.js נוצר ב-2010 על ידי Ricardo Cabello (Mr.doob) ומאז הפך לסטנדרט de facto לתלת-מימד באינטרנט. יותר מ-2.7 מיליון הורדות שבועיות ב-npm, אלפי דוגמאות רשמיות, קהילה ענקית, ותיעוד מצוין. כל מה שאתם רואים ב-3D באינטרנט — כמעט תמיד Three.js מתחת למכסה המנוע.

הרעיון המרכזי של Three.js (ושל כל מנוע 3D) מבוסס על שלושה מרכיבים הכרחיים:

1. Scene (סצנה) — המרחב התלת-ממדי. חשבו על זה כקופסה ענקית שבתוכה נמצאים כל האובייקטים, האורות, והמצלמות. כל מה שאתם רוצים שייראה — צריך להוסיף ל-scene
2. Camera (מצלמה) — נקודת המבט. מאיפה הצופה מסתכל על הסצנה? בדרך כלל משתמשים ב-PerspectiveCamera — מצלמה שמחקה עין אנושית (מה שקרוב גדול, מה שרחוק קטן). הפרמטרים: FOV (שדה ראייה, בדרך כלל 75), aspect ratio (יחס רוחב-גובה), near (מה המרחק הקרוב ביותר שנראה), far (מה המרחק הרחוק ביותר)
3. Renderer (מרנדר) — המנוע שמצייר. לוקח את הסצנה והמצלמה ומייצר תמונה על Canvas. WebGLRenderer הוא הנפוץ ביותר — משתמש ב-GPU לביצועים גבוהים

ואז מוסיפים אובייקטים. כל אובייקט תלת-ממדי ב-Three.js הוא Mesh — שילוב של שני דברים:

• Geometry — הצורה. Three.js מספק עשרות צורות מובנות: BoxGeometry (קוביה), SphereGeometry (כדור), CylinderGeometry (גליל), PlaneGeometry (מישור), TorusGeometry (טבעת), ConeGeometry (חרוט) ועוד. אפשר גם לטעון צורות מורכבות מקבצי 3D
• Material — החומר. איך האובייקט נראה: צבע, ברק, שקיפות, טקסטורה. MeshBasicMaterial (צבע בלי תאורה), MeshStandardMaterial (PBR — מגיב לאור), MeshPhysicalMaterial (PBR מתקדם עם שקיפות וזכוכית)

ולבסוף — אור. בלי אור, כל האובייקטים שחורים (חוץ מ-MeshBasicMaterial שלא מושפע מתאורה). סוגי האור הבסיסיים:

• AmbientLight — אור סביבתי חלש שמאיר הכל בשווה. לא יוצר צללים. משמש כ-"fill light" בסיסי
• DirectionalLight — אור כיווני (כמו שמש). קרני אור מקבילות מכיוון אחד. יוצר צללים חדים
• PointLight — אור נקודתי (כמו נורה). מאיר לכל הכיוונים מנקודה אחת. יוצר צללים רכים

ככה זה נראה בקוד — סצנת Three.js מינימלית עם קוביה:

// סצנת Three.js מינימלית — קוביה מסתובבת
import * as THREE from 'three';

// 1. סצנה — המרחב התלת-ממדי
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);

// 2. מצלמה — נקודת המבט
const camera = new THREE.PerspectiveCamera(
  75,                              // FOV — שדה ראייה
  window.innerWidth / window.innerHeight, // aspect ratio
  0.1,                             // near — הכי קרוב שנראה
  1000                             // far — הכי רחוק שנראה
);
camera.position.z = 5;            // הרחקנו את המצלמה 5 יחידות אחורה

// 3. רנדרר — מנוע הציור
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

// 4. Mesh = Geometry + Material
const geometry = new THREE.BoxGeometry(1, 1, 1); // קוביה 1x1x1
const material = new THREE.MeshStandardMaterial({
  color: 0x6366f1,               // סגול
  metalness: 0.3,                 // קצת מתכתי
  roughness: 0.4                  // קצת חלק
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);                  // הוספה לסצנה

// 5. אורות
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

// 6. Animation loop — לולאת אנימציה
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;       // סיבוב על ציר X
  cube.rotation.y += 0.01;       // סיבוב על ציר Y
  renderer.render(scene, camera);
}
animate();

// 7. Responsive — התאמה לשינוי גודל חלון
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

40 שורות — וזה כל מה שצריך לקוביה מסתובבת עם תאורה. שימו לב ל-pattern: יוצרים scene → camera → renderer → meshes → lights → animation loop. זה ה-pattern הבסיסי של כל אפליקציית Three.js.

11.3 Spline — תלת-מימד בלי קוד (הכלי הקריטי ל-Vibe Coders)

אם Three.js הוא "כתוב קוד ותקבל 3D", Spline הוא "עצב ויזואלית ותקבל 3D". Spline הוא עורך תלת-ממדי שרץ בדפדפן — לא צריך להתקין כלום. פותחים את spline.design, נרשמים (חשבון חינמי), ומתחילים ליצור. הממשק דומה ל-Figma — שכבות בצד, toolbar למעלה, properties panel בצד השני. אבל במקום עיגולים ומלבנים, יש לכם קוביות, כדורים, טורוסים, ותאורה תלת-ממדית.

למה Spline קריטי ל-Vibe Coders:

• אפס קוד ליצירה — מעצבים בממשק ויזואלי, לא כותבים שורת קוד
• אינטראקציות מובנות — מוסיפים hover, click, scroll triggers בעורך, בלי JavaScript
• ייצוא ישיר לקוד — Export → React component, iframe embed, vanilla JS, image, video, GLTF
• Spline AI — מתארים מה רוצים בטקסט ("floating neon heart with glow") ומקבלים 4 וריאנטים תלת-ממדיים. תוסף של $5/חודש עם 2,000 credits
• Community — אלפי סצנות מוכנות שאפשר לעשות להן remix — להתחיל מדוגמה קיימת ולשנות

הממשק של Spline — מה יש בפנים:

1. Toolbar (למעלה) — כלי יצירה: Box, Sphere, Cylinder, Torus, Text 3D, Path, ועוד. גם Library של מודלים מוכנים
2. Viewport (מרכז) — הסצנה התלת-ממדית. גוררים אובייקטים, מסובבים, מזיזים. גלגלת העכבר לזום, right-click drag לסיבוב מצלמה
3. Layers Panel (שמאל) — כל האובייקטים בסצנה — כמו Layers ב-Figma. אפשר לקבץ, לנעול, להסתיר
4. Properties Panel (ימין) — מאפייני האובייקט הנבחר: position, rotation, scale, material, physics, interactions
5. Timeline (למטה) — אנימציות keyframe. מגדירים מצב התחלה ומצב סיום, Spline עושה את המעבר

שיטות ייצוא מ-Spline:

• Embed (iframe) — הכי פשוט. מקבלים URL, שמים ב-iframe. עובד בכל מקום. החיסרון: הסצנה נטענת מ-Spline servers
• React Component — @splinetool/react-spline. מקבלים קומפוננטה שמטענת את הסצנה. שליטה מלאה ב-events
• Vanilla JS — @splinetool/runtime. טוען את הסצנה לתוך Canvas element. לפרויקטים שלא ב-React
• Image / Video — רנדור סטטי או וידאו. לשימוש כ-fallback או ב-social media
• GLTF / GLB — ייצוא המודל כקובץ 3D סטנדרטי. אפשר לטעון ב-Three.js או R3F

// שילוב Spline באתר — React Component
import Spline from '@splinetool/react-spline';

function Hero3D() {
  function onLoad(splineApp) {
    // אפשר לגשת לאובייקטים בסצנה
    const cube = splineApp.findObjectByName('Cube');
    console.log('Spline scene loaded!', cube);
  }

  function onMouseHover(e) {
    // e.target.name — שם האובייקט שה-hover עליו
    console.log('Hovering:', e.target.name);
  }

  return (
    <div style={{ width: '100%', height: '500px' }}>
      <Spline
        scene="https://prod.spline.design/YOUR-SCENE-ID/scene.splinecode"
        onLoad={onLoad}
        onMouseHover={onMouseHover}
      />
    </div>
  );
}

// שילוב Spline באתר — Vanilla JS
import { Application } from '@splinetool/runtime';

const canvas = document.getElementById('canvas3d');
const app = new Application(canvas);

app.load('https://prod.spline.design/YOUR-SCENE-ID/scene.splinecode')
  .then(() => {
    const cube = app.findObjectByName('Cube');
    // שליטה פרוגרמטית באובייקט
    cube.position.x = 2;
    cube.rotation.y = Math.PI / 4;
  });

Spline vs Blender — שאלה שנשאלת הרבה. Blender הוא הכלי המקצועי ביותר ליצירת מודלים תלת-ממדיים — חינמי, open source, עם יכולות שלא מתקרבים אליהם. אבל Blender דורש חודשים של למידה ומיועד ליצירת assets (מודלים, טקסטורות, אנימציות) — לא לבניית סצנות web. Spline מיועד ל-web-native — מעצבים, מוסיפים אינטראקציות, ומייצאים ישירות לאתר. אם צריך מודל מורכב של מכונית — Blender (או Sketchfab). אם צריך hero section עם צורות 3D — Spline.

Spline Community ו-Remix: אחד הדברים הכי שימושיים ב-Spline הוא ה-Community. ב-community.spline.design יש אלפי סצנות מוכנות — hero sections, product viewers, interactive backgrounds, 3D icons, ועוד. אפשר לעשות Remix לכל סצנה — זה פותח אותה בעורך שלכם כעותק שאפשר לערוך. זו הדרך הכי מהירה להתחיל: מוצאים סצנה שדומה למה שצריך, עושים Remix, משנים צבעים וחומרים, ומייצאים. במקום לבנות מאפס — מתאימים אישית. זה בדיוק הגישה של Vibe Coding — להשתמש בכלים קיימים ולהתאים, לא לבנות מאפס.

11.4 React Three Fiber — Three.js כקומפוננטות React

אם אתם עובדים עם React (וב-2026, רוב ה-Vibe Coders עובדים עם Next.js שהוא React), React Three Fiber (R3F) הוא הדרך הנכונה לשלב 3D. במקום הגישה האימפרטיבית של Three.js (new THREE.Mesh(geometry, material)), R3F מאפשר גישה דקלרטיבית — מתארים את הסצנה כ-JSX:

// React Three Fiber — אותה קוביה, בגישה דקלרטיבית
import { Canvas } from '@react-three/fiber';

function RotatingCube() {
  const meshRef = useRef();

  // useFrame רץ כל frame (~60fps) — מושלם לאנימציות
  useFrame((state, delta) => {
    meshRef.current.rotation.x += delta;
    meshRef.current.rotation.y += delta * 0.5;
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="#6366f1" metalness={0.3} roughness={0.4} />
    </mesh>
  );
}

function App() {
  return (
    <Canvas camera={{ position: [0, 0, 5], fov: 75 }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} intensity={1} />
      <RotatingCube />
    </Canvas>
  );
}

שימו לב למה שקרה כאן:

• אין new THREE.Scene() — הקומפוננטה <Canvas> יוצרת scene, camera, renderer אוטומטית
• אין animation loop — useFrame hook מחליף את requestAnimationFrame
• אין addEventListener('resize') — R3F מטפל ב-responsive אוטומטית
• הכל React — אפשר להשתמש ב-state, props, context, effects — כל הכלים שאתם כבר מכירים

הקסם של R3F: כל מה שקיים ב-Three.js זמין ב-R3F — פשוט עם תחביר JSX. THREE.BoxGeometry → <boxGeometry>, THREE.MeshStandardMaterial → <meshStandardMaterial>, THREE.DirectionalLight → <directionalLight>. השם הופך מ-PascalCase ל-camelCase, והפרמטרים עוברים כ-props. כל class ב-Three.js הופך אוטומטית לקומפוננטה.

Events ב-R3F — ואחד הדברים הכי חזקים. ב-Three.js vanilla, אם רוצים לזהות click על אובייקט — צריך raycasting (לירות קרן מהמצלמה דרך נקודת הקליק ולבדוק מה היא פוגעת). ב-R3F, זה פשוט event handler:

// Events ב-R3F — פשוט כמו React רגיל
function InteractiveCube() {
  const [hovered, setHovered] = useState(false);
  const [clicked, setClicked] = useState(false);

  return (
    <mesh
      onClick={() => setClicked(!clicked)}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
      scale={clicked ? 1.5 : 1}
    >
      <boxGeometry />
      <meshStandardMaterial color={hovered ? '#ff6b6b' : '#6366f1'} />
    </mesh>
  );
}

Click, hover, drag — כל מה שאתם רגילים מ-React, עובד גם על אובייקטים תלת-ממדיים. זו הסיבה שפרויקטי React מעדיפים R3F על Three.js vanilla — ה-3D מרגיש כמו חלק טבעי מהאפליקציה, לא כמו עולם נפרד.

11.5 drei — ספריית Helper Components שחוסכת מאות שורות

R3F לבד הוא Three.js כ-React — וזה נהדר. אבל עדיין צריך לכתוב הרבה boilerplate: controls למצלמה, environment maps, loading indicators, text 3D. ספריית drei (בגרמנית: שלוש) היא אוסף של עשרות קומפוננטות מוכנות שעוטפות את ה-patterns הנפוצים ביותר. היא בפועל חובה בכל פרויקט R3F.

הקומפוננטות שתשתמשו בהן הכי הרבה:

OrbitControls — שליטת מצלמה עם העכבר. העמוד השדרה של כל product viewer:

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

function ProductViewer() {
  return (
    <Canvas>
      <OrbitControls
        enableZoom={true}      // גלגלת = זום
        enablePan={false}      // לא מאפשר הזזה
        autoRotate={true}      // מסתובב אוטומטית
        autoRotateSpeed={2}    // מהירות הסיבוב
        minDistance={3}        // מרחק מינימלי מהאובייקט
        maxDistance={10}       // מרחק מקסימלי
        maxPolarAngle={Math.PI / 2} // מגביל סיבוב אנכי
      />
      {/* ... meshes, lights ... */}
    </Canvas>
  );
}

Environment — environment map בשורה אחת. ההבדל בין 3D שנראה מזויף ל-3D שנראה אמיתי:

import { Environment } from '@react-three/drei';

// במקום לטעון HDR file, environment map מוכנה:
<Environment preset="sunset" />    // שקיעה חמימה
<Environment preset="city" />      // עיר — שיקופים של בניינים
<Environment preset="studio" />    // סטודיו — תאורה נקייה
<Environment preset="forest" />    // יער — אור ירוק רך
<Environment preset="apartment" /> // דירה — אור פנימי
<Environment preset="dawn" />      // שחר — אור ורוד

Float — אנימציית ריחוף אוטומטית. מושלם ל-hero sections עם אובייקטים צפים:

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

// האובייקט צף למעלה ולמטה בצורה אורגנית
<Float
  speed={2}            // מהירות הריחוף
  rotationIntensity={1} // כמה מסתובב
  floatIntensity={2}   // כמה "גבוה" צף
  floatingRange={[-0.1, 0.1]} // טווח התנועה
>
  <mesh>
    <sphereGeometry args={[1, 32, 32]} />
    <meshStandardMaterial color="#6366f1" metalness={0.8} roughness={0.2} />
  </mesh>
</Float>

Text3D — טקסט תלת-ממדי עם font ו-material:

import { Text3D, Center } from '@react-three/drei';

// טקסט 3D ממורכז עם material מתכתי
<Center>
  <Text3D
    font="/fonts/Inter_Bold.json" // צריך typeface.json
    size={1}
    height={0.2}      // עומק הטקסט
    bevelEnabled
    bevelSize={0.02}
    bevelThickness={0.01}
  >
    Hello 3D
    <meshStandardMaterial color="#fbbf24" metalness={0.8} roughness={0.2} />
  </Text3D>
</Center>

Sparkles — חלקיקים נוצצים. אפקט מושלם ל-hero backgrounds:

import { Sparkles } from '@react-three/drei';

// חלקיקים זוהרים שרוחפים בסצנה
<Sparkles
  count={200}          // כמה חלקיקים
  size={3}             // גודל
  speed={0.5}          // מהירות תנועה
  scale={[10, 10, 10]} // טווח הפיזור
  color="#fbbf24"      // צבע
/>

עוד קומפוננטות drei שכדאי להכיר:

• Stars — רקע כוכבים. שורה אחת ויש לכם שמיים מלאי כוכבים
• Sky — שמיים ריאליסטיים עם שמש, עננים, ושעת יום
• Cloud — עננים תלת-ממדיים ריאליסטיים
• ContactShadows — צללים רכים על רצפה בלי shadow maps מורכבים
• Stage — סביבת presentation מוכנה: תאורה, צללים, רקע — בשורה אחת
• Html — רנדור HTML רגיל בתוך סצנת 3D. labels, tooltips, UI שצמוד לאובייקטים
• MeshWobbleMaterial — material שמתנדנד. מצוין לאנימציות אורגניות
• MeshDistortMaterial — material שמעוות את הצורה. אפקט blob פופולרי
• PresentationControls — כמו OrbitControls אבל עם spring animation — מרגיש יותר טבעי

11.6 מודלים תלת-ממדיים — GLTF, מקורות חינמיים, וטעינה באתר

קוביות וכדורים זה נחמד, אבל הכוח האמיתי של 3D באתרים הוא מודלים — מוצרים אמיתיים, דמויות, בניינים, כלי רכב. מודלים תלת-ממדיים נוצרים בכלים כמו Blender, Maya, Cinema 4D, או ZBrush ומיוצאים לפורמט שהדפדפן יכול לטעון.

GLTF — הפורמט הסטנדרטי של 3D באינטרנט:

GLTF (GL Transmission Format) הוא "ה-JPEG של 3D" — הפורמט הסטנדרטי להעברת מודלים תלת-ממדיים באינטרנט. פותח על ידי Khronos Group (אותה קבוצה שפיתחה WebGL ו-OpenGL). שתי וריאנטים:

• .gltf — קובץ JSON + קבצי texture נפרדים + קובצי geometry בינאריים (.bin). נוח לעריכה, פחות נוח לטעינה
• .glb — הכל בקובץ בינארי אחד. זה מה שתשתמשו בו תמיד. קובץ אחד, טעינה אחת, בלי broken references

איפה מוצאים מודלים תלת-ממדיים חינם:

• Sketchfab — הספרייה הגדולה ביותר. מיליוני מודלים. סנן ל-"Downloadable" ו-"CC" לחינמיים. רבים מגיעים כ-GLTF/GLB
• Poly.pizza — מודלים low-poly חינמיים ברישיון CC0 (בלי attribution). מושלם לאתרים — קלי משקל ומעוצבים יפה
• market.pmnd.rs — מודלים שאופטימלו במיוחד ל-React Three Fiber. מגיעים עם קוד R3F מוכן!
• Kenney.nl — אלפי assets חינמיים ברישיון CC0 — מודלים, textures, sounds

טעינת מודל GLTF ב-React Three Fiber:

// טעינת מודל GLTF עם useGLTF מ-drei
import { Canvas } from '@react-three/fiber';
import { useGLTF, OrbitControls, Environment, Stage } from '@react-three/drei';

function Product({ url }) {
  // useGLTF טוען את המודל ועושה cache אוטומטי
  const { scene } = useGLTF(url);

  return <primitive object={scene} scale={1} />;
}

// preload — טעינה מוקדמת ברקע
useGLTF.preload('/models/laptop.glb');

function ProductShowcase() {
  return (
    <Canvas camera={{ position: [0, 0, 5], fov: 50 }}>
      <Stage environment="city" intensity={0.5}>
        <Product url="/models/laptop.glb" />
      </Stage>
      <OrbitControls
        autoRotate
        autoRotateSpeed={1}
        enableZoom={true}
        minDistance={2}
        maxDistance={8}
      />
    </Canvas>
  );
}

שימו לב כמה קוד זה — product viewer שלם עם מודל, תאורה, environment map, צללים, ושליטת מצלמה — ב-20 שורות. זה הכוח של R3F + drei + Stage. הקומפוננטה Stage עוטפת את המודל בתאורת סטודיו, צללי contact, ו-environment map — הכל בשורה אחת.

כלים לעבודה עם מודלים:

• gltf.report — בודק מודל GLTF, מראה סטטיסטיקות (vertices, textures, file size), ומאפשר לדחוס ולאפטם ישירות בדפדפן
• gltf-viewer — צפייה מהירה במודל GLTF לפני שילוב באתר
• gltf-transform — CLI tool לאופטימיזציית GLTF: Draco compression, texture resize, mesh merging
• gltf.pmnd.rs — ממיר מודל GLTF לקומפוננטת React Three Fiber אוטומטית — drag-and-drop ומקבלים קוד!

11.7 תאורה וחומרים — ההבדל בין 3D חובבני למקצועי

אם שאלתם אי פעם "למה ה-3D שלי נראה מזויף?" — התשובה כמעט תמיד היא תאורה וחומרים. אותו מודל בדיוק יכול להיראות כמו צעצוע פלסטיק או כמו מוצר מצולם ב-studio מקצועי — ההבדל הוא ב-lighting setup ובפרמטרי ה-material. זה הסעיף הכי חשוב בפרק הזה לאיכות התוצאה.

סוגי אור — מתי משתמשים בכל אחד:

• AmbientLight — אור סביבתי שמאיר הכל בשווה. לא יוצר צללים. משמש כ-fill — מונע שאובייקטים יהיו שחורים לגמרי בצד המוצל. intensity נמוך: 0.3-0.5
• DirectionalLight — אור כיווני, כמו שמש. כל הקרניים מקבילות מכיוון אחד. יוצר צללים חדים. ה-key light הראשי ברוב הסצנות. מיקום: position={[5, 5, 5]} — מימין, מלמעלה, מלפנים
• PointLight — אור נקודתי, כמו נורה. מפזר אור לכל הכיוונים מנקודה אחת. עוצמה דועכת עם המרחק (decay). מצוין כ-fill light או accent
• SpotLight — אור ספוט, כמו פנס. זורח בזווית מוגדרת (angle) עם softness בקצוות (penumbra). מושלם כשרוצים לכוון תשומת לב לאובייקט ספציפי
• HemisphereLight — אור חצי-כיפה. צבע אחד מלמעלה (שמיים), צבע אחר מלמטה (קרקע). נותן תחושת אור טבעי ב-outdoor

setup תאורה קלאסי — "three-point lighting":

// Three-point lighting — הסטנדרט של צילום סטודיו
function StudioLighting() {
  return (
    <>
      {/* Key light — האור הראשי, חזק, מימין */}
      <directionalLight
        position={[5, 5, 5]}
        intensity={1.5}
        castShadow
        shadow-mapSize-width={2048}
        shadow-mapSize-height={2048}
      />

      {/* Fill light — ממלא צללים, חלש, משמאל */}
      <directionalLight
        position={[-3, 3, 2]}
        intensity={0.4}
      />

      {/* Back light / rim light — יוצר קונטור, מאחור */}
      <pointLight
        position={[0, 5, -5]}
        intensity={0.6}
      />

      {/* Ambient — fill בסיסי שמונע שחור מוחלט */}
      <ambientLight intensity={0.2} />
    </>
  );
}

PBR Materials — חומרים שנראים אמיתיים:

PBR (Physically Based Rendering) הוא שיטת רנדור שמחקה את הפיזיקה של אור. במקום לבחור צבע ולקוות לטוב, מגדירים properties פיזיקליים והמנוע מחשב איך הם נראים. שני הפרמטרים המרכזיים:

• metalness (0-1) — כמה מתכתי החומר. 0 = פלסטיק/עץ/בד (לא מתכת). 1 = מתכת מלאה (זהב, כסף, כרום). רוב החומרים הם 0 — רק מתכת ממש היא 1
• roughness (0-1) — כמה מחוספס. 0 = מראה מושלמת (כרום מלוטש). 1 = לגמרי מט (גיר, עץ לא מטופל). רוב החומרים: 0.3-0.7

// חומרים PBR נפוצים — metalness + roughness
const materials = {
  // מתכות
  chrome:    { metalness: 1, roughness: 0 },     // כרום מלוטש
  gold:      { metalness: 1, roughness: 0.3, color: '#ffd700' },
  brushedSteel: { metalness: 1, roughness: 0.5 }, // פלדה מוברשת

  // לא-מתכות
  plastic:   { metalness: 0, roughness: 0.4 },    // פלסטיק חלק
  rubber:    { metalness: 0, roughness: 0.9 },     // גומי
  glass:     { metalness: 0, roughness: 0, transmission: 1, ior: 1.5 }, // זכוכית (MeshPhysicalMaterial)
  wood:      { metalness: 0, roughness: 0.8 },     // עץ
  ceramic:   { metalness: 0, roughness: 0.3 },     // קרמיקה
};

Environment Maps — הקסם האמיתי:

environment map (מפת סביבה) היא תמונה פנורמית HDR שעוטפת את הסצנה כולה — כמו שמיים/סביבה שמקיפים את האובייקטים. היא משרתת שני תפקידים: (1) תאורה עקיפה — image-based lighting (IBL) שנותן תאורה ריאליסטית מכל כיוון, (2) שיקופים — אובייקטים מתכתיים וחלקים משקפים את הסביבה. הוספת environment map היא הטריק הבודד שהכי משפר את איכות 3D.

11.8 3D + גלילה — תנועת מצלמה מונעת scroll

אחד הטריקים הכי מרשימים ב-3D באתרים הוא scroll-driven camera movement — כשהמשתמש גולל, המצלמה זזה בסצנה התלת-ממדית. אתרי product landing pages, סיפורי מותג, ו-storytelling sites משתמשים בזה ליצירת חוויה קולנועית.

שתי גישות עיקריות:

גישה 1: useScroll מ-drei — הדרך הנקייה ביותר ב-R3F. הסצנה נעטפת ב-ScrollControls, ו-useScroll נותן את ההתקדמות (0-1):

// Scroll-driven 3D עם drei ScrollControls
import { Canvas } from '@react-three/fiber';
import { ScrollControls, useScroll, Environment } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

function ScrollScene() {
  const scroll = useScroll();
  const meshRef = useRef();
  const cameraRef = useRef();

  useFrame((state) => {
    // scroll.offset = 0 (top) עד 1 (bottom)
    const progress = scroll.offset;

    // המצלמה זזה בציר Z לפי הגלילה
    state.camera.position.z = 10 - progress * 8;
    state.camera.position.y = progress * 3;
    state.camera.lookAt(0, 0, 0);

    // האובייקט מסתובב לפי הגלילה
    meshRef.current.rotation.y = progress * Math.PI * 2;
    meshRef.current.scale.setScalar(1 + progress * 0.5);
  });

  return (
    <mesh ref={meshRef}>
      <torusKnotGeometry args={[1, 0.3, 128, 32]} />
      <meshStandardMaterial color="#6366f1" metalness={0.8} roughness={0.2} />
    </mesh>
  );
}

function App() {
  return (
    <Canvas camera={{ position: [0, 0, 10] }}>
      <ScrollControls pages={3} damping={0.25}>
        <ScrollScene />
      </ScrollControls>
      <Environment preset="city" />
    </Canvas>
  );
}

גישה 2: GSAP ScrollTrigger + Three.js — כשצריך שליטה מדויקת יותר, או כשהסצנת 3D היא חלק מדף עם תוכן HTML רגיל. בגישה הזו, Three.js Canvas הוא רקע קבוע, ו-GSAP ScrollTrigger שולט במצלמה:

// GSAP ScrollTrigger + Three.js — מצלמה שנשלטת מגלילה
import * as THREE from 'three';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// יצירת סצנה, מצלמה, רנדרר (כרגיל)
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ alpha: true }); // alpha: true = רקע שקוף

// Canvas קבוע ברקע
renderer.domElement.style.position = 'fixed';
renderer.domElement.style.top = '0';
renderer.domElement.style.zIndex = '-1';
document.body.appendChild(renderer.domElement);

// אנימציית מצלמה לפי גלילה
gsap.to(camera.position, {
  z: 2,
  y: 3,
  x: -1,
  scrollTrigger: {
    trigger: '.content-section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: 1,            // החלקה עם הגלילה
  }
});

// סיבוב מודל לפי גלילה
gsap.to(model.rotation, {
  y: Math.PI * 2,
  scrollTrigger: {
    trigger: '.product-section',
    start: 'top center',
    end: 'bottom center',
    scrub: true,
  }
});

// animation loop
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

מתי כל גישה:

• drei ScrollControls — כשכל הדף הוא חוויית 3D. הסצנה תופסת את כל המסך, תוכן HTML floating מעליה
• GSAP ScrollTrigger — כשהסצנה 3D היא חלק מדף HTML רגיל. sections של תוכן + sections של 3D לסירוגין
• Spline + scroll — ב-Spline אפשר להגדיר scroll-triggered animations ישירות בעורך. הכי פשוט, אבל פחות שליטה

טיפים ל-scroll-driven 3D:

• damping תמיד — תנועת מצלמה חייבת להיות חלקה. scrub: 1 (GSAP) או damping={0.25} (drei)
• lookAt נקודה קבועה — המצלמה זזה, אבל תמיד מסתכלת על האובייקט. מונע תחושת "חוסר שליטה"
• שמרו על הביצועים — scroll events מגיעים 60 פעמים בשנייה. כל frame = render מלא של הסצנה. מודלים קלים בלבד
• mobile fallback — scroll-driven 3D כבד מאוד על מובייל. שקלו fallback של תמונות סטטיות או אנימציית CSS פשוטה

11.9 ביצועים — איך ש-3D לא יהרוג את האתר

3D הוא הטכנולוגיה הכי כבדה שנלמדה בקורס הזה. סצנת Three.js פשוטה צורכת יותר משאבים מדף HTML שלם עם כל האנימציות שבו. אם לא מטפלים בביצועים — ה-3D יהפוך מ-wow ל-"למה האתר כל כך איטי?". הנה הטכניקות הקריטיות:

1. Geometry — פחות vertices = יותר מהיר:

• Low-poly כשאפשר — כדור עם 16 segments נראה מספיק טוב ברוב המקרים. אין סיבה ל-128 segments אלא אם המצלמה ממש קרובה
• LOD (Level of Detail) — מודלים שונים למרחקים שונים. קרוב: 50K polygons, רחוק: 5K polygons. ב-R3F: <Detailed> מ-drei
• Instancing — אם יש 100 עצים זהים בסצנה, לא צריך 100 meshes. <Instances> מ-drei מרנדר אלפי copies ב-draw call אחד

2. Textures — הרוצח השקט:

• גודל — texture של 4096x4096 תופס 64MB ב-GPU memory. לרוב 1024x1024 או 2048x2048 מספיק
• פורמט — השתמשו ב-KTX2/Basis compression (נתמך ב-Three.js) — הפחתה של 75% בגודל ללא אובדן איכות מורגש
• Power of 2 — textures צריכים להיות בגדלים של חזקות 2 (256, 512, 1024, 2048). גדלים אחרים גורמים לבזבוז GPU memory

3. קבצי GLTF — compression:

• Draco compression — דוחס geometry (vertices, faces) ב-70-90%. ב-Three.js: DRACOLoader. ב-R3F: useGLTF תומך אוטומטית
• meshopt compression — חלופה ל-Draco עם decompression מהיר יותר. טוב למובייל
• gltf-transform — CLI לאופטימיזציה: gltf-transform optimize model.glb output.glb --compress draco

4. Rendering — פחות pixels = יותר מהיר:

• Pixel ratio — renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)). מסכי Retina הם 3x — הגבלה ל-2x חוסכת 55% pixels
• Shadow maps — צללים כבדים. כבו אם לא חייבים. אם כן — 1024x1024 מספיק לרוב. 2048 למקרים מיוחדים
• Antialiasing — antialias: true שווה את ההשקעה, אבל על מובייל שקלו לכבות

5. Lazy Loading — טעינה חכמה:

// Lazy loading של סצנת 3D — לא טוענים עד שנראה
import { Suspense, lazy } from 'react';
import { Canvas } from '@react-three/fiber';

const Heavy3DScene = lazy(() => import('./Heavy3DScene'));

function Hero() {
  const [visible, setVisible] = useState(false);
  const ref = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setVisible(true); },
      { rootMargin: '200px' } // טוען 200px לפני שנראה
    );
    observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return (
    <div ref={ref} style={{ height: '100vh' }}>
      {visible && (
        <Suspense fallback={<div className="loading">Loading 3D...</div>}>
          <Canvas>
            <Heavy3DScene />
          </Canvas>
        </Suspense>
      )}
    </div>
  );
}

6. Mobile Fallbacks — ה-must שרוב המפתחים שוכחים:

// Mobile fallback — תמונה סטטית במקום 3D
function SmartHero() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    // בדיקה: מסך קטן או GPU חלש
    const mobile = window.innerWidth < 768;
    const weakGPU = navigator.hardwareConcurrency <= 4;
    setIsMobile(mobile || weakGPU);
  }, []);

  if (isMobile) {
    return <img src="/hero-3d-fallback.webp" alt="Product view" />;
  }

  return (
    <Canvas>
      {/* ... סצנת 3D מלאה ... */}
    </Canvas>
  );
}

סיכום ביצועים — מספרים שכדאי לזכור:

• Draw calls — כל mesh נפרד דורש draw call אחד. מעל 100 draw calls = בעיית ביצועים. השתמשו ב-Instancing למשים זהים, ו-mesh merging למשים סטטיים
• Triangles — סצנה טיפוסית לאתר: 50K-200K triangles. מעל 500K = כבד מדי. בדקו ב-Three.js: renderer.info.render.triangles
• FPS target — 60fps ב-desktop, 30fps ב-mobile. אם נופלים מתחת — פשטו את הסצנה או הוסיפו fallback
• זמן טעינה — סצנת 3D צריכה להיטען תוך 3 שניות מקסימום. יותר מזה — המשתמש עוזב. לכן preloading ו-loading indicator הם חובה
• Battery drain — סצנת 3D שרצה כל הזמן שורפת סוללה. עצרו render כשה-tab לא פעיל (document.hidden), והפחיתו FPS כש-battery saver mode פעיל

הנקודה המרכזית: ביצועי 3D הם לא בעיה — אלא אם מתעלמים מהם. כל הטכניקות כאן פשוטות ליישום. הבעיה היא לשכוח ליישם אותן. לכן ה-checklist בסוף הפרק כולל את כל נקודות הביצועים — עברו עליו לפני כל פרסום.

11.10 מתי להשתמש ב-3D — framework החלטה

3D מרשים, אבל הוא גם כבד, מורכב ליצירה, ויכול לפגוע בחוויה אם משתמשים בו לא נכון. לפני שמוסיפים 3D — עברו על ה-framework הזה:

תרחישים שבהם 3D שווה את ההשקעה:

• Product showcase — מוצר פיזי שהמשתמש רוצה "לגעת" בו. נעליים, אלקטרוניקה, רהיטים, תכשיטים. ROI מוכח
• Hero section של landing page — דף אחד שצריך לרשים. הרושם הראשון שווה את העומס
• Configurator — המשתמש בוחר צבעים, חומרים, ואביזרים ורואה את התוצאה ב-3D בזמן אמת
• Data visualization — נתונים שקשה להציג ב-2D: גלובוס, topology, קשרים מרחביים
• Interactive storytelling — חוויה נרטיבית שהמשתמש חוקר — מוזיאונים, חינוך, brand stories

תרחישים שבהם 3D כנראה לא שווה:

• בלוג / תוכן טקסטואלי — 3D יסיח את הדעת מהקריאה
• דף עם טפסים — המשתמש צריך למלא פרטים, לא להתרשם מגרפיקה
• אתר עם תנועה גבוהה ממובייל — אם 80% מהתנועה ממובייל, 3D ישפיע על ה-bounce rate
• "כי המתחרים עשו" — אם אין ערך ברור, לא תהיה תוצאה ברורה

הדרך הנכונה לחשוב על 3D באתרים: תחשבו עליו כמו וידאו. וידאו באתר מוסיף ערך ענק כשהוא במקום הנכון (hero, product demo, testimonial), אבל הוא כבד, דורש bandwidth, ולא עובד טוב בכל המכשירים. אתם לא שמים וידאו בכל דף — אתם שמים אותו בנקודות אסטרטגיות. אותו דבר עם 3D. אלמנט 3D אחד ממוקם נכון — product viewer בדף מוצר, hero מרשים בדף נחיתה — שווה יותר מעשרה אלמנטים 3D מפוזרים בכל האתר.

ודבר אחרון ב-context של 3D: אל תנסו לעשות הכל לבד. מעצב 3D מקצועי ב-Blender או Cinema 4D ייצור מודל ביום שלכם ייקח שבוע ללמוד. המיומנות שלכם כ-Vibe Coders היא לא ליצור מודלים — היא לשלב מודלים קיימים (Poly.pizza, Sketchfab, Spline) באתר בצורה חכמה ומהירה. השתמשו ב-Spline ליצירת סצנות מגיאומטריות בסיסיות, ב-marketplaces למודלים מורכבים, וב-AI לקוד השילוב.

11.11 חמישה פרומפטים AI ל-3D באתרים

כלי AI כמו Bolt, Lovable, v0, Cursor ו-Claude כבר יודעים לכתוב קוד Three.js ו-React Three Fiber ברמה מרשימה. אבל התוצאה תלויה באיכות הפרומפט. הנה 5 פרומפטים מוכנים להעתקה:

פרומפט 1: Product Viewer

// פרומפט ל-AI: Product Viewer
"Build a React Three Fiber product viewer component:
- Load a .glb model from /models/product.glb using useGLTF
- OrbitControls with autoRotate (speed 2), zoom enabled (min 2, max 8)
- Environment preset 'studio' for clean reflections
- ContactShadows on the floor (opacity 0.4, blur 2)
- Stage component for presentation lighting
- Suspense with a loading spinner fallback
- The Canvas should be 100% width, 500px height
- Mobile: disable autoRotate, lower pixelRatio to 1"

פרומפט 2: Floating Hero Objects

// פרומפט ל-AI: Hero Section עם אובייקטים צפים
"Create a React Three Fiber hero section (100vh):
- 5 floating geometric shapes: 2 spheres, 1 torus, 1 torus knot, 1 octahedron
- Each wrapped in drei Float with different speed and intensity
- Materials: metallic purple (metalness 0.8, roughness 0.2) with slight color variations
- Environment preset 'city' for reflections
- Sparkles component: 100 gold particles, size 2, speed 0.3
- PresentationControls for subtle drag interaction
- Background: dark gradient (#0a0a0a to #1a1a2e)
- On mobile: reduce to 3 shapes, 50 sparkles"

פרומפט 3: 3D Text Hero

// פרומפט ל-AI: טקסט 3D
"Build a React Three Fiber component with 3D text:
- Text3D from drei, font: Inter Bold (provide typeface.json path)
- Text says 'YOUR BRAND' centered with Center component
- Material: MeshPhysicalMaterial, gold color (#ffd700), metalness 1, roughness 0.2
- Float animation wrapping the text (speed 1.5, rotationIntensity 0.3)
- Environment preset 'sunset' for warm reflections
- Rim lighting: directional light from behind (position [0, 3, -5])
- Subtle particles around the text using Sparkles
- The component should accept text as a prop"

פרומפט 4: Scroll-Driven 3D Scene

// פרומפט ל-AI: סצנת 3D מונעת גלילה
"Create a scroll-driven 3D experience with React Three Fiber:
- Use drei ScrollControls (3 pages, damping 0.25)
- Load a .glb model with useGLTF
- On scroll progress 0-0.33: camera zooms in from z=10 to z=5
- On scroll progress 0.33-0.66: model rotates 360 degrees on Y axis
- On scroll progress 0.66-1: camera orbits to top-down view
- All transitions smooth with useFrame and scroll.offset
- drei Html overlays that appear at specific scroll points
- Environment preset 'city', ambient + directional lighting
- Mobile fallback: static image sequence instead of 3D"

פרומפט 5: Interactive Logo / Mascot

// פרומפט ל-AI: לוגו / מסקוט אינטראקטיבי
"Build an interactive 3D element with React Three Fiber:
- A geometric shape (icosahedron or torus knot) as brand mascot
- MeshDistortMaterial from drei: speed 2, distort 0.3, color gradient
- On hover: increase distortion to 0.6, change color smoothly
- On click: burst of Sparkles from the shape position (temporary, 1 second)
- Subtle Float animation when idle
- The shape 'looks at' the cursor using useFrame + mouse position
- Environment map for reflections
- Small footprint: 300x300px, suitable for navbar or sidebar"

טיפים לפרומפטים טובים יותר ל-3D:

• ציינו את הכלי — "React Three Fiber" או "Three.js" או "Spline React component" — אחרת AI עלול לבחור כלי לא מתאים
• ציינו מידות — "Canvas should be 100% width, 500px height" — אחרת תקבלו Canvas שתופס את כל המסך
• ציינו חומרים — "metalness 0.8, roughness 0.2" — אחרת AI ישתמש ב-MeshBasicMaterial שנראה שטוח
• בקשו environment map — "Environment preset studio" — בלי זה אין שיקופים והתוצאה נראית חובבנית
• בקשו mobile fallback — AI לא יוסיף fallback אוטומטית. תמיד ציינו: "On mobile: show static image instead of 3D"
• בקשו Suspense + loading — "Wrap in Suspense with loading indicator" — אחרת המשתמש רואה מסך ריק עד שהמודל נטען

11.12 תבניות מקצועיות — 3D שעובד באמת

לאורך הפרק הזה למדתם את הכלים. עכשיו בואו נראה איך משתמשים בהם בפרויקטים אמיתיים — 4 תבניות מקצועיות שמכסות את רוב השימושים:

תבנית 1: Product Showcase — e-commerce product viewer

// Product Showcase — תבנית מקצועית מלאה
import { Canvas } from '@react-three/fiber';
import {
  useGLTF, OrbitControls, Environment,
  ContactShadows, Html, useProgress
} from '@react-three/drei';
import { Suspense } from 'react';

function Loader() {
  const { progress } = useProgress();
  return <Html center>{progress.toFixed(0)}% loading...</Html>;
}

function Product() {
  const { scene } = useGLTF('/models/sneaker.glb');
  return (
    <primitive
      object={scene}
      scale={2}
      position={[0, -0.5, 0]}
      castShadow
    />
  );
}

function ProductShowcase() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <Canvas
        camera={{ position: [0, 1, 5], fov: 50 }}
        shadows
        dpr={[1, 2]}
      >
        <Suspense fallback={<Loader />}>
          <Product />
        </Suspense>

        <Environment preset="studio" />

        <ContactShadows
          position={[0, -0.5, 0]}
          opacity={0.5}
          blur={2}
          far={4}
        />

        <OrbitControls
          autoRotate
          autoRotateSpeed={1}
          enableZoom
          minDistance={3}
          maxDistance={8}
          maxPolarAngle={Math.PI / 2}
          enablePan={false}
        />
      </Canvas>
    </div>
  );
}

תבנית 2: Hero Background — רקע תלת-ממדי ל-hero section

// Hero Background — אובייקטים צפים ברקע
import { Canvas, useFrame } from '@react-three/fiber';
import {
  Float, Sparkles, Environment,
  MeshDistortMaterial
} from '@react-three/drei';
import { useRef } from 'react';

function FloatingBlob({ position, color, speed }) {
  const meshRef = useRef();

  useFrame((state) => {
    meshRef.current.rotation.x = state.clock.elapsedTime * 0.1;
  });

  return (
    <Float speed={speed} rotationIntensity={0.5} floatIntensity={1}>
      <mesh ref={meshRef} position={position}>
        <sphereGeometry args={[1, 32, 32]} />
        <MeshDistortMaterial
          color={color}
          speed={2}
          distort={0.3}
          metalness={0.8}
          roughness={0.2}
        />
      </mesh>
    </Float>
  );
}

function HeroBackground() {
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: -1 }}>
      <Canvas camera={{ position: [0, 0, 8], fov: 60 }}>
        <FloatingBlob position={[-3, 1, 0]} color="#6366f1" speed={1.5} />
        <FloatingBlob position={[3, -1, -2]} color="#8b5cf6" speed={2} />
        <FloatingBlob position={[0, 2, -3]} color="#a78bfa" speed={1} />

        <Sparkles count={100} size={2} speed={0.3} scale={15} color="#fbbf24" />
        <Environment preset="city" />
        <ambientLight intensity={0.3} />
      </Canvas>
    </div>
  );
}

תבנית 3: Interactive Logo — לוגו או מסקוט שמגיב לעכבר

// Interactive Logo — מגיב ל-hover ולעכבר
import { Canvas, useFrame } from '@react-three/fiber';
import { Float, MeshWobbleMaterial, Environment } from '@react-three/drei';
import { useRef, useState } from 'react';

function InteractiveLogo() {
  const meshRef = useRef();
  const [hovered, setHovered] = useState(false);

  useFrame((state) => {
    // הלוגו מסתכל לכיוון העכבר
    const { x, y } = state.pointer;
    meshRef.current.rotation.x = y * 0.3;
    meshRef.current.rotation.y = x * 0.3;
  });

  return (
    <Float speed={hovered ? 3 : 1.5} rotationIntensity={0.3}>
      <mesh
        ref={meshRef}
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
        scale={hovered ? 1.15 : 1}
      >
        <icosahedronGeometry args={[1, 1]} />
        <MeshWobbleMaterial
          color={hovered ? '#ff6b6b' : '#6366f1'}
          speed={hovered ? 3 : 1}
          factor={hovered ? 0.4 : 0.2}
          metalness={0.7}
          roughness={0.3}
        />
      </mesh>
    </Float>
  );
}

function LogoSection() {
  return (
    <div style={{ width: 300, height: 300, cursor: 'pointer' }}>
      <Canvas camera={{ position: [0, 0, 3.5] }}>
        <InteractiveLogo />
        <Environment preset="sunset" />
        <ambientLight intensity={0.4} />
      </Canvas>
    </div>
  );
}

תבנית 4: Scroll-Driven Product Reveal — מוצר שנחשף בגלילה

// Scroll-Driven Product Reveal
import { Canvas, useFrame } from '@react-three/fiber';
import {
  useGLTF, ScrollControls, useScroll,
  Environment, Html
} from '@react-three/drei';
import { useRef } from 'react';
import * as THREE from 'three';

function RevealProduct() {
  const { scene } = useGLTF('/models/headphones.glb');
  const scroll = useScroll();
  const groupRef = useRef();

  useFrame((state) => {
    const p = scroll.offset; // 0 → 1

    // Phase 1 (0-0.3): zoom in
    state.camera.position.lerp(
      new THREE.Vector3(0, p < 0.3 ? 2 - p * 5 : 0.5, 8 - p * 5),
      0.05
    );

    // Phase 2 (0.3-0.7): rotate product
    groupRef.current.rotation.y = THREE.MathUtils.lerp(
      0, Math.PI * 2,
      Math.max(0, (p - 0.3) / 0.4)
    );

    // Phase 3 (0.7-1): tilt view
    state.camera.position.y = p > 0.7 ? (p - 0.7) * 10 : state.camera.position.y;
    state.camera.lookAt(0, 0, 0);
  });

  return (
    <group ref={groupRef}>
      <primitive object={scene} scale={2} />
    </group>
  );
}

function ScrollReveal() {
  return (
    <Canvas camera={{ position: [0, 2, 8], fov: 50 }} shadows>
      <ScrollControls pages={4} damping={0.3}>
        <RevealProduct />
        <Html position={[3, 2, 0]} distanceFactor={8}>
          <h2 style={{ color: 'white' }}>Premium Sound</h2>
        </Html>
      </ScrollControls>
      <Environment preset="city" />
    </Canvas>
  );
}