Dalam tutorial ini, kita akan belajar three.js untuk membuat animasi 3D yang menakjubkan.
Industri game memiliki pendapatan yang lebih besar dari gabungan industri musik dan film. Tidak heran jika produksi game terus meningkat dan konsol seperti Xbox dan PlayStation terjual dengan sangat baik.
Seiring dengan berkembangnya bidang pengembangan game selama bertahun-tahun, game mulai merambah ke wilayah peramban. Saat ini, banyak game yang kita mainkan di PC dan konsol juga dibuat untuk dijalankan di browser. Hal ini sebagian berkat banyaknya mesin game yang tersedia untuk membantu pengembang membuat game 3D untuk web dengan lebih efisien.
Apa itu Three.js?
Three.js adalah library yang kuat untuk membuat model dan game tiga dimensi. Hanya dengan beberapa baris JavaScript, Anda dapat membuat apa saja, mulai dari pola 3D sederhana hingga pemandangan fotorealistik dan real-time. Anda dapat membuat geometris 3D yang sederhana dan kompleks, menghidupkan dan menggerakkan objek melalui pemandangan yang nyata, dan banyak lagi.
Three.js memungkinkan Anda untuk menerapkan tekstur dan material pada objek Anda. Ini juga menyediakan berbagai sumber cahaya untuk menerangi adegan Anda, efek postprocessing tingkat lanjut, shader khusus, dll. Anda dapat memuat objek dari perangkat lunak pemodelan 3D untuk digunakan dalam game Anda.
Karena alasan ini, Three.js adalah pustaka pilihan saya untuk membuat game JavaScript.
Download Three.js
Pertama, unduh file Three.js.
Selanjutnya, buat sebuah folder, threejs-prj. Di dalam folder tersebut, buat dua folder lagi: src dan libs.
threejs-prj
- /src
- /libsBuat file index.html pada folder root dan file main.js pada folder src. Kemudian, salin three.min.js ke folder libs.
threejs-prj
- /src
- main.js
- /libs
- three.min.js
- index.htmlmain.js akan berisi kode game Anda. three.min.js adalah kerangka kerja Three.js yang diperkecil, dan index.html adalah halaman utama di mana Three.js akan merender objek-objek Anda.
Buka index.html dan tempelkan kode berikut.
<!DOCTYPE html>
<html>
<head>
<title>Three.js demo</title>
<meta charset="utf-8">
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="./libs/three.min.js"></script>
<script src="./src/main.js"></script>
</body>
</html>Ini hanyalah pengaturan kode dasar. Kita telah menghapus margin dan menyembunyikan konten yang melimpah. Pada bagian berikut ini, kami akan memandu Anda tentang cara membuat objek dan scene dasar di Three.js.
Sebelum kita mulai, mari kita mundur selangkah dan meninjau seperti apa adegan dasar dalam game 3D. Untuk mengikutinya, Anda harus terbiasa dengan beberapa istilah umum, termasuk scene, geometri, material, kamera, dan renderer.
Scene
Sebuah adegan dimulai pada sistem koordinat. Scene dapat berisi objek, seperti kubus, piramida, mobil, rumah, dll. – pada dasarnya, apa pun yang dapat Anda bayangkan – seperti adegan dalam film. Pertama, deklarasikan variabel scene.
<script>
var scene
</script>Buat scene menggunakan Scene class.
scene = new THREE.Scene();
Variabel scene sekarang menyimpan objek Scene. Kita dapat menggunakan metode add() untuk menambahkan objek ke scene kita.
Geometri
Geometri mengacu pada bentuk yang kita buat – kubus, kotak, piramida, dll. Three.js menyediakan bentuk dasar dan primitif, yang permukaan dan simpulnya dapat Anda modifikasi untuk membuat bentuk yang lebih kompleks. Untuk membuat bo, gunakan kelas BoxGeometry dalam variabel THREE.
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
Hal ini menciptakan sebuah kubus dengan panjang 10 unit, lebar 10 unit, dan tebal 10 unit.
isoGeometry = new THREE.IcosahedronGeometry(200, 1);
Code diatas akan menciptakan bentuk icosahedron.
Mesh dan Material
Lights dan materials menata objek dengan menerapkan warna, tekstur, dll. Material digunakan untuk menerapkan tekstur dan warna pada sebuah bentuk.
Untuk membuat material untuk warna dan tekstur, gunakan kelas THREE.MeshBasicMaterial. Ini akan memberikan warna dan tekstur khusus kita.
var basicMaterial = new THREE.MeshBasicMaterial({
color: 0x0095DD
});Di sini, kita menciptakan objek material dengan warna 0095DD.
material = new THREE.MeshBasicMaterial({
color: 0x000000,
wireframe: true,
wireframeLinewidth: 2
});Kita akan membuat material dasar dengan memberikan lebih banyak properti. Kali ini, kita ingin objek menjadi bentuk wireframe, dengan lebar garis wireframe menjadi dua unit.
Kita baru saja menggunakan material dasar di sini. Ada lebih banyak material yang sudah ditentukan untuk digunakan di Three.js, seperti Phong, Lambert, dll.
Mesh digunakan untuk menerapkan material ke objek. Kelas THREE.Mesh menangani hal ini. Untuk menerapkan basicMaterial ke boxGeometry:
var cubeMesh = new THREE.Mesh(boxGeometry, basicMaterial);
CubeMesh akan berupa kotak berukuran 10x10x10 dengan dimensi yang dicat dengan warna 0095DD.
Camera
Camera adalah mata untuk melihat objek dalam sebuah adegan. Sebuah adegan harus memiliki setidaknya satu kamera.
Camera di Three.js mengontrol apa yang dapat Anda lihat dalam sebuah adegan dari sudut pandang tertentu. Anda dapat menggerakkan kamera untuk melihat-lihat. Sama seperti di dunia nyata, Anda dapat melihat lingkungan dari berbagai sudut.
Three.js memiliki banyak jenis camera, tetapi yang paling dasar adalah THREE.PerspectiveCamera. Instance THREE.PerspectiveCamera menampilkan dunia dari satu titik di ruang angkasa, seperti mata Anda. Ada juga kelas THREE.OrthographicCamera, yang seperti melihat keluar dari plane.
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000); camera.position.z = 500;
Mari kita uraikan argumennya di sini.
- Argumen pertama adalah bidang pandang (dalam derajat). Ini mengontrol lebar lensa kamera
- Yang kedua adalah rasio aspek, yaitu rasio lebar kanvas terhadap tingginya
- Argumen ketiga adalah near-plane frustum. Ini mengontrol seberapa dekat suatu objek ke kamera dan masih bisa terlihat
- Arg terakhir adalah far-plane frustum. Ini mengontrol seberapa jauh suatu objek dapat berada dari kamera dan masih dapat dirender.
Pada contoh di atas, kita menggunakan salah satu sistem koordinat spasial kamera untuk menggerakkan kamera ke depan 500 unit pada sumbu z-nya.
Kita juga bisa menggunakan camera.position.y dan camera.position.x untuk menggerakkan kamera ke atas/bawah dan ke kiri/kanan.
Renderer
Renderer melukis scene dan kamera pada browser. Three.js menyediakan beberapa mesin rendering, termasuk renderer berbasis WebGL, Canvas, SVG, CSS, dan DOM. Untuk menggunakan renderer WebGL, digunakan THREE.WebGLRenderer.
var renderer = new THREE.WebGLRenderer({
antialias:true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);Kita sedang membuat sebuah renderer WebGL. Properti antialias pada objek yang dioper ke objek WebGLRenderer diset ke true, yang akan menyebabkan WebGL merender objek kita dengan lancar. Metode setSize mengatur jendela rendering pada browser untuk mengambil lebar dan tinggi penuh browser. Terakhir, DOM dalam properti domElement milik perender ditambahkan ke DOM. Ini akan membuat adegan kita terlihat di browser.
Lights
Lights digunakan untuk menerangi area tertentu dalam sebuah adegan. Anggap saja seperti mengarahkan obor ke arah tertentu.
Ada banyak sumber cahaya yang tersedia di Three.js, termasuk Point, Ambient, Directional, Hemisphere, dan Spot. Semuanya adalah contoh dari objek Light.
Ambient
Ambient mempengaruhi semua objek yang menyala dalam adegan secara merata.
THREE.AmbientLight(color)
Directional
Untuk jenis ini, semua cahaya sejajar dan berasal dari arah tertentu, seakan-akan sumbernya sangat jauh.
THREE.DirectionalLight(color, intensity = 1)
Hemisphere
Hemisphere mensimulasikan pencahayaan bias dari matahari. Anggap saja ini sebagai dua cahaya yang berlawanan arah.
THREE.HemisphereLight(skyColor, groundColor, intensity = 1)
Point
Sumber light ini memancar dari titik tertentu di ruang angkasa, seperti bola lampu. Sumber light ini hanya menyinari objek yang berada dalam radius tersebut.
THREE.PointLight(color, intensity = 1, radius = 0)
Spot
Cahaya ini memancar dari titik tertentu di ruang angkasa pada arah tertentu. Cahaya ini menyinari objek dalam bentuk kerucut yang mengarah ke arah rotasi, jatuh secara eksponensial dalam jarak radius.
THREE.SpotLight(color, intensity, radius = 0, coneAngle = Math.PI / 3, falloff = 10)
Animasi
Animasi menghidupkan objek dalam pemandangan. Anda dapat memindahkan objek ke segala arah dalam sistem koordinat spasialnya.
Kelas Geometri dan Camera memiliki metode dan properti yang dapat Anda gunakan untuk menskalakan, memindahkan, dan memutar objek. Untuk menskalakan objek, gunakan properti skala.
boxGeometry.scale = 2 boxGeometry.scale = 1
Hal ini akan memperbesar dan memperkecil objek boxGeometry. Selanjutnya, gunakan properti posisition untuk memindahkan objek boxGeometry di sepanjang sumbu x, y, dan z.
boxGeometry.position.x = 4
Ini akan menggerakkan objek boxGeometri ke kiri dan ke kanan
boxGeometry.position.y = 2
Ini akan menggerakkan objek boxGeometri ke atas dan ke bawah.
boxGeometry.position.z = 1
Ini akan menggerakkan objek boxGeometry ke depan dan ke belakang. Untuk memutar objek, gunakan properti rotation.
boxGeometry.rotation.x += 0.01
Ini akan memutar objek boxGeometry ke arah x.
boxGeometry.rotation.y += 0.01 boxGeometry.rotation.z += 0.01
Ini akan memutar objek boxGeometry pada arah y dan z.
Menyatukan semuanya
Buka file main.js dan tempelkan yang berikut ini.
var scene = new THREE.Scene();
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
var basicMaterial = new THREE.MeshBasicMaterial({
color: 0x0095DD
});
var cubeMesh = new THREE.Mesh(boxGeometry, basicMaterial);
cubeMesh.rotation.set(0.4, 0.2, 0);
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 50;
scene.add(camera)
scene.add(cubeMesh)
var renderer = new THREE.WebGLRenderer({
antialias:true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);Lihat code berikut ini.
scene.add(camera) scene.add(cubeMesh)
Camera dan cubeMesh ditambahkan ke scene menggunakan metode add(). Tanpa ini, tidak ada kubus yang akan dirender ketika file dijalankan di browser.
cubeMesh.rotation.set(0.4, 0.2, 0);
Hal di atas akan memutar cubeMesh 0,4, 0,2, dan 0 di sepanjang sumbu x, y, dan z, secara berurutan. Hal ini akan membuat kita melihat kubus dalam bentuk 3D. Jika tidak, hanya sumbu x dan y kubus yang akan terlihat.
Muatlah index.html di browser Anda. Anda akan melihat sebuah kubus berwarna biru muda yang dirender pada browser Anda.
Wireframe Cube
Untuk membuat kubus kerangka gambar, tambahkan yang berikut ini.
var wireframeBasicMaterial = new THREE.MeshBasicMaterial({
color: 0x0095DD,
wireframe: true,
wireframeLinewidth: 2
});Lalu ubah code ini.
var cubeMesh = new THREE.Mesh(boxGeometry, basicMaterial);
Menjadi berikut ini.
var cubeMesh = new THREE.Mesh(boxGeometry, wireframeBasicMaterial);
Muat ulang index.html dan Anda akan melihat sebuah kubus wireframe.
Penutup
Selamat, kita telah belajar three.js untuk game developers. Ini hanyalah permulaan dari apa yang dapat Anda lakukan dengan Three.js. Bahkan, aplikasi ini sangat kuat sehingga saya membandingkannya dengan Blender. Three.js dapat melakukan hampir semua hal yang dapat dilakukan Blender.