Flash ve Papervision3D ile 3D Animasyon

30 Kasım 2007 – 16:23

Flash içerisinde 3D animasyon geçen yıla kadar hemen hemen hayal sayılıyordu.Her ne kadar 3D başlığı altında animasyonlar yapılsada biz bunların gerçek anlamda 2 li koordinat sisteminin dışına çıkmadığını biliyorduk.Flash takipçileri mutlaka papervison3D hakkında birşeyler duymuşlardır.Papervision3D flash için 3D moturu hazırlıyor.
Papervison 3D sınıfını  aşağıdaki adresten indirebilirsiniz.Bu makalede çok detaya girmeden nasıl kullanabileceğinizi anlatmaya çalışağım.

  1. //Bizim için gerekli olan sınıflar import ediyoruz
  2. import org.papervision3d.scenes.*;
  3. import org.papervision3d.cameras.*;
  4. import org.papervision3d.objects.*;
  5. import org.papervision3d.materials.*;
  6. //Yeni bir MovieClip oluşturuyoruz
  7. var holder:MovieClip = new MovieClip();
  8. //Movieclibi koordinatlarını sahnenin ortasına gelecek şekilde yerleştiriyoruz.
  9. holder.x = stage.stageWidth / 2;
  10. holder.y = stage.stageHeight / 2;
  11. //Movie Clibi display liste ekliyoruz.
  12. addChild(holder);
  13. //Yeni bir sahne(scene) oluşturuyoruz.Ve arguman olarak holder movieclibin gönderiyoruz.
  14. //holder movie clibimiz sahneye tutacak diyebiliriz
  15. var scene:Scene3D = new Scene3D(holder);
  16. //yenibir camera oluşturuyoruz.Bu arada eğer herhangi bir kameranız yoksa ekrandaki hiç bir
  17. //şeyi göremezsiniz
  18. var camera:Camera3D = new Camera3D();
  19. //kütüphanemizde yer alan air logosunu yeni bir bitmap material olarak
  20. //kullanıyoruz.Tabii ki kütüphanedeki logunun linkage ID vermenzi gerekiyor.
  21. var imageMat:BitmapAssetMaterial = new BitmapAssetMaterial("air");
  22. //burada materyalimizi iki yönlü olmasını saglıyoruz
  23. //Default olarak bu true geliyor.yani materyalin sadece tek tarafı görükücektir.
  24. imageMat.oneSide = false;
  25. //Materyalimizin smooth özelliğini devrey sokuyuruz
  26. //be şekilde bozulmaları engelliyebiliriz.
  27. imageMat.smooth = true;
  28. //Burada bir çember oluşturduğumuzu düşünün.Çemberin radyanını 820 olarak ayarlıyoruz
  29. var radius:Number =820;
  30. //Buradaki "angle" bizim açımız, okuldan hatırlarsak bir dairenin açısının
  31. //360 derecedir.Ama biliyoruzki flash derece kavramı ile çalışmıyor
  32. // " Math.PI * 2 " iki yarı dairenin birleşmesi demek yani bir tam daire
  33. //yani Math.PI = 180 derecedir. bizim bunu 8 bölmemizin sebebi ise
  34. // ekrana 8adet logo eklemek istememiz.Bu sayede her bir logu arasındaki ölçü eşit olacaktır
  35. var angle:Number = (Math.PI * 2) / 8;
  36. //İkinci açımız ise mouse her hareket ettiğinde değişecek olan açı
  37. var angleX:Number=0;
  38. //Burada for loop kullanarak logo sayısını arttırıyoruz.
  39. for (var i:Number=0; i<8; i++) {
  40.   //Burada her loop ta yeni bir plane oluşturuyoruz
  41.  //plane verilen ilk parametre imageMat materyalimiz
  42.  //İkinci ve üçünçü parametremiz materyalimizin x ve y koordinatları
  43.  //Dördüncü ve beşimiz materyalimiz ise resmin üzerindeki denetim noktaları
  44.  //Numara arttıkça materyal üzerinde çizilen üçgen sayısı artacaktır.Bu çgen sayısı
  45.  //Materyalin nekadar iyi gözükeceğini belirliyor
  46.  //Tabii üçgen sayısı artıkça performans düşecektir
  47.  var plane:Plane = new Plane(imageMat, 304, 264, 10, 10);
  48.  //Materyalimizi tutan plane ait x ve y koordinatları
  49.  // x koordinatı ayarlıyoruz.Buradaki sin ve cos açıklamalrını başka bir makalede değineceğim
  50.  //Sadece birşeye değinmek istiyorum
  51.  //eğer bu animasyonu 2d oalrak yapmak isteseydik "z" koordinatına değil y koordinatına
  52.  // Math.sin in açısını vericektik.
  53.  plane.x = Math.cos(i * angle) * radius;
  54.  // z koordinatını ayarlıyoruz
  55.  plane.z = Math.sin(i * angle) * radius;
  56.  //Plane donme açısını burada hesaplıyoruz/
  57.  plane.rotationY = (-i * angle) * (180/Math.PI) + 270;
  58.  //Flashtaki display list mantığıyla papervisiondaki liste mantığı aynı
  59.  //oluşturduğumuz plane leri sahnenin içine koyuyoruz.
  60.  scene.addChild(plane);
  61. }
  62. //on enter frame eventini ayarlıyoruz.Sahneyi girer girmez çalışacak olan fonksiyonu belirliyoruz
  63. this.addEventListener(Event.ENTER_FRAME,run);
  64. function run(e:Event):void {
  65.  //Buradaki angle X cameranın hareketınde kameranın nerde yer alcagını belirliyor
  66.  angleX += (this.mouseX - 200) * 0.001;
  67.  //cameranın x posizyonunu ayarlıyoruz
  68.  camera.x = Math.cos(angleX) * 1000;
  69.  //camera nın z pozisyonunu ayarlıyoruz
  70.  camera.z = Math.sin(angleX) * 1000;
  71.  //burada camerayı render ediyoruz
  72.  scene.renderCamera(camera);
  73. }

Papervision 3D Sınıfı
http://papervision3d.googlecode.com/files/Papervision3D_1_5.zip

Google Code sayfası
http://code.google.com/p/papervision3d/downloads/list

Papervision3D web sitesi
http://papervision3d.org/

Papervison3D Blog
http://blog.papervision3d.org

Papervison3D Wiki
http://wiki.papervision3d.org/index.php?title=Main_Page

Kaynak Dosyalar
Kolay Gelsin

Engin!

Bu makale ile ilgili olabilecek yazılar



  1. 2 Responses to “Flash ve Papervision3D ile 3D Animasyon”

  2. papervision3d sınıfını nasıl yükleyeceğiz? bu konuda bilgi verebilirmisiniz? ayrıca kodlarda olmaması gereken syntax hataları alıyorum. bunun sebebi sınıfın yüklenememiş olmasımıdır?

    By no name on Oca 25, 2008

  3. Merhaba
    Sınıfların bulunduğu klasörü siteden indirdikten sonra

    http://papervision3d.googlecode.com/files/Papervision3D_1_5.zip

    “PV3D_1_5/src” içerisindeki klasörleri fla dosyasının bulunduğu klasörün içine atman gerekiyor.Daha sonra ise herhangi bir kod yazmadan aşağıdaki sınıfları fla dosyasına import et;

    import org.papervision3d.scenes.*;
    import org.papervision3d.cameras.*;
    import org.papervision3d.objects.*;
    import org.papervision3d.materials.*;

    Eğer herhangi bir hata vermediyse sınıfları doğru bir şekilde import etmişsin demektir.
    Bu yol uzun geldiyse yukarıdaki dosyaları indir kod kısmında import edilen yerlere kadar sil, bu kadar.

    Papervison3d sınıfının 2.0 versiyonu cıktı bır ay once kadar, ama malesef deneme şansım olmadı.Yukarıdaki ise 1.5 versiyonuna ait bir örnek.Bilgin olsun.

    Kolay gelsin

    By Engin Yöyen on Oca 25, 2008

Yorum Ekleyin


Creative Commons License İçerik Hakkı Engin Yöyen'e ait olup sitedeki makaleler Creative Commons Attribution-Noncommercial 3.0 Unported lisansı ile lisanslanmıştır.