Mengenal Three.js, Library JavaScript untuk Membuat Objek 3D pada Browser

Three.js adalah library JavaScript untuk membuat game dan aplikasi 3D. Three.js menggunakan WebGL yang mana merupakan API JavaScript untuk merender grafik 2D dan 3D interaktif yang native browser tanpa memerlukan plugin browser tambahan. Pada dasarnya kita dapat menggunakan API WebGL secara langsung untuk menampilkan model 3D. Akan tetapi Three.js menyederhakan struktur program yang kita tulis terutama untuk pengembangan grafik 3D yang kompleks. Ada beberapa high-level library untuk rendering 3D selain Three.js, diantaranya adalah PhiloGL, Scene.js, dan GLGE. Pada artikel ini kita akan bahas Three.js karena library ini yang paling banyak dipakai dengan kontributor mencapai 560 orang. Three.js dapat dijalankan di semua browser yang telah mendukung WebGL.

Three.js pertama kali dirilis pada bulan April 2010 oleh Ricardo Cabello melalui repositorinya di Github. Awalnya Three.js dikembangkan dengan bahasa pemrograman ActionScript, tapi kemudian pada tahun 2009 ditulis ulang dengan bahasa JavaScript dengan alasan JavaScript tidak terikat platform apapun (berbeda dengan ActionScript yang bernaung di bawah Adobe) dan tidak memerlukan proses compile saat hendak dijalankan. Dan dengan adanya WebGL, proses rendering menjadi lebih mudah karena Paul Brunt (salahsatu kontributor Three.js) hanya tinggal memasukkan WebGL sebagai modul di dalamnya dan tidak perlu lagi membuat renderer yang baru.

Adapun fitur-fitur yang tersedia pada Three.js hingga saat tulisan ini dipublikasikan, diantaranya:

• Renderers: WebGL, <canvas>, <svg>, CSS3D, DOM, Software; efek: anaglyph, crosseyed, stereo dan lain-lain
• Scenes: menambah dan menghapus objek pada saat program berjalan; fog
• Cameras: perspektif dan orthografik; controllers: trackball, FPS, path dan lain-lain
• Animation: morph dan keyframe
• Lights: ambient, direction, point, spot and hemisphere lights; shadows: cast and receive
• Materials: Lambert, Phong dan lain sebagainya - lengkap dengan tekstur, bayangan halus dan lain sebagainya
• Shaders: akses penuh ke semua fitur WebGL; lens flare, depth pass dan extensive post-processing library
• Objects: meshes, particles, sprites, lines, ribbons, bones dan lain-lain - lengkap dengan semua tingkat kerincian
• Geometry: plane, cube, sphere, torus, teks 3d dan lain-lain; modifiers: lathe, extrude dan tube
• Loaders: binary, image, JSON dan scene
• Utilities: seperangkat fungsi waktu dan matematika 3D termasuk frustum, quaternion, matrix, UV dan lain-lain
• Export/Import: fungsi untuk membuat file JSON yang kompatibel dengan  Three.js dari: Blender, CTM, FBX, 3D Max, dan OBJ
• Dukungan: dokumentasi API masih dalam tahap melengkapi penulisan, adapun forum publik dan wiki sudah beroperasi dengan penuh
• Contoh-contoh: Lebih dari 150 file contoh kode program, termasuk di dalamnya font, model, tekstur, suara dan file pendukung lainnya.

Selain fitur-fitur yang sudah tersedia dengan lengkap untuk mendukung pengembangan aplikasi atau game 3D berbasis HTML5, Three.js juga sudah memiliki beberapa aplikasi pendukung berbasis GUI yang dikembangkan oleh komunitas untuk membantu proses pengembangan menjadi lebih cepat, diantaranya:

• three.js editor - http://threejs.org/editor/
• ThreeScene - http://errolschwartz.com/projects/threescene/
• ThreeNodes - http://idflood.github.com/ThreeNodes.js/
• ThreeInspector - http://zz85.github.io/zz85-bookmarklets/threelabs
• ThreeFabs - http://blackjk3.github.com/threefab/

Bila Kamu tertarik buat ngulik Three.js, Kamu bisa dapat mulai dari websitenya di threejs.org. Kamu bisa mencoba beberapa aplikasi yang dibuat dengan menggunakan Three.js yang sudah dipampang di halaman beranda website Three.js. Untuk mencoba Three.js, Kamu bisa mulai dari halaman Example yang berisi contoh-contoh kasus, atau Kamu bisa langsung masuk ke halaman dokumentasinya untuk memulai panduan penggunaan. Selain itu, beberapa resource penting bisa Kamu temukan di halaman wiki pada repo Githubnya.

Selamat mencoba :D

 

Sumber: Threejs.org, Github.com, wikipedia.org