Papervision3D Tutorial: Setting Papervision3D di Flex Builder

Hello, belakangan ini banyak banget yang tertarik dan nanyain gimana harus memulai kalo ingin merancang sebuah aplikasi 3D berbasis RIA, karena kurang efektif juga kalo face-to-face explaining, jadi saya putuskan untuk bikin aja tutorialnya, semoga dengan begini developernya jadi makin banyak dan knowledge sharing nya jadi lebih nge-flow, semoga membantu.
Bagi yang sudah pernah membuat CG berupa objek 3D dimanapun membuatnya mungkin akan sedikit diuntungkan karena ada beberapa istilah dan prinsip yang bakal kepake saat berkecimpung di 3D programming.

initial design interactive 3d website
initial design interactive 3d website

Ada beberapa alternatif untuk membuat aplikasi dengan visualisasi 3D yang ringan (dalam hal ini web base ya), bahkan Adobe Flash menambahkan fitur 3D untuk memungkinkan sebuah objek dimanupilasi bukan hanya di dua axis (x,y) tapi juga sumbu z :). Tidak hanya native flash 3D yang menjadi pusat perhatian, tapi framework2 yang lahir dari actionscript dan tumbuh berkembang (yang makin hari menjadi framework yang makin powerful :D) menyita perhatian saya. Beberapa diantarnya:

1. Away3D

2. Sandy3D

3. Papervision3D

Tapi karena judulnya Papervision3D jadi saya hanya akan membahas PV3D sebagai engine terpilih (sebenernya yg lainnya belum nyobain hehe, tapi dari beberapa tes performance dll, PV3D selalu di posisi teratas, CMIIW). Hebatnya lagi project class library ini opensource dan bebas dipergunakan dengan tujuan apapun, kecuali

Untuk memulainya silakan download Class library PV3D terbaru disini: http://code.google.com/p/papervision3d/ download aja yang versi SWC agar lebih compact dan ringan dibawa kemana-mana (emang mau dibawa kmna?) hehe 😀

Sudah? ok kalo sudah silakan buka Flex builder nya dan bikin New Flex Project, lalu paste swc filenya ke folder libs:

pv3d
pv3d di flex project libs

Flex akan secara otomatis menambahkan class library yang sudah siap digunakan. Untuk memastikannya, coba buat kelas baru misalnya Coba.as dimanapun didalam folder src, lalu ketik script dibawah ini,

package
{
import org.papervision3d.objects.DisplayObject3D;

public class Coba
{
   private var objek3d:DisplayObject3D;
   public function Coba()
   {
      objek3d = new DisplayObject3D();
   }
}
}

dan instansiasi kelas nya di file lain, misal di main.mxlm:

<mx:Script>
<![CDATA[
    private var cobaPv3d:Coba = new coba();
]]>
</mx:Script>

apabila program tidak menunjukan error, maka, Papervision3D telah berhasil terhubung dengan project anda dan siap digunakan sesuka hati :D.

Posting selanjutnya: bagaimana menggunakan PV3D untuk membuat objek 3D
so, keep in touch ya 😀

Advertisements

13 thoughts on “Papervision3D Tutorial: Setting Papervision3D di Flex Builder

  1. waw.. keren tutorialnya kang.. !! saya juga seneng sama yang berbau 3d.. !! dan lagi pengen bisa bikin aplikasi 3d.. tp masih pusingg.. 😀

    mau tanya kang.. misal pengen bikin semacam virtual tour sebuah gedung..
    nah kita bikin model gedung sama dalem”nya gedung pake 3dmax.. trus hasil model tersebut.. pengen jadi sebuah aplikasi. dmn si user bisa.. jlan” di dalem gedung tersebut.. dengan tampilan.. hasil dari model 3d yg dibuat di 3dmax.. mesti diconvert kmn.. ?? dan msti pake pemograman apa byr ada navigasinya gtu.. jadi klo klik panah atas.. si user tuh maju.. jadi ky yg jlan” gtu.. !! mohon pencerahannya kang..

    hatur nuhun.. 🙂

  2. Wah bagus rian, jadi ada temen 😀
    Coba buka: https://asyadeeq.wordpress.com/2010/02/24/my-projects-on-progress/
    project pertama.

    Yang harus dilakukan:
    1. Bikin objek dimanapun yang dukung export collada file (DAE), khusus 3ds max harus pake plugin dlu, download aja di http://opencollada.org (ada buat maya jg)
    2. Texture nya di bakin (unwrap)
    3. Di flex tmbah class papervision 3D
    4. Coding deh disitu, bahasanya Actionscript 3

    gitu sih garis besarrnya 🙂

  3. sayamah masih newbie kang.. baru bljr modelling 3d aja.. 😀
    mkasih kang buat infonya.. saya bakal cobain..
    hhmm.. ada alternatif selain flex ga kang.. ky di flash.. atau apa.. hehe.. 😀
    atau cm bs di flex aja.. ?

  4. bsia di flash jg, bukan cuma di flash malah, di tools gratis kaya flash develop jg bisa, asal dukung actionscript 3.0, di notepad jg bisa sih, tinggal download sdk nya kalo niat mah, compile di console 😀 hehe..

    Sip2, mampir2 lagi aja kesini, tutorial papervision3dnya bakal dilanjut terus ko..
    Thnks y

  5. Lam damai, mau ikut bertutur ya, yang dimaksud Kak Rian n Kak asyadeeq itu seperti Visualisasi pada Piramid yang dapat kita jelajahi menggunakan mouse, sperti yang ada di Ms. Encarta Ensiklopedia bukan?
    Kalu memang benar(spertinya benar sih..) mau tanya apakah sangat sulit membuatnya dan bakal membutuhkan waktu lama tidak(untuk Skripsi refrensi nie..), atau dapat dengan mudahkah kita mencari tutorialnya? dan apa kata kuncinya untuk visualisasi seperti ini di Mbah Google…
    Terimakasih untuk pencerahannya 🙂

  6. @dbee: iya, bikin yang kaya encharta jg bisa, bisa lbih ringan malah (performa & size) itulah knpa bisa di simpan di web 🙂

    saran saya, klo ingin membuat yang semacam itu (berbasis web) coba pelajari:
    1. Actionscript 3.0 (object orienteda programming)
    2. tool pembuat objek 3d (sketchup, blender, max, maya – yang bisa export file dae)
    3. Belajar papervision3d

    itu aja sih, klo tutorial papervision3d udah lmayan banyak, cba gugling aja a”papervision3d”
    smoga membantu y 🙂

  7. buatin tutorial dari awal donk……

    aq bingung ko’ langsung ke script…….

    truss cara instalasinya…….

    plisss………

  8. nice web n tutorial, thx to Mr. asyadeeq

    Banyak blog atw web yang penjelasan atau bahasanya kurang dimengerti. kalau disini lumayan mudah 🙂

  9. @lux: flash bisa 3d ko.. buat update? iya ni, blm nemu waktunya, aga sibuk belakangan ini.. someday insyaAlloh gw bikin tutorial dari awal, skalian dokumentasi jg, kalo2 suatu saat lupa 🙂

    @roy: thanks roy :).. yg main itu bukan kelas, dia main app nya, dia di root..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s