Three JS یک کتابخانه JavaScript است که در یک HTML5 canvas از WebGL استفاده می‌کند تا انیمیشن‌هایی را ارائه دهد که به تنهایی در WebGL امکان ایجاد آنها وجود ندارد. این کتابخانه وظیفه ایجاد جلوه های نوری ، سایه‌ها ، متریال‌ها ، بافت‌ها و مدل‌های هندسی سه بعدی را دارد که ایجاد آن در WebGL بسیار سخت است.
اجزای ضروری
یک برنامه Three JS معمولاً از اجزای اولیه زیر تشکیل شده است:
سازنده Renderer
Renderer یکی از مؤلفه‌های اصلی پروژه‌های Three JS است. این مؤلفه مسئول ارائه انیمیشن‌ها است. چندین Renderer وجود دارد که توسط Three JS ارائه می‌شوند. Syntax لازم برای آماده‌سازی اولیه Renderer در کد زیر آورده شده است:
Renderer ، HTML5 canvas را به عنوان یک پارامتر منتقل می‌کند.
توجه: اگر به سازنده Renderer یک canvas داده نشود ، یکی را برای کاربر ایجاد می‌کند که باید با استفاده از روش AppendChild به DOM اضافه شود.
متد رندر آبجکت Renderer ، Scene را رندر می‌کند.
متد رندر Three JS از Scene و Camera به عنوان پارامترها عبور می‌کند شود.
Scene: این مؤلفه شامل عناصر سه بعدی در یک ساختار درخت‌مانند است.
Camera: این مؤلفه وظیفه تنظیم نمای اجزای قابل مشاهده، در داخل Scene را بر عهده دارد.
نمودار Scene
ریشه نمودار Scene، خود Scene است. فرزندان آن آبجکت‌هایی هستند که باید در داخل Scene ارائه شوند.
نمونه ای از نمودار Scene
یک گره خاص در داخل Scene (به جز ریشه) شامل فرزندانی است که نسبت به خودشان گرایش دارند. به عنوان مثال، اگر یک آبجکت کره به عنوان فرزند یک آبجکت کره دیگر تنظیم شود، تنظیم چرخش برای حوزه والدین باعث می‌شود که کره فرزند در اطراف آن بچرخد.
در اینجا، ویژگی چرخش کره والدین زرد، مقداری به شما داده می‌شود تا بتواند آن را در محور خود بچرخاند. این باعث می‌شود فرزند در یک نقطه ثابت در اطراف والدین خود بچرخد.
توجه: برای بررسی بیشتر در مورد نحوه تنظیم Scene در Three JS ، در این لینک بخوانید.
آبجکت‌ها
آبجکت‌های داخل یک Scene می‌توانند حاوی موارد زیر باشند:
- Mesh
- Geometry
- Material
- Texture
- Light
هر چیزی در داخل Scene یک آبجکت محسوب می‌شود. معمولاً اشکال در داخل Scene با استفاده از آبجکت‌های Mesh قرار می‌گیرند. آبجکت‌های Mesh همان چیزی هستند که متریال و هندسه را به هم متصل می‌کنند.
در Three JS تعدادی شکل هندسی برای انتخاب وجود دارند، و بیشتر آنها می‌توانند برای ایجاد اشکال جدید ترکیب شوند. به همین ترتیب، این کتابخانه باید طیف متنوعی از متریال را ارائه دهند که می‌تواند برای موارد هندسی اعمال شود.
بعضی اوقات از آبجکت‌ها بافت برای wrap کردن آبجکت‌های هندسی در تصاویر به جای متریال استفاده می‌شود.
- تصاویر را می‌توان از فایل دیگری بارگیری کرد.
- تصاویر را می‌توان از HTML canvas تولید کرد.
- آنها را می‌توان از Scene دیگری ارائه داد.
به عنوان مثال، می‌توان با استفاده از TextureLoader یک تصویر را از یک پرونده بارگذاری کرد:
آبجکت‌های نوری نشان دهنده انواع مختلفی از روشنایی‌هایی هستند که می توانند در یک Scene استفاده شوند. آنها برای روشنایی آبجکت‌های موجود در Scene استفاده می‌شوند.
مثال
نمونه‌ای از یک پروژه Three JS را می‌توان در این لینک زیر یافت، که می‌تواند پس از ضربه زدن به ” Run” قابل دسترسی باشد. یک رابط کاربری گرافیکی (GUI) در گوشه بالا سمت راست وجود دارد که می تواند برای کنترل خصوصیات آبجکت‌های موجود در Scene استفاده شود.