Three.js ilə 3D qrafika infrastrukturu

Three.js ilə 3D qrafika infrastrukturu

15.03.2023

1269

Three.js nədir?

Three.js ilk dəfə 2010-cu ilin aprelində GitHub-da Rikardo Kabello tərəfindən paylaşılmışdır. Kod əvvəlcə Adobe Flash tərəfindən istifadə edilən ActionScript dilində işlənib hazırlanmış, sonra 2009-cu ildə JavaScript-ə köçürülmüşdür.

 

Three.js, veb səhifələrinə 3D qrafika əlavə etmək üçün istifadə olunan açıq mənbəli bir JavaScript kitabxanasıdır. Bu texnologiya, veb səhifələri daha interaktiv və gözəl etmək üçün istifadə edilir və yeni dizayn imkanları yaradır.

 

Three.js brauzerdə necə işləyir?

 

Bunun üçün WebGl-dən istifadə edilir. WebGL, veb səhifələrdə 2D və 3D qrafikanı rahatlıqla tətbiq edilməsini təmin etmək üçün istifadə olunan bir web texnologiyasıdır. WebGL (Web Graphics Library), veb brauzerlərində çoxqatlı, çoxmənbəli 3D qrafika və texniki effektlər təmin etməyə imkan verən bir JavaScript API-sidir.

WebGL, bir çox fərqli brauzer tərəfindən dəstəklənir. Bu, WebGL tətbiqlərinin müstəqil formada və əlavə pluginlər tələb etmədən müxtəlif platformalarda çalışmasına imkan verir.

 

 

  1. Three.js-in Əsas xüsusiyyətləri:

 1. 3D Modelerlərin İnteqrasiyası

  Three.js, Blender, Maya və 3ds Max kimi populyar 3D modelerlər ilə inteqrasiya edilə bilir. Bu, 3D modelerin veb səhifələrində rahatca göstərilməsinə imkan verir.

 

 2. Shaderlər və Materiallar 

 Three.js rəng və material effektlərini yaratmağa imkan verən güclü bir shader sistemi ilə gəlir.

 


 

 

    1. Materiallar
    2.  

     

    1. Materiallar Three.js-də 3D obyektlərin rəngini, görüntüsünü və bu kimi başqa xüsusiyyətlərini tənzimləmək üçün istifadə olunan funksiyalardır. Materiallar obyektin fiziki görünüşünü müəyyənləşdirmək üçün istifadə olunurlar. Nümunə olaraq, bir materialın aşağıdakı xüsusiyyətləri göstərmək olar:
    2.  
    3. 1. Color:  Obyektin rəngini tənzimləmək üçün istifadə olunur  
      1. 2. Bump Map:  Obyektin qabarma xüsusiyyətini tənzimləyir 
      1. 3. Opacity / Transparency:  Materialın şəffaflığını tənzimləyir
    4.  

     

     

    1.  
    2.  

     

Shader-lər

  Shaderlar, 3D obyektlərin materiallarını tənzimləmək üçün istifadə edilən daha ətraflı və əlverişli alətlərdir. Shaderlar gözəl material effektləri, rənglər və interaktiv animasiya yaratmağa imkan verir. Shaderlar obyektlərin görünüşünü daha kompleks və ya müasir effektlər əldə etmək üçün kodla tənzimləməyə imkan verir.

 

Shaderlər iki yerə bölünür:

1. Vertex Shader: Bu shader 3D obyektlərin konfiqurasiyasını və mövqeyini tənzimləmək üçün istifadə edilir. Obyektlərin hansı bölgələrə düzələcəyi və necə hərəkət etdiyi kimi şeyləri tənzimləməyə kömək edir.

2. Fragment Shader:  Bu shader obyektlərin görüntüsünü və rəngini tənzimləmək üçün istifadə edilir. Materiallar və görüntünün detallarını tənzimləməyə imkan verir.

 

 

 VR və AR Dəstəyi

 Three.js, Virtual Reality (VR) və Augmented Reality (AR) tətbiqlər üçün dəstək verir.Bu, istifadəçilərinizə ən son texnologiyaları təcrübə etmək imkanı yaradır.

 

Open Source olması

  Three.js, open source layihədir və GitHub-da public olaraq paylaşılır. Bu, texnologiyanı inkişaf etdirmək üçün böyük bir community-si vardır. 

 

Bu bloqumuzda Sizə Three.js haqqında ilkin məlumat verdik. Növbəti bloqumuzda isə artıq Three.js vasitəsilə müəyyən kodlar yazacağıq. Sizə maraqlı bir surprizimiz olacaq 😉. 

 

Xoş Kodlamalar🚀

 

Məqaləni hazırladı: Ramin Məmmədzadə

Təsdiqlədi: Əlinemət İsiyev