WebGL Fundamental (1) : three.js

Oleh : Reza Ervani

بسم الله الرحمن الرحيم

Sebelum kita membahas lebih jauh tentang webGL, mari kita coba praktekkan dulu beberapa program sederhana berbasis webGL agar kita bisa lihat implementasi awalnya di HTML5

<html>
<head>
<title>Contoh 3D HTML5 | Rumah Ilmu Indonesia</title>
<script src="http://rumahilmu.net/contoh/webGL/three/build/three.js"></script>
<script src="http://rumahilmu.net/contoh/webGL/three/build/three.min.js"></script>
<script>

function onLoad() {

var kontainer = document.getElementById("kontainer");

var renderer = new THREE.WebGLRenderer();

renderer.setSize(kontainer.offsetWidth, kontainer.offsetHeight);
kontainer.appendChild( renderer.domElement );

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera ( 45,
kontainer.offsetWidth / kontainer.offsetHeight, 1, 4000 );
camera.position.set( 0, 0, 3.3333 );
scene.add( camera );

var geometry = new THREE.PlaneGeometry(1, 1);
var mesh = new THREE.Mesh ( geometry, new THREE.MeshBasicMaterial() );
scene.add( mesh );

renderer.render( scene, camera );

}

</script>
</head>
<body onload='onLoad()'>

Contoh
<div id="kontainer"
style="width:500px; height:500px; background-color:#AAAAAA"></div>
</body>
</html>

Maka kita akan dapatkan tampilan seperti berikut :

Screenshot from 2014-05-12 17:10:29

Mari kita lihat bagian kode-kode diatas satu per satu sebagai berikut :

Bagian pertama adalah

<script src="http://rumahilmu.net/contoh/webGL/three/build/three.js"></script>

Bagian  ini memberitahukan kepada kode program lokasi library Three.js

Renderer

Selanjutnya bagian :

renderer = new THREE.WebGLRenderer();

adalah objek renderer yang bertanggung jawab untuk seluruh penggambaran Three.js (lewat konteks WebGL).

Scene

Selanjutnya kita membuat scene

var scene = new THREE.Scene();

Scene adalah objek top-level di dalam hirarki grafik Three.js. Scene berisi seluruh objek grafikal lainnya.  (Di dalam Three.js objek berada di dalam hirarki parent-child). 

Camera

Setelah kita memiliki scene, selanjutnya kita buat di dalamnya sepasang objek yakni : camera dan mesh

Camera mendefinisikan dari mana kita akan melihat scene.

var camera = new THREE.PerspectiveCamera ( 45,kontainer.offsetWidth / kontainer.offsetHeight, 1, 4000 );

Tiga bagian tersebutlah yang merupakan komponen utama di WebGL

Geometry dan Mesh

Bagian selanjutnya adalah jenis Objek yang akan kita letakkan di dalam kontainer kita, yakni PlaneGeometry

Sementara Mesh memberitahukan kepada program untuk menggambarkan objek tersebut menjadi sebuah benda.

Mari kita coba rubah sedikit program diatas untuk melihat bagaimana hasilnya.

Pertama mari kita coba rubah PlaneGeometry menjadi CircleGeometry

var circleGeometry = new THREE.CircleGeometry( radius, segments );

Dimana radius adalah panjang jari-jari, dan segment adalah jumlah sudut yang ingin kita buat.

Kita akan peroleh hasilnya seperti pada gambar berikut ini :

Screenshot from 2014-05-12 20:30:55

 MeshBasicMaterial bertugas menggambarkan objek dalam format paling sederhana, yakni bidang putih diatas bidang hitam, mari coba kita rubah  menjadi seperti berikut :

 var geometry = new THREE.CircleGeometry(1, 8);
 var mesh = new THREE.Mesh ( geometry, new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true}) );

Maka kita akan dapati hasilnya tampak seperti berikut :

Screenshot from 2014-05-12 21:21:23

renderer.render (scene, camera)

Kode ini kita gunakan untuk merender objek yang telah kita buat diatas

Kita akan lanjutkan eksperimen kita di materi-materi berikutnya insya Allah. (reza@rumahilmu.or.id)

About Reza Ervani
Adalah pendiri programming.rezaervani.com -

About Reza Ervani 381 Articles
Adalah pendiri programming.rezaervani.com -

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.