THREE.JS Dersleri #1

  • Tarih
  • Yazar
     Mehmet PEŞKETER
  • Görüntülenme Sayısı
     561
  • Kategori
     THREE.JS

Herkese merhaba. Bu yazı serimizde three.js kütüphanesini kullanarak web tabanlı 3 boyutlu uygulamalar oluşturmaya çalışacağız.
Yazımızın sonunda burada(canlı olarak test edebilirsiniz) görmüş olduğunuz prefabrik evi yapmış olacağız. Öncelikle threejs.org sitesinde sol tarafta Download yazan link ile kütüphanemizi indiriyoruz.

Editör olarak istediğiniz editörü seçebilirsiniz. Ben ücretsiz sürüm olan Visual Studio Community 2019 kullanarak devam edeceğim.

VS ile yeni bir proje oluştur diyerek ASP.NET Web Application (.NET Framework) seçiyoruz.

threejs başlangıç

Proje ismini ve oluşturulacağı yeri seçtikten sonra karşımıza çıkan ekranda Empty yi seçiyoruz ve sağ altta Create butonuna basarak projemizi oluşturuyoruz.

threejs başlangıç

Daha sonra resimde gözüktüğü gibi içerisine default.aspx adında boş bir aspx sayfası ve js adında boş bir klasör ekliyoruz. js klsörünün içine engine.js adında boş bir js dosyası ekliyorum ve daha önce indirmiş olduğumuz threejs-master.zip içerisinde ..\three.js-master\build klasörü altında bulunan three.js dosyasını da js klasörü içine kopyalıyoruz.

threejs başlangıç

Artık default.aspx sayfamızı açarak şu kodları yazabiliriz.

threejs başlangıç

Burada yapmış olduğumuz işlemler;
7. satırda => title tagları arasına sayfanın tarayıcıda görünmesini istediğimiz başlığı yazdık (dilediğiniz şeyi yazabilirsiniz)
8. satırda => css kullanarak içeriğimizin kenar boşluksuz tam sayfa gözükmesini sağladık. (şuan için tam sayfa. İleride örnek linkteki gibi responsive yapacağız)
12. satırda => 3 boyutlu sahnemizi göstereceğimiz div elementini oluşturduk. (idsi webgl olmak zorunda değil dilediğinizi yazabilirsiniz. Daha sonra bu idyi kullanacağız)
15. satırda => olmazsa olmaz three.js kütüphanemizi sayfa ekliyoruz.
16. satırda => kendi kodlarımızı yazacağımız engine.js dosyasını sayfamıza ekliyoruz.

Artık engine.js dosyamızı doldurmaya başlayabiliriz. engine.js dosyasına createEnvironment(siz yine istediğiniz ismi kullanabilirsiniz) adında bir fonksiyon yazıyorum.
three.js ile sayfamızda 3 boyutlu sahneler göstermek istediğimizde en az 4 tane şeye ihtiyacımız vardır. Sahne (scene), Kamera (camera), Render işlemlerini gerçekleştirecek olan sınıf (renderer) ve tabiki sahne içindeki 3 boyutlu objeler(küp, silindir, araba vs.). Daha sonra ışık kaynağına da ihtiyacımız olacak.

threejs başlangıç

Burada yapmış olduğumuz işlemler;
2. satırda => sahnemizi oluşturuyoruz. Ekranımızda göstermek istediğimiz objelerin hepsi bu değişkenin içinde yer alacak.
3. satırda => kameramızı oluşturuyoruz. Şuan için persfektif kamera ile devam edeceğiz. İlerleyen derslerde diğer kamera çeşitlerini(orbit kamera vs.) ve nasıl kullanıldıklarını da göstereceğim. Kamerayı oluştururken kullandığımız parametreler sırasıyla > fov=60, aspectratio=pencere genişliği/pencere yüksekliği, near plane=1, far plane=1000. Burada fov açısını 45, 75 vs. değerler yazarak deneyebilirsiniz ve aspect ratio için 16/9 veya 4/3 kullanabilirsiniz. Fakat near ve far plane performans açısından önemlidir. Çünkü far plane kaç birim uzaklığa kadar olan nesnelerin render edileceğini belirler. Near plane de aynı şekilde yakınlığı temsil eder. Çalıştığınız projeye göre belirlemenizi tavsiye ederim. Örneğin bir şehir modelinde sokakta ilerleyen bir karakteriniz varsa bütün şehri sürekli render etmektense karakter ilerledikçe uzaktaki binaların görünür hale gelmesini tercih edebilirsiniz.
4.,5.,6. satırda => renderer değişkenimizi oluşturduk. Ölçülerini pencere ölçüleri ile aynı yaptık.
7. satırda => rendererımızın render methodunu içerisine şimdilik sahne ve kameramızı ekleyerek çalıştırdık.
10. satırda => bu yazdıklarımızın çalışabilmesi için createEnvironment() fonksiyonunu çağırdık.

Bu şekilde projemizi çalıştırıdğımız zaman karşınıza siyah bir ekran gelmeli. Bu şuana kadar herşeyi doğru yaptığınızı gösterir. Artık boş olan sahnemizi doldurmaya geçebiliriz. scene değişkenimizin add methodunu kullarak sahnemize objeler ekleyebiliriz. Mesh tipinde olan bu objeleri oluşturmak için three.js bizden objelerin bilgilerinin tutulduğu(vertex, normal, indices vs.) bir geometry ve materyal değişkeni ister. Biz 4. satırda three.js içerisinde hazır gelen objelerden Box objesini kullanacağız. Materyal olarakta MeshBasicMaterial kullanacağız. Materyalimizi şimdilik sadece color parametresi ile oluşturduk. İlerleyen derslerde farklı materyal tipleri ve texture kaplamalara değineceğiz.

threejs başlangıç

Fakat projenizi çalıştırdığınızda tekrar siyah bir ekranla karşılaşacaksınız. Çünkü position değeri verilmemiş her obje (box, camera, light vs.) default olarak 0,0,0 koordinatlarında oluşturulur. Şuan oluşturduğumuz küp ve kamera içiçe olduğundan hiçbir şey göremiyorsunuz. Bunun için ister objemizi ister kameramızı oynatmayı seçebiliriz. Bunun için aşağıdaki kodlarıda engine.js dosyamıza ekliyoruz.

threejs başlangıç

Kırmızı küpümüzü görmeyi başardık ama sanki kameramızın odağı küpte değil. Küp biraz sol aşağıda kaldı. Onun içinde camera sınıfımızın bize sunduğu lookAt fonksiyonu ile kameramızın bir nevi targetini ayarlamış oluyoruz.

threejs başlangıç

Sonuç olarak aşağıdaki gibi bir ekranla karşılaşacaksınız. Bu yazıyı burda bırakıyorum. Bir sonraki yazıda görüşmek üzere.

threejs başlangıç

Dersi video olarakta izleyebilirsiniz.

Paylaş: