three.js  

 
 

ספריית JavaScript עבור פורמטי קבצים תלת מימדיים

Open Source JavaScript API לקריאה, כתיבה ועיבוד של WebGL, FBX, Collada וכן פורמטים של קבצים OBJ באמצעות ספריית תלת מימד חינמית.

three.js היא ספריית קוד פתוח קלה לשימוש, ספריית JavaScript 3d טהורה המעניקה למפתחי תוכנה את היכולת לעבד קובצי WebGL. ספריית three.js מציעה מעמיסים עבור פורמטים רבים של קבצים כמו FBX, Collada וכן OBJ אך הפורמט המומלץ לייבוא וייצוא נתונים הוא glTF. הדבר הנהדר בפורמט קובץ glTF הוא שהוא מאוד קומפקטי וניתן לשידור בקלות וגם נטען מהר מאוד.

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

Previous Next

תחילת העבודה עם three.js

הדרך הקלה ביותר להתקין את three.js היא באמצעות npm. אנא השתמש בפקודה הבאה להתקנה חלקה. 

התקן three.js באמצעות NPM

npm install --save three 

צור סצנה באמצעות JavaScript

ספריית הקוד הפתוח three.js סיפקה תמיכה ליצירת סצנה תלת מימדית לסיבוב קובייה בתוך יישום JavaScript משלהם. כדי להציג כל דבר עם three.js אנו דורשים סצנה, מצלמה ומעבד. אתה יכול להשתמש במצלמות שונות ובתכונה שלהן כדי להשלים את הסצנה. לאחר מכן, אתה יכול להשתמש במופע renderer ולהגדיר את הגודל שבו נרצה שהוא יעבד את האפליקציה שלנו. אתה יכול לשמור על הרזולוציה הנמוכה או הגבוהה יותר. לבסוף, אתה מוסיף את רכיב המרנדר (<canvas>) למסמך ה-HTML שלך. אתה יכול ליצור קובייה בקלות באמצעות BoxGeometry ושימוש בחומר כדי לצבוע אותה. לאחר מכן, אתה צריך רשת שניתן להכניס לסצנה ולהזיז לפי הצורך שלך.

The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and מעבד. You can use different cameras and their attribute to complete the scene. Next, you can use a מעבד instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the מעבד element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.

The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a רֶשֶׁת that can be inserted into the scene and moved according to your need.

טעינת מודלים תלת מימדיים באמצעות JavaScript

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

צייר קווים בתרשים

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

 עִברִית