PV3D Tutorial: Membuat objek 3D menggunakan kelas PV3D

[Bahasa pemrograman ActionScript 3.0 adalah bahasa yang murni menggunakan konsep OOP, diharapkan anda telah terbiasa dengan Object Oriented Programming]

Halo 😀 !! Selamat pagi/ siang/ sore/ malam/ dini hari/!! Semoga hari mu menyenangkan 😉 Melanjutkan postingan sebelumnya tutorial kali ini akan membahas bagaimana menampilkan objek 3D di web browser dengan menggunakan objek 3D bawaan PV3D (Papervision3D). Ada beberapa class objek 3D yang telah di sertakan dalam file swc (baca: swik), walaupun tergolong primitive objects (objek 3D sederhana/ dasar) namun kehadiran mereka sangat berguna, ringan untuk di load dan memungkinkan dimanipulasi sekreatif mungkin :), beberapa sangat berguna untuk kepentingan debugging & testing.

Dibawah ini adalah daftar objek-objek 3D yang disertakan:

1. Plane (kotak)
2. Sphere (bola)
3. Cylinder (silinder)
4. Cone (kerucut)
5. Cube (kubus)
6. Arrow (panah)
7. PaperPlane (pesawat kertas) –> hehe, beneran pesawat kertas yang dulu waktu SD sering kita buat 😀

primitive objects
primitive objects

Untuk menampilkan objek 3D di browser, ada beberapa kelas yang wajib di import:
Scene 3D, viewport3D, camera3D, renderEngine

//import segala yang dibutuhkan
import flash.display.Sprite;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
//kelas Tampilkan3D adalah turunan dari Sprite
public Tampilkan3D extends Sprite
{
//inisialisasi properti dari kelas (tanpa nilai, diberi value di kontruktor)
private var scene:Scene3D;
private var viewport:Viewport3D;
private var camera:Camera3D;
private var renderEngine:BasicRenderEngine;
private var bola:Sphere;
//konstruktor (di run saat program pertama dijalankan)-ingat nama konstruktor harus sama dengan nama kelas dan nama file (Tampilkan3D.as)
public function Tampilkan3D()
{
   scene = new Scene3D();
   camera = new Camera3D();
   bola = new Sphere(); //tidak mengisi properti = menggunakan nilai default dari kelas Sphere
   scene.addChild(bola); //bola ditampilkan pada scene
   viewport = new Viewport3D();
   addChild(viewport);
   renderEngine = new BasicRenderEngine();
   renderEngine.renderScene(scene,camera,viewport);
}
}
}

dengan kode diatas kita bisa menampilkan objek-objek lainnya di viewport, hanya tinggal menginisialisasi, misal pesawatKertas: new PaperPlane; kotak: new Cube; — tapi ingat properti kelas harus dibuat sebelumnya.

code diatas sangat simple dan mudah untuk dipahami, kan? namun sebenarnya bisa dibuat lebih simpel lagi :D. Papervision 3D telah menyediakan kelas BasicView yang berisi kelas2 yang memungkinkan objek 3D ditampilkan. Yang perlu dilakukan hanya meng extends kelas sebagai BasicView (turunan dari BasicView). Sebenarnya apa saja yang berada di dalam kelas BasicView (yang pasti Scene 3D, viewport3D, camera3D, renderEngine sudah termasuk) berikut adalah isi dari kelas BasicView:
—karena kepanjangan jadi saya taruh di pastebin aja: http://pastebin.com/f1be8699e (BasicView.as) — BasicView ternyata masih turunan dari kelas AbstractView

Ok. Langsung saja kita aplikasikan code sebelumnya menggunakan kelas BasicView:

package {
import flash.events.Event;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;

public class Tampilkan3D extends BasicView
{
   private var bola:Sphere;
   public function Tampilkan3D()
{
   bola = new Sphere();
   scene.addChild(bola);
   startRendering(); //fungsi ini bekerja seperti renderEngine yang membuat objek mejadi tampak
}

// fungsi ini berasal dari kelas BasicView yang membuat semua code didalamnya di eksekusi terus menerus
override protected function onRenderTick(e:Event=null):void
{
   bola.localRotationX +=1; //tambahan saja, bila ingin membuat bolanya berputar
   super.onRenderTick();
}
}
}

Hasilnya:

Bola
Bola

(gambar diatas adalah bola dengan segmen 8×6 — sorry nge embed swf nya gagal terus, sebenernya itu bola berputar terhadap sumbu X)

Yup! keren kan 😀 dengan sedikit usaha kita telah bisa menampilkan objek 3D di viewport!

Ok.. semoga memberi pencerahan, silakan bertanya bila ada yang kurang dimengerti. Post berikutnya bagaimana menambahkan material.
Cukup dulu untuk post kali ini, Thanks for stopping by, catch you later ! 😀

Advertisements

12 thoughts on “PV3D Tutorial: Membuat objek 3D menggunakan kelas PV3D

  1. nice tutor bro… rumit jg buat dipahami,
    tapi gue kepingin bikin objek yg lebih kompleks kayak kunci pas gitu tapi 3d, punya saran or tips yg bisa dibagi gak? buat gw yg masi newbie di dunia 3d-3d-an ini

  2. Halo sulton, awal-awal sih emang tampak ngebingungin, tp klo udah biasa oop sih enak2 aja buat ngerti flownya.
    Buat objek custom, bisa. Pertama modeling objek 3d nya di software 3d (saya pake 3ds max) trus export jadi Collada file (DAE) -pake plugin lagi namanya open collada.

    Tar deh, saya buatkan tutorialnya 🙂
    Thanks for stopping by.

  3. klo openGL langsung ‘ngobrol’ ke mesin, jadi performanya bagus, tp gtau apa bisa openGL di terapin di website, oh ada unity 3D klo ga salah,,
    Klo papervision third party buat flash platform

  4. bang, sorry mau nanya nih..
    kalo untuk script di atas yang untuk “mengimport scene3D, viewport3D, camera3D, dan render engine”, itu di ketik nya dimana nya ya , di flex nya kah??
    maklum bang , baru mau belajar nih…

  5. basic view langsung copy paste nya ko ngga bisa gan??maaf bener2 lagi newbi…nggunain ini..mohon pencerahan

  6. Basic view itu kelas yg udah ada dari pv3d nya, dari basic view kita ngambil Scene 3D, viewport3D, camera3D, renderEngine nya (inherit) aja

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