מדריך · img2threejs
הפיכת תמונה לתלת מימד: מודל שמסתובב באתר שלכם
img2threejs הוא סקיל חינמי בקוד פתוח לקלוד קוד. נותנים לו תמונה אחת של חפץ או דמות, והוא בונה ממנה מודל תלת מימד בקוד של Three.js, בודק את עצמו מול התמונה שלב אחרי שלב, ומחזיר מודל מוכן לאנימציה. אין קובץ תלת מימד כבד, המודל רץ בדפדפן כמו כל קוד אחר באתר.
מה זה img2threejs?
img2threejs הוא פרויקט קוד פתוח בגיטהאב, ברישיון Apache 2.0, שעובד כסקיל בתוך קלוד קוד, Codex, OpenCode ו-Hermes. נכון ל-31 באוקטובר 2026 יש לו כ-19,900 כוכבים, והגרסה האחרונה היא 2.0.0 מספטמבר 2026.
מה שהוא עושה שונה מכלים של "תמונה לתלת מימד" שאולי ניסיתם. הוא לא סורק את התמונה ולא מוריד מודל מוכן. הוא כותב קוד שבונה את החפץ מצורות בסיסיות, צבעים וחומרים, כמו פסל שבונה מחדש לפי תמונה. התוצאה היא פונקציה ב-TypeScript שמחזירה אובייקט של Three.js, הספרייה הנפוצה לתלת מימד בדפדפן.
ב-הגלריה החיה יש עשרות דוגמאות שנבנו ככה: דמויות, כלי נשק ממשחקים, חללית, אי טרופי ועוד. אפשר לסובב כל אחת עם העכבר, לראות את התמונה שממנה היא נבנתה ולקרוא את הקוד.
איך img2threejs בונה מודל מתמונה?
לפי ה-README, הוא עובד בשמונה מעברים, וכל מעבר צריך לעבור בדיקה לפני שממשיכים. בקיצור, הם מתחלקים ככה:
- שלד גס. הצללית והפרופורציות הכלליות.
- מבנה וצורה. החלקים העיקריים והקימורים.
- חומרים ומשטחים. צבע, ברק, מט, שחיקה, לפי הפיקסלים של התמונה.
- תאורה ואינטראקציה. איך זה נראה באור, ומה זז.
- אופטימיזציה. שהמודל ירוץ חלק בדפדפן.
אחרי כל מעבר הסוכן מרנדר את המודל, משווה לתמונה ומתקן עד שהפרטים שמזהים את החפץ עוברים את הסף. לפני שהוא בכלל כותב קוד, הוא עושה רשימה של פרטים קטנים כמו ברגים, קווי חריטה וברק, וכל פרט חייב להתאים לחלק אמיתי במודל.
והמודל לא יוצא "גוש". יש בו נקודות ציר וחיבורים, כך שאפשר להזיז חלקים, להוסיף אנימציה שחוזרת על עצמה, או לתת לגולש לסובב אותו עם העכבר.
איך מתקינים את img2threejs?
צריך Node.js בגרסה 18 ומעלה, Git ו-Python בגרסה 3.10 ומעלה. לא בטוחים מה מותקן אצלכם? תבקשו מקלוד קוד לבדוק ולהתקין מה שחסר.
npx --yes img2threejs@latest install
npx --yes img2threejs@latest doctorהפקודה הראשונה מחברת את הסקיל לכל סוכן שהיא מוצאת במחשב. השנייה מדפיסה שורה לכל סוכן, ו-managed אומר שהוא מותקן. אחרי זה סוגרים את קלוד קוד ופותחים אותו מחדש, אחרת הסקיל לא ייטען.
מעדיפים לא לגעת בטרמינל? מדביקים לקלוד קוד: "תתקין לי את הסקיל img2threejs לפי ה-README בגיטהאב, ותגיד לי כשאפשר להפעיל מחדש". אם עוד אין לכם קלוד קוד, ככה מתקינים אותו בלי טרמינל.
פרומפט מוכן למוצר שלכם
שמים את התמונה של המוצר בתיקיית הפרויקט, ומדביקים בקלוד קוד. הפרומפט באנגלית, כי ככה הסקיל מכיר את המונחים של השלבים שלו:
/img2threejs Rebuild the product in ./product.jpg as a procedural Three.js model.
Fidelity Keep its proportions, silhouette and colours. List the identity-defining
details first (logo area, seams, buttons, gloss vs matte) and drop any
detail you cannot place on a real component.
Runtime Add a slow looping idle rotation and let the visitor orbit it with the mouse.
Gates Do not advance a pass until the side-by-side review passes.
Report Tell me which regions are inferred because the photo does not show them.
When it passes, add it to the hero section of my site, keep it under 500 px tall
on mobile, and show a still image if WebGL is not available.השורה של Report חשובה. תמונה אחת לא מראה את הגב של המוצר, והסקיל ינחש אותו. ככה תדעו בדיוק מה נוחש, ותוכלו להוסיף תמונה מזווית נוספת.
איך שמים את מודל התלת מימד באתר?
אם האתר שלכם נבנה עם קלוד קוד, השורה האחרונה בפרומפט כבר עושה את זה: הוא מוסיף את Three.js, יוצר סצנה עם מצלמה ותאורה, ומכניס את המודל. אם האתר על וורדפרס, וויקס או כל פלטפורמה אחרת, תבקשו מקלוד קוד לייצא דף HTML אחד שמציג את המודל, ותטמיעו אותו כ-iframe או כקוד מותאם.
שלוש בדיקות לפני שמעלים:
- נכנסים מהטלפון ובודקים שהדף לא נתקע בגלילה
- מסתכלים על המוצר מכל הצדדים ומחפשים את החלקים שנוחשו
- מוודאים שיש תמונה רגילה למקרה שהדפדפן לא תומך
רוצים דף בית שלם שבנוי סביב אפקט תלת מימד? על זה יש מדריך לאתר עם הירו בתלת מימד.
תוספים: דמויות מונפשות וקבצי GLB
הסקיל הבסיסי מספיק לרוב המוצרים. למקרים מיוחדים יש תוספים, דרך כלי נפרד בשם img2:
| תוסף | מה הוא מוסיף | גישה |
|---|---|---|
| character | שלד ותנועות לדמויות, עם 12 בדיקות לפני שהדמות נחשבת מוכנה לאנימציה | ציבורי |
| img2glb | הופך תמונה לקובץ GLB, פורמט תלת מימד סטנדרטי | ציבורי |
| cs2 | שחזור סקינים של נשקים מהמשחק Counter-Strike 2 | ציבורי |
| environment | תוסף סביבה, ופרטיו לא מפורסמים | פרטי, צריך הרשאה בגיטהאב |
ה-README ממליץ במפורש לא להתקין את כולם כברירת מחדל. מתקינים רק את מה שצריך.
מה עושים עם הפיכת תמונה לתלת מימד בעסק?
- חנות אונליין: המוצר הראשי מסתובב בעמוד המוצר במקום עוד תמונה סטטית
- דף נחיתה להשקה: אובייקט שזז עם הגלילה, בלי לשלם למעצב תלת מימד
- דמות מותג או קמע שמגיבה לעכבר
- מצגת או הדגמה ללקוח, עם מודל שאפשר לסובב בשיחה
- משחק קטן בדפדפן עם דמויות משלכם
מעדיפים אנימציית תלת מימד מלאה עם תוכנה מקצועית? Blender MCP מחבר את קלוד ל-Blender, וזה כבר עולם של סרטונים ורינדורים.
חשוב לדעת
- זה קירוב, לא צילום. המודל בנוי מצורות וחומרים בקוד. מוצר מורכב יכול לצאת מסוגנן יותר מהמקור.
- צדדים שלא רואים בתמונה מנוחשים. ה-README כותב שתמונה אחת לא מבטיחה דמיון של 100 אחוז, והסקיל מדווח על רמת ביטחון לכל אזור ומבקש עוד זוויות כשזה חשוב.
- זה עולה בטוקנים. הסקיל עצמו חינמי, אבל הבנייה רצה על המנוי שלכם בקלוד קוד. מוצר מפורט עם הרבה מעברים יכול לקחת זמן ומכסה.
- זכויות. בגלריה יש דמויות ממשחקים מוכרים. לאתר של עסק תבנו רק מוצרים ודמויות שלכם.
- בעברית? הסקיל והתיעוד באנגלית. מותר לכתוב לקלוד קוד בעברית, אבל את הפרומפט של הבנייה עדיף להשאיר באנגלית.
השורה התחתונה
img2threejs לא מחליף מעצב תלת מימד במוצר יוקרה. אבל בשביל "המוצר שלי מסתובב בדף הבית" הוא מוריד את הסיפור מהצעת מחיר לשיחה אחת עם קלוד קוד.
שאלות נפוצות על img2threejs
img2threejs חינמי?
כן. הוא קוד פתוח ברישיון Apache 2.0. מה שעולה זה השימוש בקלוד קוד עצמו, כי הבנייה רצה על המנוי או על הטוקנים שלכם.
צריך לדעת תלת מימד או לתכנת?
לא. נותנים תמונה ופרומפט, והסקיל עושה את השלבים ובודק את עצמו. כדאי רק לבדוק את התוצאה מכל הצדדים לפני שמעלים לאתר.
עם אילו סוכנים זה עובד?
לפי ה-README: קלוד קוד, Codex, OpenCode ו-Hermes. ההתקנה מחברת את הסקיל לכל סוכן שהיא מוצאת במחשב.
מה צריך מותקן במחשב?
Node.js בגרסה 18 ומעלה, Git ו-Python בגרסה 3.10 ומעלה. קלוד קוד יכול לבדוק ולהתקין את מה שחסר.
אפשר לקבל קובץ תלת מימד רגיל במקום קוד?
הסקיל הבסיסי מחזיר קוד של Three.js. בשביל קובץ GLB יש תוסף ציבורי בשם img2glb, שמתקינים דרך הכלי img2.