Three.js ve GUI kullanımı

 

Merhaba dostlar, bugün bir JavaScript kütüphanesi olan Three.js‘de GUI kullanımına bakacağız.

Bildiğiniz üzere Three.js 3 boyutlu web uygulamaları yapmamızı sağlayan bir kütüphane. Daha önce Three.js scene’ine Blender adlı programda yaptığımız 3D bir objeyi nasıl import edebileceğimizi konuşmuştuk, o yazıya ulaşmak için şu linke tıklayabilirsiniz.

Öncelikle GUI nedir sorusuna cevap verelim; GUI, Graphical User Interface yani Grafiksel Kullanıcı Arayüzü‘dür. Kısaca oluşturduğumuz 3 boyutlu sahnedeki değişkenleri veya objelerin değişkenlerini kontrol edebilmesini sağlar kullanıcıların.

 

 

Şimdi GUI’nin neler yapabileceğine bakalım, yukarıdaki fotoğrafta GUI arayüzünün; butonlardan tutun da slider ile değer girimine kadar çoğu özelliğini görebilirsiniz. Sırayla hepsini nasıl kodlayacağımıza bakalım, sayfanın en altına da projenin bulunduğu linkini paylaşacağım.

 

Three.js’de Scene, Camera, Light ve Küpümüzü tanımladıktan sonra GUI ayarlarına geçiyoruz, bu yazımda o aşamaları atlıyorum ama eminim ileriki bir yazımda üşenmeyip Three.js’i başlangıçtan başlayıp her şeyini anlattığım bir yazı serisi yapacağım ama şimdilik en aşağıya paylaştığım linkten tüm projeye ulaşabilirsiniz.

GUI kütüphanesini projemize eklemek:

1
2
3
//ilk olarak .html dosyamızın başına dat.gui.min.js script'imizi eklememiz gerekiyor ki kütüphanemizi kullanabilelim.

'<script type='text/javascript' src='js/dat.gui.min.js'></script>'

GUI ile değiştireceğimiz tüm özelliklerin ilk parametlerini girmek:

1
2
3
4
5
6
7
8
9
10
11
parameters = {
x: 0, y: 30, z: 0,
color: "#ff0000",
opacity: 1,
visible: true,
material: "Phong",
reset: function() { resetCube() }
};

//bu ilk değerler ile küpümüzün ilk halini ve GUI'deki değişimlerin
//nasıl olacağını tanımlamış olduk.

GUI sınıfımızı oluşturmak ve folder içine aldığımız x, y, z değişkenlerimizi SLIDER ile manipüle etmek:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
gui = new dat.GUI();
//gui sınıfımızı oluşturduk.

var folder1 = gui.addFolder('Posizyon');
var cubeX = folder1.add( parameters, 'x' ).min(-200).max(200).step(1).listen();
var cubeY = folder1.add( parameters, 'y' ).min(0).max(100).step(1).listen();
var cubeZ = folder1.add( parameters, 'z' ).min(-200).max(200).step(1).listen();
folder1.open();

//bir folder içine x, y ve z değerlerimizi aldık, bu folder daha güzel bir
//görüntü vermek için, değerleri bir arada tutmakta.
//min değeri slider'ın ilk değeri, max son değeri, step ise artış değeridir.

cubeX.onChange(function(value)
{ cube.position.x = value; });
cubeY.onChange(function(value)
{ cube.position.y = value; });
cubeZ.onChange(function(value)
{ cube.position.z = value; });

//x, y ve z değerlerimiz değiştiğinde neyi manipüle edecekleri ise bu kod parçasında,
//cube.position değerleri ile küpümüzün x, y ve z eksenindeki pozisyonlarını değiştirebildik.

Seçim Butonu ile Küpün rengini, renk seçim kümesi ile seçmek ve değiştirmek:

1
2
3
4
5
6
7
8
9
var cubeColor = gui.addColor( parameters, 'color' ).name('Küpün Rengi').listen();
cubeColor.onChange(function(value){

cube.material.color.setHex(value.replace("#", "0x"));
});

//gördüğünüz gibi bu özellikte min, max veya step gibi değerler yok,
//bunun sebebi bu özelliğin button gibi çalışmasını istememiz,
//tıklandığında istediğimiz bir özelliğin ortaya çıkması.

Combobox ile Küpün materyal tipini seçmek:

1
2
3
4
5
6
7
8
9
var cubeMaterial = gui.add( parameters, 'material', [ "Basic", "Lambert", "Phong", "Wireframe" ] ).name('Materyal Tipi').listen();
cubeMaterial.onChange(function(value)
{   updateCube();   });

//bu özellik ise combobox ile bir kaç seçenek içinden
//birini seçerek küpümüzü manipüle etmemize yarıyor.
//tabi seçimden sonra bu kodda updateCube fonksiyonunu
//açıyor, updateCube() fonksiyonunu aşağıdaki linkteki
//projenin tam halinden inceleyebilirsiniz.

Checkbox ile Küpümüzün görünürlük özelliğini değiştirmek:

1
2
3
4
5
var cubeVisible = gui.add( parameters, 'visible' ).name('Küp Görünür olsun').listen();
cubeVisible.onChange(function(value)
{   cube.visible = value;   });

//bir checkbox ile true veya false değerlerini cube.visible özelliğine atadık.

Button ile Küpü resetlemek:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
gui.add( parameters, 'reset' ).name("Küpü Resetle");
//bir button ile reset değişkeninin resetCube() fonksiyonunu çalıştırmasını sağladık.

function resetCube(){
parameters.x = 0;
parameters.y = 30;
parameters.z = 0;
parameters.color = "#ff0000";
parameters.opacity = 1;
parameters.visible = true;
parameters.material = "Phong";
updateCube();
}

//resetCube() fonksiyonumuz. ilk parametrelerimiz ile aynı değerlere sahip.

Evet arkadaşlar bugün Three.js kütüphanesinde GUI’nin özelliklerini nasıl kullanacağımıza bakmış olduk, umarım yardımcı olmuştur.
Sözünü tüm yazıda verdiğim gibi bu projeye şu linkten ulaşabilirsiniz.

ahmet

Ahmet Kılınç - Software Developer

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. Ercan şahin dedi ki:

    Selamlar. https://lusion.co/ web adresinde geliştirici böyle bir web sitesi yapmış ve yayınlamış. Fakat https://onexyazilim.com/calismalarimiz
    Bu adreste de başka birş aynı projeyi kopyalamış.
    Ben aynı projeyi kopyalarsam siyah ekranda kalıyor açılmıyor. Bu web sitesini kendi sunucumda nasıl çalıştırabilirim?

Ercan şahin için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.