Blender’da oluşturulan 3 boyutlu bir Object’i ThreeJS’ye aktarmak

 

Bugün blender’da oluşturulan bir objeyi, threejs scene’ine aktarmayı anlatmaya çalışacağım.

Blender hepimizin çok sevdiği açık kaynak kodlu mükemmel bir 3 boyutlu dizayn programı. Daha önce duymadıysanız veya duyup bir türlü göz atmaya fırsat bulamadıysanız şu linkten dökümantasyonuna ulaşıp nasıl güzel işler yapılabileceğini görerek biraz biraz başlayabilirsiniz.

Konumuza dönelim, blender ile bir tasarım yaptık ve three.js ile bu dizaynı web ortamına taşımak istiyoruz. Öncelikle internette bu işi arattığınızda genelde blender’dan tasarımı .json formatında export edip, Three.js’ye json formatını kullanarak import etmenin anlatıldığını göreceksiniz. Ben bu ve bir diğer yönteme değineceğim bu yazımda.

Bir tasarımı blender’dan .json olarak import edebilmek için three.js kütüphanesini github‘tan indirerek utils>exporters>blender yolunu izleyerek io_three klasörünü kopyalıyoruz ve bilgisayarımızda blender’ı kurduğumuz dosya dizinine girerek …/blender/2.78/scripts/addons dizinine yapıştırıyoruz. Sonrasında Blender’ı çalıştırdığımızda File > User Preferences kısmında yukarıdaki tab’lardan addons kısmına geçiyoruz. Three.js yi bularak aktifleştiriyoruz. Artık .json formatında three.js için blender tasarımımızı export edebiliyor hale gelmiş bulunuyoruz. Tek yapmamız gereken File> export> three.js seçeneğine tıklamak ve Face Materials checkbox’ını işaretleyerek bilgisayarımıza kaydetmek.

Tasarımımızı .json formatında indirdik. Three.js’de bir scene’imiz var ise şu kod ile scene’e ekleyebileceğiz objemizi. Bu konu özel olarak objeleri three’ye eklemek üzere olduğu için temel three.js kullanımını burada anlatmayacağım ama ileri ki zamanlarda baştan bir three.js kullanımı üzerine yazı yazmayı düşünüyorum.

Kodumuza geçelim:

1
2
3
4
5
6
var loader = new THREE.ObjectLoader();
loader.load("test.json", function(obj) {
scene = obj;
camera = obj.children[0];
var ambient = new THREE.AmbientLight( 0xffffff );
});

Şimdi ise benim kullandığım koda ve yönteme geçelim. Öncelikle ben .json olarak değil .obj formatında export ederek kullanıyorum blender tasarımlarımı.

Bir küpümüz var, öncelikle bu küpümüzü File> Export> Wawefront(.obj) seçeneğine tıklayarak export ediyoruz.

.obj dosyamızı export ettikten sonra Three.js scene’imize import edebilmek için şu kodu yazıyoruz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var manager = new THREE.LoadingManager();
var loader = new THREE.OBJLoader(manager);
var fileloader = new THREE.FileLoader();
fileloader.load(
//Objemizin bulunduğu dizin
'.../ObjectModel.obj',
//obje load edildiğinde çalışan fonksiyon
function (data){
var object = loader.parse(data);
console.log(object);
app.scene.add(object);
},
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
//obj load'ı error verirse
function ( xhr ) {
console.error( 'An error happened : ' + xhr );
}
);

Bu şekilde objemizi import etmiş olduk. Şimdi tek çıkabilecek sorun chrome’un local dosya dizininden dosyaları güvenlik sebebi ile kabul etmemesi olacaktır. Bir server üzerinden değil de local dosya dizininden çağıracaksak export ettiğimiz .obj uzantılı dosyamızı, win+r yapıp chrome’u şu şekilde çalıştırarak sorunu çözmüş oluruz:
chrome –allow-file-access-from-files .

Umarım faydalı olabilmişimdir dostlar, tatlı kodlar dilerim.

ahmet

Ahmet Kılınç - Software Developer

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. 23 Temmuz 2017

    […] yaptığımız 3D bir objeyi nasıl import edebileceğimizi konuşmuştuk, o yazıya ulaşmak için şu linke […]

Bir cevap yazın

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.