קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

הצגת עיבוד תלת מימד שינתה את האינטראקציה של המשתמשים עם טכנולוגיות האינטרנט. בתור התחלה, אפליקציות אינטרנט הפכו לסוחפות יותר, ומספקות חוויה מרתקת ואינטראקטיבית דרך דפדפן האינטרנט.

טכנולוגיה זו כבר אומצה בשקיקה על ידי תחומי המשחקים והמציאות הרבודה/וירטואלית. הוא מציע דרך מציאותית וסוחפת לאינטראקציה עם אלמנטים וירטואליים.

גלה כיצד לעבד אובייקטים תלת מימדיים ביישום React.

היסודות של מידול ותכנות תלת מימד

לפני שתתחיל עם עיבוד תלת מימד, יש כמה נקודות שאתה צריך להיות מודע אליהן:

  • אובייקטים תלת מימדיים מכילים נקודות בודדות, או קודקודים, המגדירים את המבנה שלהם בתלת מימד. צירוף נקודות אלו יוצר פרצופים המרכיבים את צורת האובייקט על המסך.
  • לדפדפנים מודרניים יש את היכולת המובנית לעיבוד תלת מימד באמצעות טכנולוגיות כמו WebGL. הם עושים זאת על ידי ניצול הכוח של יחידת העיבוד הגרפית במכונה שלך כדי להציג מודלים וסצנות תלת-ממדיות במהירות.
  • כל אובייקט תלת-ממדי שהדפדפן שלך מעבד מורכב משלושה רכיבים עיקריים. אלו הם הסצינה, המצלמה והמעבד, ולכולם תפקיד מכריע. הסצנה מספקת את הפלטפורמה הבסיסית להגדרת כל האלמנטים התלת-ממדיים שלך, כולל אורות ומצלמות. המצלמה מאפשרת לצפות באובייקט התלת-ממדי מזוויות שונות. לבסוף, המעבד עולה ומציג את הסצנה על גבי אלמנט HTML בד.
    instagram viewer

עיבוד תלת מימדי עם Three.js ו-React Three Fiber

Three.js היא ספריית JavaScript שבה אתה יכול להשתמש כדי להציג אובייקטים תלת מימדיים בדפדפן אינטרנט. באמצעות הרכיבים המובנים שלו, אתה יכול ליצור ולעבד בקלות אובייקטים תלת מימדיים בדפדפן שלך לצד תכונות אחרות של אפליקציית React שלך.

חבילת ה-react three-fiber עובדת על גבי Three.js. זה מפשט את תהליך השימוש ברכיבי Three.js ליצירה ועיבוד של אובייקטים תלת מימדיים בדפדפן. מעניין שזה גם מספק התאמה אישית ווי תגובה זה שימושי בעת יצירת אובייקטים תלת מימדיים ב-React.

עיבוד אובייקטים תלת מימדיים ביישום React

בצע את השלבים הבאים כדי להציג צורה תלת-ממדית פשוטה בדפדפן שלך, כמו גם מודל תלת-ממד שנוצר בבלנדר. אם אתה לא מכיר את הבלנדר, למד כיצד להתחיל בתור מתחיל.

צור אפליקציית React, הפעל את הטרמינל שלך כדי להפעיל את הפקודה למטה, והתקן את התלות הנדרשת:

npm להתקין שלושה @react-three/fiber @react-three/drei

התקן את החבילות Three.js, react-three-fiber ו-react-three-drei. ספריית react-three-drei פועלת לצד react-three-fiber ליצירת סצנות ואובייקטים תלת מימדיים.

עיבוד צורה תלת מימדית

אתה יכול להציג צורת קופסה תלת-ממדית פשוטה בדפדפן עם מעט מאוד קוד. פתח את ה src/app.js קובץ, מחק את כל קוד ה-boilerplate React, והוסף את הדברים הבאים:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא {בַּד} מ"@react-three/fiber";
יְבוּא {OrbitControls} מ"@react-three/drei";
פוּנקצִיָהקופסא() {
לַחֲזוֹר (
<רֶשֶׁת>
<boxBufferGeometryלְצַרֵף ="גֵאוֹמֶטרִיָה" />
<meshLambertMaterialלְצַרֵף="חוֹמֶר"צֶבַע="ורוד עז" />
רֶשֶׁת>
 )
}
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
<divclassName="אפליקציה">
<divclassName="כותרת אפליקציה">
<בַּד>
<OrbitControls />
<אור הסביבהעָצמָה ={0.5} />
<זַרקוֹרעמדה={[10,15,10]} זָוִית={0.3} />
<קופסא />
בַּד>
div>
div>
 );
}

הקוד הזה עושה את הדברים הבאים:

  • ה קופסא רכיב משתמש ברכיבי mesh, boxBufferGeometry ו-meshLambertMaterial מ-react-three-fiber כדי לעבד תיבת תלת-ממד. שלושת הרכיבים הללו עובדים יד ביד כדי ליצור את צורת הקופסה.
  • הרכיב boxBufferGeometry יוצר את התיבה וקוד זה מגדיר את תכונת הצבע של רכיב meshLambertMaterial לוורוד חם.
  • לאחר מכן הוא מעבד את רכיב ה-Canvas שמכיל את רכיב הקופסה עם אור סביבה, זרקור וערכת מאפייני רכיבי Orbit Controls.
  • תכונת רכיב האור הסביבתי מוסיפה אור רך לקנבס. רכיב ה-spotLight מוסיף אור ממוקד ממיקום מסוים עם זווית של 0.3. לבסוף, רכיב OrbitControls מאפשר לך לשלוט במצלמה סביב האובייקט התלת-ממדי.

יבא ועבד את רכיב app.js בקובץ index.js וסובב שרת פיתוח כדי להציג את התוצאות בדפדפן שלך בכתובת http://localhost: 3000.

עבד מודל תלת מימד שנוצר בבלנדר

בלנדר הוא כלי קוד פתוח המשמש קריאייטיבים בתחומים שונים ליצירת מודלים תלת מימדיים, אפקטים חזותיים ויישומי תלת מימד אינטראקטיביים. אתה יכול להשתמש בבלנדר כדי ליצור מודלים תלת מימדיים עבור יישום האינטרנט שלך.

עבור הדרכה זו, תעבדו דגם BMW 3D לפי ביצועי SRT זמין ב- Sketchfab.

קרדיט: RadeonGamer/ Sketchfab
ייחוס Creative Commons

כדי להתחיל, הורד את הדגם מ-Sketchfab ב-GLTF (פורמט שידור של GL). פורמט זה מקל על רינדור מודלים תלת מימדיים בדפדפן. לאחר השלמת ההורדה, פתח את תיקיית הדגם והעביר את קובץ הדגם לספרייה הציבורית בתוך אפליקציית React שלך.

כעת, עבור לקובץ app.js שלך ואכלס אותו בקוד למטה.

  • ייבא את הרכיבים הבאים: 
    יְבוּא {useGLTF, Stage, PresentationControls} מ"@react-three/drei";
  • צור את רכיב הדגם והוסף את הקוד שלהלן: 
    פוּנקצִיָהדֶגֶם(אביזרים){
    const {scene} = useGLTF("/bmw.glb");
    לַחֲזוֹר<פְּרִימִיטִיבִילְהִתְנַגֵד={סְצֵינָה} {... אביזרים} />
    }
    יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
    לַחֲזוֹר (
    <divclassName="אפליקציה">
    <divclassName="כותרת אפליקציה">
     dpr={[1,2]} 
     מצלמת צללים={{fav: 45}}
     style={{"עמדה": "מוּחלָט"}}
     >
     מהירות={1.5} 
    גלוֹבָּלִי zoom={0.5}
     polar={[-0.1, מתמטיקה.פאי / 4]}
     >
    <שלבסביבה={ריק}>
    <דֶגֶםסוּלָם={0.01} />
    שלב>
    בקרות מצגת>
    בַּד>
    div>
    div>
     );
    }
  • ה-useGLTF hook מספריית React-three-drei מגדיר משתנה סצנה ומקצה לו את הערך של קובץ המודל הממוקם בנתיב "/bmw.glb". לאחר מכן, הרכיב מחזיר אובייקט פרימיטיבי שמניח את הסצנה למודל התלת-ממד.
  • אלמנט ה-Canvas מציג את הרכיבים העיקריים המרכיבים את הדגם, עם המאפיינים שצוינו, כגון יחס פיקסלים של מכשיר (DPR), צללים, זווית מצלמה וסגנון.
  • לאחר מכן אתה מציין את המאפיינים של רכיב PresentationControls כגון מהירות וזום גלובלי. מאפיינים אלה מגדירים כיצד תשלוט בדגם על המסך.
  • לבסוף, הגדר את רכיב Stage שמעלה את הדגם על מסך הדפדפן.

הפוך את שרת הפיתוח כדי לעדכן את השינויים באפליקציה שלך. אתה אמור לראות את הדגם מעובד בדפדפן שלך.

עיבוד מודלים תלת מימדיים ביישום האינטרנט שלך

עיבוד מודלים תלת מימדיים ביישומי האינטרנט שלך יכול להציע מספר יתרונות, כמו שיפור חווית המשתמש על ידי מתן תחושת תלת מימד מציאותית ואינטראקטיבית יותר. כתוצאה מכך, משתמשים יכולים להתחבר טוב יותר עם המוצר.

עם זאת, לעיבוד אלמנטים תלת-ממדיים יכולים להיות חסרונות כגון השפעה שלילית על ביצועי האפליקציה. מודלים תלת-ממדיים דורשים יותר משאבים לעיבוד, מה שעלול לגרום לטעינת האפליקציה שלך לאט יותר.