Ngoprek JSC3D

 Pengenalan :

Project ini menyediakan viewer 3d object untuk mempresentasikan model 3d dan scene kecil di halaman web, JSC3D dikodekan seluruhnya dalam javascript dan membutuhkan canvas HTML untuk melakukan interaksi dan rendering. JSC3D tidak ditargetkan untuk semua kebutuhan engine 3d. Dibuat khususnya untuk sharing desain online dan pameran produk-produk. Saat ini JSC3D dibuat secara murni dengan sofware javascript dengan memberdayakan teknologi canvas 2d dan tidak bergantung pada WEBGL ataupun plugin-plugin. Didesain untuk secara luas mendukung kebanyakan browser yg support operasi HTML5 canvas. JSC3D telah dites pada browser Opera, Chrome, Firefox, IE9 dan banyak lagi. Versi modifikasi untuk Microsoft IE versi yang kurang dari 9 juga tersedia.

untuk mendownload aplikasi silahkan klik link berikut ini :
Link jsc3d-full-0.9.8.zip
setelah di ekstrak maka akan terlihat beberapa contoh aplikasi yang terdapat pada folder "demos". Pada kesempatan kali ini, penulis akan mencoba mengotak-atik source code pada file "earth.html"

var scene = new JSC3D.Scene(); scene.addChild( createSphereMesh('earth', 1, mat, 'models/galileo.jpg') );
scene.addChild( createSphereMesh('cloud', 1.05, mat, 'models/cloud.png') ); viewer.replaceScene(scene);

pada file earth.html terdapat suatu fungsi createSphereMesh dimana pada parameter terakhir merupakan letak file texture dari bola dunia yang pada contoh diatas terdapat juga texture awan, ditunjukkan dengan gambar berikut ini:

penulis akan mencoba untuk mengganti texture globe tersebut yang gambarnya bisa dicari di internet, akhirnya koding nya menjadi seperti berikut:

var scene = new JSC3D.Scene(); scene.addChild( createSphereMesh('earth', 1, mat, 'models/earth.png') );
// scene.addChild( createSphereMesh('cloud', 1.05, mat, 'models/cloud.png') ); viewer.replaceScene(scene);

Pada mulanya sphere pertama texture gambarnya adalah galileo.jpg kemudian kita ganti dengan gambar earth.png, sedangkan untuk sphere dengan texture cloud kita beri koment, agar tidak dieksekusi. Dengan demikian hasilnya adalah seperti di bawah ini:

Dan sekarang untuk meng-enable fitur rotation (Mouse Drag) dan fitur zoom in - zoom out(Mouse Drag+shift), kita bisa modifikasi parameter berikut ini:

viewer.enableDefaultInputHandler(true);

yang pada mulanya parameter kode di atas bernilai false.

Demikian Oprekan dari penulis semoga bermanfaat untuk kalian, yang ingin mendisplay produk dengan cara 3 Dimensi.