Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. How to Learn
Gamedevelopment

Mempelajari Three.js untuk Pengembangan Game

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Ridho Anbia Habibullah (you can also view the original English article)

Three.js adalah pustaka / API JavaScript open-source yang digunakan untuk membuat dan menampilkan gambar komputer 3D animasi pada browser web, yang kompatibel dengan elemen kanvas HTML5, WebGL, dan SVG. Bagaimana belajar artikel ini, kita akan menjelajahi kemampuan mesin ini dan berbagi sumber daya dan saran untuk membantu Anda mulai mengembangkan permainan dengan segera.


Mengapa menggunakan Three.js?

Karena Three.js pertama kali dirilis oleh Ricardo Cabello GitHub di 2010, basis kode telah terus dipertahankan dan ditingkatkan oleh komunitas tumbuh dan mendukung. Serangkaian fitur built-in yang luas, dan mencakup:

  • renderers (kanvas, WebGL dan SVG)
  • adegan-adegan yang (dapat berubah pada saat runtime, diimpor dan diekspor)
  • kamera (perspektif dan ortografi)
  • lampu (titik, spot, arah dan ambient; objek dapat cast/menerima bayangan)
  • tekstur dan bahan-bahan (Lambert, Phong, dll, termasuk dukungan untuk benjolan maps dan specular maps)
  • geometri (termasuk baris, pesawat, kubus, bola, polyhedra, silinder, sistem partikel, dan teks 3D)
  • utilitas untuk ekspor Three.js-kompatibel JSON file dari perangkat lunak pemodelan 3D (seperti Blender, 3ds Max, atau Maya) dan impor file (seperti Wavefront (.obj) atau Collada (.dae)) langsung ke TKP
  • Shaders (menyediakan akses lengkap untuk OpenGL Shading bahasa untuk kontrol langsung dari jalur pipa grafis)
  • Perpustakaan pasca pengolahan shaders (termasuk mekar, blur, Deteksi tepi, Fresnel, sepia, dan gambaran)
  • Perpustakaan efek stereoskopik (Anaglyph, paralaks/Cross-bermata, dan keretakan Oculus)

Lebih dari 100 contoh yang mengilustrasikan fitur-fitur ini (dan banyak lagi) disertakan dalam repositori utama, dan banyak situs lain menyediakan koleksi contoh dengan kode sumber yang tersedia. Plus, karena perpustakaan ditulis dalam Javascript, mudah untuk membangun dan berlari, serta untuk menyebarkan pekerjaan Anda.


Permainan dan Visualisasi Penting

HexGL

Sebuah permainan futuristik balap yang dibuat oleh Thibaut Despoulain:


Memicu Rally

Game balap mobil yang dibuat oleh Jasmine Kent:


Artikel pengembangan terkait dapat ditemukan di blog Jasmine's Gamasutra.

ChuClone

Platformer 2,5D yang diberikan dalam 3D, dengan editor tingkat langsung yang built-in, dibuat oleh Mario Gonzalez:


Marble Table

Game marmer / sepak bola yang dibuat oleh Jerome Etienne:

MarbleTable

Tersesat

Game labirin yang dibuat oleh Rye Terrell:

Astray

CubeSlam

Game ping-pong 3D yang menggabungkan obrolan video dalam game, yang dibuat oleh Google:


Informasi lebih lanjut dapat ditemukan di halaman Eksperimen Chrome game dan artikel di balik layar ini.

Temukan Jalanmu ke OZ

Perjalanan interaktif yang dibuat oleh Walt Disney dan UNIT9


Informasi lebih lanjut tersedia di halaman Eksperimen Chrome permainan.


Persiapan

Karena Three.js adalah pustaka Javascript, pengaturan lingkungan pengembangan Anda sangat mudah: satu-satunya persyaratan adalah editor teks dan browser web. Dikatakan demikian, editor teks dengan fitur-fitur seperti penyorotan / pelipatan syntax, pencocokan bracket, peta dokumen, dan sebagainya - seperti Notepad ++ atau Sublime Text - akan memberikan pengalaman pengkodean yang lebih baik.

Adapun browser web, baik Google Chrome dan Mozilla Firefox memiliki dukungan WebGL yang sangat baik. Google Chrome memiliki seperangkat alat pengembang bawaan yang sangat membantu yang dapat sangat menyederhanakan proses alur kerja, seperti konsol yang dapat digunakan untuk debugging dan memeriksa nilai dan objek Javascript, dan pengaturan Ruang Kerja yang memungkinkan Anda untuk mengedit dan menyimpan file sumber dari dalam browser. Detail selengkapnya dapat ditemukan di situs Chrome DevTools.

Kiat: Anda juga dapat menulis kode menggunakan Three.js sepenuhnya online, menggunakan layanan seperti jsFiddle, seperti yang ditunjukkan oleh contoh ini. Namun, opsi ini biasanya hanya digunakan untuk berbagi contoh atau demonstrasi dengan kode dalam jumlah kecil.

Untuk mengatur Three.js, pertama-tama buka repo GitHub. Akan ada tombol yang bertuliskan 'Unduh ZIP' yang akan memungkinkan Anda untuk mengunduh semua kode dalam repositori sebagai file ZIP. (Ada alternatif lain, seperti kloning atau penyaluran repositori menggunakan Git, yang tidak diperlukan untuk pengguna rata-rata - opsi ini terutama berguna hanya jika Anda berencana berkontribusi pada kode sumber atau dokumentasi online.)

Setelah Anda mengunduh dan membuka ritsleting file ke dalam direktori pilihan Anda, satu langkah penting lainnya tetap ada sebelum Anda dapat melihat sebagian besar contoh di komputer Anda sendiri. Banyak proyek Three.js melibatkan memuat konten dari file eksternal (seperti gambar), tetapi, untuk alasan keamanan, browser web membatasi perilaku ini secara default. Dua opsi untuk mengatasi masalah ini adalah mengubah pengaturan keamanan di browser web Anda, atau menjalankan file dari server lokal.

Opsi sebelumnya adalah yang paling mudah (misalnya, mengubah pengaturan untuk Google Chrome di Windows dapat diselesaikan dengan membuat pintasan untuk Chrome dan mengedit jalur untuk menyertakan bendera --allow-file-access-from-files). Instruksi untuk kedua opsi dapat ditemukan di wiki resmi, di halaman berjudul How to run things locally.

JavaScript

Three.js ditulis dalam Javascript, sehingga dianjurkan bahwa Anda memiliki pengetahuan tentang bahasa ini. Ada banyak sekali sumber daya yang tersedia secara bebas di internet untuk ini; dua sumber interaktif yang luar biasa adalah:

  • Codecademy, yang berisi sejumlah besar pelajaran interaktif dengan umpan balik yang responsif dan cerdas, serta glosarium yang mudah digunakan
  • Eloquent Javascript, buku teks digital gratis yang ditulis oleh Marijn Haverbeke, yang mencakup lingkungan pengkodean interaktif yang menjalankan semua contoh yang disertakan dan memungkinkan pembaca untuk mengedit dan bereksperimen dengan kode contoh

Three.js

Untuk mempelajari cara mengatur adegan dasar di Three.js (termasuk diskusi tentang adegan, kamera, penyaji, jerat, dan putaran animasi, kunjungi: the official manual. Pengenalan hebat lainnya untuk menciptakan adegan dasar adalah artikel Memulai dengan Three.js oleh Paul Lewis

Survei pendahuluan yang lebih mendalam tentang kemampuan Three.js adalah presentasi yang sangat baik oleh James Williams (video dan slideshow) di Pengantar WebGL dan Three.js.


Langkah berikutnya

Dokumentasi Three.js, tersedia di http://threejs.org/docs/, adalah pekerjaan yang sedang berjalan tetapi tempat pertama yang baik untuk mendapatkan ide untuk banyak fungsi yang tersedia.

Cara yang lebih komprehensif untuk mempelajari tentang cara kerja bagian dalam perpustakaan adalah menelusuri kode sumber dari koleksi contoh resmi di http://threejs.org/examples/, yang sering diberi judul oleh aspek library yang paling menonjol. Sumber lain, yang terdiri dari contoh-contoh yang disederhanakan dan benar-benar dikomentari yang ditulis untuk pemula, adalah koleksi di http://stemkoski.github.io/Three.js/. Juga, banyak proyek Three.js diumumkan di Twitter dengan tagar #ThreeJS atau di subreddit Three.js.

Dua koleksi proyek Three.js yang sangat mengesankan dan inspiratif adalah:

Beberapa situs web dan blog yang membahas pengembangan dan sering menampilkan proyek Three.js meliputi:

Untuk mempelajari lebih lanjut tentang dasar-dasar grafik komputer 3D, periksa Grafik 3D Interaktif, kursus online gratis yang diajarkan oleh Eric Haines yang menampilkan video ceramah dan latihan pemrograman interaktif menggunakan Three.js.

Jika Anda perlu menggabungkan fungsi di luar yang disediakan oleh Three.js, itu mudah (dan praktik umum) untuk menggabungkan pustaka Javascript tambahan, seperti:

  • Tween.js: perpustakaan untuk nilai interpolasi otomatis, berguna untuk animasi yang halus
  • Physi.js: mesin fisika yang dirancang untuk digunakan dengan Three.js
  • dat.GUI: antarmuka pengguna grafis ringan untuk mengubah variabel
  • Gamepad.js: pustaka yang menyederhanakan pemrosesan input dari gamepads dan joystick

Jika Anda ingin membuat efek grafis canggih di luar yang disertakan dengan Three.js, Anda harus belajar menulis shader, yang merupakan fungsi yang dijalankan langsung pada GPU. Dua pengantar yang sangat baik untuk shader, yang ditulis khusus untuk pengguna Three.js, adalah:

Akhirnya, jika Anda tertarik untuk menyebarkan proyek Anda untuk Android atau iOS, CocoonJS milik Ludei adalah platform yang melakukan hal itu. Proses ini terdokumentasi dengan baik dan relatif mudah, karena sebagian besar pekerjaan diotomatisasi oleh Sistem Kompilasi Cloud CocoonJS.


Kemana mencari bantuan

Jika Anda memiliki pertanyaan yang tidak dapat Anda ketahui dengan melihat contoh atau sumber daya di atas, tempat untuk mencari bantuan adalah Stack Overflow, situs pertanyaan dan jawaban utama untuk programmer profesional dan antusias. Pertama, cari untuk melihat apakah pertanyaan Anda sudah ditanyakan; jika tidak, daftar untuk akun dan tanyakan di sana!


Kesimpulan

Dengan sumber daya ini tersedia untuk Anda, sekarang saatnya untuk mulai membuat! Three.js memiliki komunitas yang aktif dan bersemangat, sehingga Anda harus selalu merasa bebas untuk mengajukan pertanyaan, bergabung dalam diskusi dan menampilkan pekerjaan Anda. Best of luck untuk Anda dalam upaya Anda!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.