Three.js adalah sebuah library JavaScript yang digunakan untuk membuat grafik 3D interaktif di web. Dengan menggunakan Three.js, Anda dapat membuat game 3D sederhana yang menarik dengan relatif mudah. Dalam artikel ini, kita akan membahas langkah-langkah untuk membuat game 3D sederhana menggunakan Three.js.
Langkah 1: Persiapan Awal
Langkah pertama adalah mempersiapkan lingkungan pengembangan. Pastikan Anda memiliki editor teks yang sesuai, seperti Visual Studio Code, dan pastikan Anda memiliki versi terbaru dari Three.js. Anda dapat mengunduh Three.js dari situs resmi Three.js.
Langkah 2: Membuat Scene dan Renderer
Selanjutnya, buat sebuah scene dan renderer menggunakan Three.js. Scene merupakan tempat dimana semua objek 3D akan ditempatkan, sedangkan renderer bertanggung jawab untuk menampilkan scene tersebut di layar.
// Membuat scene var scene = new THREE.Scene(); // Membuat renderer var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
Berikut penjelasan code di atas:
- Pertama kita membuat objek
scenebaru yang akan digunakan sebagai tempat untuk menempatkan semua objek 3D yang akan ditampilkan. - Selanjutnya, kita membuat objek
rendererbaru menggunakanTHREE.WebGLRenderer(). Renderer ini akan digunakan untuk menampilkan objek-objek 3D di dalamsceneke elemen DOM di halaman web. Kemudian, kita mengatur ukuran renderer sesuai dengan ukuran jendela (window.innerWidthdanwindow.innerHeight), sehingga rendering akan sesuai dengan ukuran layar pengguna. - Terakhir, kita tambahkan elemen
domElementdari renderer ke elemen<body>di halaman web. Ini akan menampilkan renderer di halaman web, sehingga objek-objek 3D yang ada dalam scene dapat ditampilkan dengan benar.
Langkah 3: Menambahkan Camera
Setelah membuat scene dan renderer, kita perlu menambahkan kamera. Kamera digunakan untuk melihat scene dalam perspektif yang diinginkan.
// Membuat kamera var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5;
Disini kita membuat objek camera baru dengan menggunakan THREE.PerspectiveCamera(). Kamera ini menggambarkan perspektif pandangan seperti yang kita lihat dalam dunia nyata.
- Argumen pertama (
75) adalah sudut pandang vertikal dalam derajat. - Argumen kedua (
window.innerWidth / window.innerHeight) adalah rasio aspek, yang mengatur proporsi tampilan kamera sesuai dengan lebar dan tinggi jendela browser. - Argumen ketiga (
0.1) adalah jarak terdekat di mana objek masih terlihat oleh kamera. - Argumen keempat (
1000) adalah jarak terjauh di mana objek masih terlihat oleh kamera.
Setalah itu, kita atur posisi kamera pada sumbu z menggunakan camera.position.z. Dalam contoh ini, kita mengatur kamera pada posisi z = 5, yang berarti kamera akan ditempatkan 5 unit ke belakang dari pusat scene. Dengan mengatur posisi kamera, kita dapat mengendalikan bagaimana scene akan terlihat oleh pengguna.
Langkah 4: Membuat Objek 3D
Sekarang saatnya kita membuat objek 3D. Kali ini, kita akan membuat sebuah kubus.
// Membuat kubus
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);Disini kita membuat objek geometry baru menggunakan THREE.BoxGeometry(). Geometri ini merepresentasikan bentuk kubus dalam bentuk data geometris. Dalam contoh ini, kita tidak memberikan argumen apa pun kepada BoxGeometry, sehingga secara default akan membuat kubus dengan dimensi 1 unit pada semua sisi.
Selanjutnya, Kita membuat objek material baru menggunakan THREE.MeshBasicMaterial(). Material ini menentukan penampilan visual dari objek geometri. Dalam contoh ini, kita menggunakan MeshBasicMaterial yang merupakan jenis material sederhana yang akan memberikan warna padat pada objek. Argumen yang diberikan adalah sebuah objek dengan properti color yang diatur dengan nilai hexadecimal (0x00ff00) yang mewakili warna hijau terang.
Dilanjutkan dengan membuat objek cube baru menggunakan THREE.Mesh(). Mesh ini menggabungkan objek geometri (geometry) dengan objek material (material) untuk membentuk objek 3D yang dapat dirender di scene. Dalam contoh ini, objek geometri kubus dan material warna hijau yang telah dibuat sebelumnya digunakan untuk membuat mesh kubus.
Terakhir, kita tambahkan objek cube ke dalam scene menggunakan metode add(). Dengan melakukan ini, mesh kubus akan dimasukkan ke dalam scene dan akan ditampilkan saat scene dirender.
Langkah 5: Animasi
Agar game 3D kita terlihat hidup, kita dapat menambahkan animasi. Disini kita akan membuat kubus berputar secara terus-menerus.
// Animasi
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();Kita akan menggunakan fungsi requestAnimationFrame untuk meminta browser untuk memanggil fungsi animate secara berulang setiap kali frame animasi dibutuhkan. Hal ini akan memastikan animasi berjalan dengan mulus dan mengoptimalkan kinerja.
Dalam setiap pemanggilan animate, kita mengubah rotasi kubus pada sumbu x dan y dengan menambahkan sejumlah nilai (dalam contoh ini, 0.01). Dengan mengubah nilai rotasi ini secara terus-menerus, kubus akan berputar secara animatif.
Setelah memperbarui animasi, kita menggunakan renderer untuk merender scene dengan menggunakan objek scene dan camera yang telah kita buat sebelumnya. Ini akan menghasilkan tampilan yang diperbarui dari kubus yang berputar di layar.
Terakhir, kita memanggil fungsi animate untuk memulai animasi. Dengan demikian, fungsi animate akan dipanggil secara berulang oleh requestAnimationFrame, menghasilkan animasi yang terus menerus hingga dihentikan secara eksplisit.
Langkah 6: Menambahkan Kontrol
Kemudian, kita dapat menambahkan kontrol ke game 3D kita. Salah satu cara yang umum adalah dengan menggunakan kontrol mouse. Three.js menyediakan library kontrol yang bernama OrbitControls.
var controls = new THREE.OrbitControls(camera, renderer.domElement);
Langkah 7: Menampilkan Game 3D
Terakhir, kita perlu menampilkan game 3D yang telah kita buat di browser.
// Fungsi resize
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
// Render
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();Fungsi onWindowResize akan dipanggil setiap kali jendela browser diubah ukurannya. Di dalam fungsi ini, kita mengupdate aspek rasio kamera (camera.aspect) sesuai dengan perubahan lebar dan tinggi jendela browser (window.innerWidth dan window.innerHeight).
Kemudian, kita memanggil camera.updateProjectionMatrix() untuk memperbarui matriks proyeksi kamera. Selanjutnya, kita mengatur ukuran renderer (renderer.setSize) sesuai dengan ukuran jendela browser yang baru. Hal ini akan memastikan bahwa objek-objek dalam scene tetap tampak proporsional saat jendela browser diubah ukurannya.
Fungsi render akan dipanggil secara terus-menerus menggunakan requestAnimationFrame untuk melakukan render scene dengan menggunakan objek scene dan camera. Ini akan menghasilkan tampilan yang terus diperbarui dari scene sesuai dengan perubahan ukuran jendela browser dan perubahan lainnya dalam animasi atau interaksi yang mungkin terjadi.
Terakhir, kita memanggil fungsi render untuk memulai render scene secara terus-menerus. Dengan demikian, scene akan terus diperbarui dan dirender seiring waktu.
Penutup
Selamat sekarang kita telah berhasil membuat game 3D sederhana menggunakan Three.js. Anda bisa mengembangkan game 3D Anda lebih lanjut dengan menambahkan beberapa detail berikut:
- Menambahkan Pencahayaan: Anda dapat menggunakan pencahayaan untuk memberikan efek yang lebih realistis pada objek Anda. Three.js menyediakan berbagai jenis pencahayaan, seperti pencahayaan titik, pencahayaan directional, atau pencahayaan ambient. Anda dapat bereksperimen dengan pengaturan pencahayaan yang berbeda untuk menciptakan atmosfer yang diinginkan.
- Menambahkan Interaksi Pengguna: Anda dapat membuat game Anda lebih interaktif dengan menambahkan kontrol pengguna. Misalnya, Anda dapat menggunakan kontrol keyboard untuk menggerakkan objek, atau menggunakan mouse untuk mengontrol pandangan kamera. Three.js menyediakan berbagai kontrol dan input manager yang dapat Anda gunakan.
- Mengoptimalkan Kinerja: Ketika mengembangkan game 3D, penting untuk memperhatikan kinerja agar game berjalan lancar. Anda dapat mengoptimalkan game Anda dengan menggunakan teknik seperti frustum culling, level-of-detail (LOD), atau mengurangi jumlah poligon pada objek kompleks.
Selain itu, ada banyak sumber daya dan tutorial online yang dapat membantu Anda dalam pengembangan game 3D dengan Three.js. Dengan eksperimen dan pengembangan yang konsisten, Anda dapat membuat game 3D yang semakin kompleks dan menarik. Selamat mencoba!