Pengenalan
Three.js adalah sebuah library JavaScript yang memungkinkan kita untuk membuat game dan aplikasi web 3D secara interaktif. Dengan Three.js, kita tidak perlu repot dengan WebGL yang rumit, karena library ini telah menangani semua kerumitan tersebut di balik layar. Dalam artikel ini, kita akan membahas langkah demi langkah bagaimana cara membuat game 3D sederhana menggunakan Three.js, mulai dari dasar-dasar hingga penerapan fitur-fitur menarik lainnya.
Langkah 1: Persiapan
1.1 Mendirikan Lingkungan
Langkah pertama adalah menyiapkan lingkungan pengembangan. Kita perlu memastikan bahwa mesin JavaScript kita sudah terpasang. Jika belum, silakan unduh dan instal Node.js dari situs web resminya.
1.2 Membuat Proyek Baru
Buat folder baru di komputer Anda untuk proyek game 3D kita. Buka folder ini di terminal dan jalankan perintah berikut:
npm init -y
Perintah ini akan membuat file package.json yang mencatat dependensi proyek kita.
1.3 Menginstal Three.js
Selanjutnya, instal library Three.js dengan menjalankan perintah:
npm install three
Perintah ini akan menambahkan Three.js sebagai dependensi proyek kita, yang siap digunakan.
Langkah 2: Menulis Kode Dasar
2.1 Membuat Berkas HTML
Buat berkas HTML baru bernama index.html di folder proyek kita. Tambahkan kode berikut ke dalam berkas ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game 3D</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="index.js"></script>
</body>
</html>
Kode ini mendefinisikan berkas HTML dasar dengan tag <canvas> untuk tempat rendering game kita dan tag <script> untuk menyertakan berkas JavaScript yang akan kita buat.
2.2 Membuat Berkas JavaScript
Buat berkas JavaScript baru bernama index.js di folder proyek kita. Di dalam berkas ini, kita akan menulis kode untuk membuat dan menjalankan game kita.
// Impor library Three.js
import * as THREE from 'three';
// Buat scene
const scene = new THREE.Scene();
// Buat kamera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Buat renderer
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
// Tambahkan cahaya ke scene
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// Buat geometri kubus
const geometry = new THREE.BoxGeometry(1, 1, 1);
// Buat material kubus
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// Buat objek kubus
const cube = new THREE.Mesh(geometry, material);
// Posisikan kubus
cube.position.z = -5;
// Tambahkan kubus ke scene
scene.add(cube);
// Render scene
function render() {
requestAnimationFrame(render);
// Rotasikan kubus
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
render();
Kode ini mengimpor library Three.js, membuat scene, kamera, renderer, dan objek kubus sederhana. Kemudian, kode ini menampilkan scene dan secara terus-menerus merotasi kubus.
Langkah 3: Menjalankan Game
Untuk menjalankan game, buka berkas index.html di browser web Anda. Anda akan melihat kubus hijau yang berputar di tengah layar.
Langkah 4: Menambahkan Objek Lainnya
4.1 Bola
Kita dapat menambahkan objek lain ke scene dengan cara yang sama seperti kubus. Misalnya, untuk menambahkan bola:
// Buat geometri bola
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
// Buat material bola
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// Buat objek bola
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// Posisikan bola
sphere.position.x = 2;
// Tambahkan bola ke scene
scene.add(sphere);
Kode ini membuat objek bola dengan radius 0.5 dan menempatkannya di posisi x = 2.
4.2 Model 3D
Three.js juga mendukung pemuatan model 3D dari berbagai format, seperti OBJ, GLTF, dan FBX. Misalnya, untuk memuat model 3D myModel.obj:
// Pemuat model
const loader = new THREE.OBJLoader();
// Muat model
loader.load('myModel.obj', function (object) {
// Posisikan model
object.position.x = -2;
// Tambahkan model ke scene
scene.add(object);
});
Kode ini memuat model myModel.obj dan menambahkannya ke scene di posisi x = -2.
Langkah 5: Menambahkan Interaksi
5.1 Event Listener
Kita dapat menambahkan interaksi ke game dengan menggunakan event listener. Misalnya, untuk membuat objek bergerak ketika tombol W, A, S, D ditekan:
// Menangani keyboard input
document.addEventListener('keydown', function (event) {
switch (event.key) {
case 'w':
cube.position.z += 0.1;
break;
case 'a':
cube.position.x -= 0.1;
break;
case 's':
cube.position.z -= 0.1;
break;
case 'd':
cube.position.x += 0.1;
break;
}
});
Kode ini menambahkan event listener untuk keydown. Ketika tombol W, A, S, D ditekan, kode ini akan menggerakkan kubus sesuai arah yang ditentukan.
5.2 Mouse Click
Kita juga dapat mendeteksi klik mouse di scene dan melakukan tindakan tertentu. Misalnya, untuk membuat objek berubah warna ketika di-klik:
// Raycaster
const raycaster = new THREE.Raycaster();
// Menangani klik mouse
document.addEventListener('click', function (event) {
// Konversi posisi mouse ke koordinat 3D
const mouse = new THREE.Vector2(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1
);
// Set raycaster
raycaster.setFromCamera(mouse, camera);
// Cari objek yang di-klik
const intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
const object = intersects[0].object;
// Ubah warna objek
object.material.color.set(0x0000ff);
}
});
Kode ini membuat raycaster dan mendeteksi klik mouse. Jika objek di scene di-klik, kode ini akan mengubah warna objek tersebut menjadi biru.
Langkah 6: Menambahkan Fisika
6.1 Physics Engine
Three.js sendiri tidak menyediakan physics engine. Namun, kita dapat mengintegrasikan physics engine seperti Cannon.js atau Ammo.js ke dalam proyek kita.
6.2 Cannon.js
Cannon.js adalah physics engine yang mudah digunakan dan memiliki API yang sederhana. Untuk menggunakan Cannon.js, kita perlu menginstalnya:
npm install cannon
Kemudian, kita dapat membuat world physics dan menambahkan objek physics ke dalam scene:
// Impor Cannon.js
import * as CANNON from 'cannon';
// Buat world physics
const world = new CANNON.World();
// Buat objek physics
const sphereBody = new CANNON.Body({ mass: 1 });
sphereBody.addShape(new CANNON.Sphere(0.5));
sphereBody.position.set(2, 1, 0);
world.addBody(sphereBody);
// Simulasi physics
function updatePhysics() {
world.step(1 / 60);
// Sinkronkan objek Three.js dengan objek Cannon.js
sphere.position.copy(sphereBody.position);
}
// Jalankan simulasi physics di setiap frame
function render() {
requestAnimationFrame(render);
updatePhysics();
renderer.render(scene, camera);
}
Kode ini membuat world physics dengan objek sphere physics. Kemudian, kode ini mensimulasikan physics dan menyinkronkan objek Three.js dengan objek Cannon.js.
Langkah 7: Menyelesaikan Game
7.1 Menerapkan Gameplay
Dengan semua fitur yang telah kita tambahkan, kita dapat mulai menerapkan gameplay game kita. Ini dapat berupa game platforming, game racing, game puzzle, atau jenis game lainnya.
7.2 Menambahkan Antarmuka Pengguna (UI)
Untuk interaksi yang lebih baik, kita dapat menambahkan antarmuka pengguna (UI) ke game kita. Ini dapat berupa tombol, menu, skor, atau elemen UI lainnya yang meningkatkan pengalaman pengguna.
7.3 Optimasi Performa
Untuk memastikan bahwa game kita berjalan dengan lancar, kita perlu mengoptimalkan performa. Ini dapat dilakukan dengan menggunakan teknik seperti:
- Memilih geometri sederhana: Gunakan geometri sederhana untuk objek yang tidak memerlukan detail tinggi.
- Mengurangi jumlah objek: Kurangi jumlah objek dalam scene jika memungkinkan.
- Menggunakan material yang dioptimalkan: Gunakan material yang sederhana dan dioptimalkan untuk kinerja yang lebih baik.
- Menggunakan animasi yang efisien: Gunakan animasi yang sederhana dan efisien untuk menghindari penurunan performa.
Kesimpulan
Dengan Three.js, kita dapat membuat game 3D yang menarik dan interaktif dengan mudah. Dengan langkah-langkah yang telah diuraikan di atas, kita dapat memulai perjalanan membangun game 3D sendiri. Jangan lupa untuk bereksperimen dan mencoba fitur-fitur lain yang disediakan oleh Three.js untuk membuat game yang kreatif dan inovatif. Selamat berkarya!