Advertisement
  1. Web Design
  2. Three.js
Webdesign

Panduan Pemula Untuk Three.js

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Biyan Pasau (you can also view the original English article)

Web semakin kompleks dan berkembang dengan cepat; Terutama dengan rendering 3D. WebGL (Web Graphics Library) adalah API JavaScript untuk menampilkan grafik 3D dan 2D interaktif. Three.js oleh Ricardo Cabello adalah pustaka yang dibangun di atas WebGL, memastikan kode yang ditulis kompatibel di berbagai browser.

Three.js adalah untuk WebGL seperti jQuery untuk JavaScript, menawarkan sintaks deklaratif, dan menghapuskan kesulitan untuk 3D di browser. Mari kita tinjau, dapatkan ikhtisar umum tentang syntax dan lihat bagaimana memulai jika Anda baru mengenal game 3D.

Apa Yang Akan Kita Kerjakan Kedepannya

Lihatlah demo berikut di CodePen; Gunakan kursor mouse Anda untuk memindahkan model, memperbesar dan memperkecil dengan scroll mouse.

1. Menyiapkan Scene-nya

Kita akan akan bekerja di CodePen karena mudah; Mulailah dengan menautkan ke Three.js (CDN 126Kb) dari tab JS Anda.

Kita mulai dengan membuat sebuah "scene", sama seperti Anda memulai dengan kanvas di Photoshop. Sebuah scene didefinisikan dengan variabel sebelum menulis code lebih jauh. Jadi, dalam panel JS Anda tambahkan:

Camera!

Dengan tirai yang siap untuk performa kita, kita akan membutuhkan cara untuk untuk mengenalkan camera. Ada array dari camera yang disertakan bersama Three.js, seperti PerspectiveCamera, StereoCamera, OrthographicCamera dan CubeCamera. Untuk tujuan itu, kita akan menggunakan PerspectiveCamera karena dirancang untuk meniru pandangan manusia. Sama seperti kita mendefinisikan sebuah scene dengan variabel, kita melakukan hal yang sama untuk mendefinisikan camera:

PerspectiveCamera kita menerima empat argumen: fov, aspek, near dan far.

  • fov (field of view) adalah berapa banyak yang Anda bisa lihat disekitar pusat camera
  • aspect adalah rasio fov, atau dengan kata lain lebar ke tinggi layar (misalnya 4: 5, 16: 9).
  • Dua yang terakhir, near dan far, adalah bidang solid. Bersama-sama mereka mengontrol jika sebuah objek diberikan berdasarkan jaraknya dari kamera. near adalah benda yang paling dekat atau benda yang bisa ke kamera saat masih dirender, far adalah benda terjauh dari kamera dan masih dirender. Semua mendefinisikan camera viewing frustum
viewing frustum
Viewing frustum

Inilah contoh argumen PerspectiveCamera:

Tidaklah penting untuk memahami setiap nilai pada saat ini kecuali untuk mengetahui nilai-nilai yang bisa dilalui. Melanjutkan, kita harus mengatur posisi kamera.

Baris ini adalah posisi lokal objek. Ini menetapkan koordinat x, y dan z dari vektor. Tanpa itu kamera tidak akan melihat apapun.

2. WebGLRenderer

Bahan penting berikutnya dalam resep kita adalah membuat WebGLRenderer. Inilah bagian yang bertanggung jawab menampilkan kreasi Anda.

WebGLRenderer juga dapat menerima properti dan nilai yang dilewatkan sebagai objek.

Ada beberapa pasangan property : value yang dapat digunakan — mereka tercantum dalam dokumen jika Anda memutuskan untuk menyelam lebih dalam pada poin berikutnya (sangat saya sarankan).

Dengan renderer yang didefinisikan, kita dapat mengatur metode untuk menyesuaikan kreasi kita lebih jauh seperti setSize; sebuah metode yang akan Anda gunakan di hampir setiap proyek Three.js.

Ada banyak metode yang dapat Anda gunakan, tapi untuk tujuan ini kita akan fokus pada setSize().

3. DOM

Sekarang ukuran yang kita inginkan telah ditentukan, kita memerlukan cara untuk melampirkannya ke DOM.

Properti domElement ini adalah tempat dimana renderer menampilkan hasilnya dan akan dalam bentuk elemen canvas. Meskipun saya menggunakan document.body Anda bisa menambahkan elemen canvas di manapun Anda suka, sebelum atau setelahnya. Ini benar-benar terserah Anda di mana Anda menginginkan penempatan berdasarkan kebutuhan spesifik proyek Anda.

Membuat Objek

Untuk langkah selanjutnya kita perlu membuat objek — karena semua yang telah kita lakukan sampai saat ini adalah mendeklarasikan sebuah adegan, kamera dan perender. Untuk keperluan demo mari ambil ponsel dari 3D Warehouse sehingga kita bisa membangun previewer produk untuk orang yang membeli iPhone secara online.

iphone 6 by Jeremie P
iPhone 6+ oleh Jeremie P

Biasanya Anda bisa menggunakan aplikasi seperti SketchUp atau bahkan Blender untuk menggambar objek 3D Anda, namun ada proses pembelajaran yang tinggi untuk aplikasi gambar 3D — yang tentunya berada di luar cakupan artikel ini.

Jika Anda Suka Piña Collada

Untuk memasukkan objek 3D kita ke scene kita harus menggunakan ColladaLoader. Harus disebutkan bahwa setiap grafik yang Anda putuskan untuk digunakan pada umumnya harus berada di bawah 1-2Mb dan harus menjadi file Collada untuk digunakan dengan Three.js: ini adalah file yang diakhiri dengan ekstensi .dae. Jika Anda membuka file Collada, Anda akan melihatnya benar-benar ditulis dalam XML.

Kita mulai dengan mendefinisikan ColladaLoader menggunakan variabel dan memanggil metode bersama dengan mendefinisikan variabel lain untuk mewakili grafik 3D untuk referensi di titik selanjutnya.

Ini adalah awal yang baik, tapi ada beberapa pekerjaan lagi yang harus dilakukan agar kita dapat menampilkan telepon. Mari kita membuat fungsi yang akan melakukan hal itu:

Untuk langkah selanjutnya kita akan menggunakan metode load, lewati URL file Collada kita, lalu panggil fungsi kita dengan nama sebagai argumen kedua:

Jika Anda ingin tahu lebih banyak tentang ColladaLoader, Anda dapat menggali melalui kode sumber di GitHub.

4. Render Loop

Dengan loader dan grafis ditempatnya, ada satu langkah terakhir; Kita perlu menciptakan apa yang disebut "render loop". Ini karena kita belum benar-benar merender apa pun.

"Render loop" ini adalah apa yang akan menyebabkan perender untuk menggambar scene enam puluh kali per detik. Fungsi berikut akan membuat ciptaan kita menjadi hidup (bagian terbaik dari keseluruhan proses).

requestAnimationFrame memiliki sejumlah keunggulan. Yang paling penting adalah berhenti ketika pengguna bernavigasi ke tab browser lain, yang pada akhirnya tidak membuang-buang tenaga pemrosesan dan masa pakai baterai mereka.

Produk Akhir

Hasil dari semua pekerjaan ini adalah rendering "manis" dari sebuah iPhone #D yang bisa Anda putar, perbesar dan perkecil:

Ada beberapa hal lagi yang masuk ke dalam kreasi akhir, jadi saya mendorong Anda untuk menyelam lebih dalam ke panel JavaScript demo.

Sebagai contoh; Pencahayaan (AmbientLight, HemisphereLight, PointLight), TrackballControls, AxisHelper dan Window Resizing event. Beberapa dari item diatas tidak menyertakan dokumentasi seperti TrackballControls, tapi Anda bisa menemukan semua properti di the core JS file on Github. Ada juga kontrol yang benar-benar keren yang bisa Anda gunakan, yang juga ada di Github

Inspirasi

Terkadang Anda memerlukan sedikit inspirasi untuk membakar otak sehingga menghasilkan ide dengan cepat. Berikut adalah beberapa demo favorit saya menggunakan Three.js yang mengubah mimpi menjadi kenyataan.

httpspaperplanesworld
https://paperplanes.world
httpsthroughthedarkwithgooglecom grab your headphones
https://throughthedark.withgoogle.com (gunakan headphones)
httpcarvisualizerplus360degreescomthreejs
http://carvisualizer.plus360degrees.com/threejs

Bacaan Tambahan

Rachel Smith menulis artikel yang menarik di CodePen tentang WebGL dan saya menyarankan Anda membacanya jika ada waktu luang. Tutorial ini diisi dengan bahasa sederhana dan merupakan penjelasan menyeluruh tentang Three.js membahas scene, geometri, pencahayaan, material dan animasi yang pastinya tidak bisa saya bahas di postingan singkat ini.

Anda mungkin juga suka:

Catatan

Artikel ini tidak akan mungkin terjadi tanpa bantuan dermawan dari Animation at Work Slack Community jadi saya ingin mengucapkan terima kasih (tanpa urutan tertentu) Stephen Shaw, Jeff Ayer, Louis Hoebregts, Neil Pullman, Eli Fitch dan Chris Johnson.

Advertisement
Advertisement
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.