Pengantar
Saya telah menggunakan Three.js untuk beberapa eksperimen saya, dan library ini sangat membantu dalam memisahkan masalah yang dihadapi saat menggunakan 3D di browser. Dengannya, Anda dapat membuat kamera, objek, lampu, bahan, dan lainnya, serta Anda memiliki pilihan perender, yang berarti Anda dapat memutuskan apakah ingin tampilan digambar menggunakan kanvas HTML 5, WebGL, atau SVG. Selain itu, karena bersifat open source, Anda bahkan dapat terlibat dalam project ini. Namun saat ini, saya akan berfokus pada hal-hal yang telah saya pelajari dengan memainkannya sebagai mesin, dan menjelaskan beberapa dasar-dasarnya kepada Anda.
Meskipun Three.js sangat luar biasa, ada kalanya Anda mungkin mengalami kesulitan. Biasanya, Anda harus menghabiskan cukup banyak waktu dengan contoh, rekayasa balik, dan (tentunya dalam kasus saya) memburu fungsi tertentu dan sesekali mengajukan pertanyaan melalui GitHub. Ngomong-ngomong, jika Anda memiliki pertanyaan, saya mendapati bahwa Mr. doob dan AlteredQualia sangat membantu.
1. Dasar-dasar
Saya akan mengasumsikan bahwa Anda memiliki setidaknya pengetahuan dasar tentang 3D, dan kecakapan yang wajar dengan JavaScript. Jika tidak, sebaiknya pelajari sedikit sebelum Anda mencoba dan bermain dengan hal ini, karena hal ini bisa sedikit membingungkan.
Di dunia 3D, kita akan memiliki beberapa hal berikut, yang akan saya jelaskan proses pembuatannya:
- Adegan
- Perender
- Kamera
- Satu atau dua objek (dengan materi)
Tentu saja, Anda dapat melakukan beberapa hal keren, dan saya harap Anda akan melanjutkan untuk melakukannya dan mulai bereksperimen dengan 3D di browser.
2. Dukungan
Catatan singkat tentang dukungan di browser. Menurut pengalaman saya, browser Chrome Google adalah browser terbaik untuk digunakan dalam hal perender yang didukung, dan kecepatan mesin JavaScript yang mendasarinya. Chrome mendukung Canvas, WebGL, dan SVG serta sangat cepat. Firefox berada di posisi kedua, dengan munculnya versi 4. Mesin JavaScript-nya memang sedikit lebih lambat daripada Chrome, tetapi sekali lagi dukungannya untuk teknologi render sangat bagus. Opera dan Safari sedang dalam proses menambahkan dukungan WebGL, tetapi versi saat ini hanya mendukung kanvas. Internet Explorer (versi 9+) hanya mendukung rendering kanvas, dan saya belum pernah mendengar Microsoft berencana menambahkan kemampuan WebGL.
3. Menetapkan Latar
Saya akan mengasumsikan bahwa Anda telah memilih browser yang mendukung semua teknologi rendering, dan bahwa Anda ingin merender dengan kanvas atau WebGL, karena keduanya merupakan pilihan yang lebih standar. Kanvas didukung lebih luas daripada WebGL, tetapi perlu diperhatikan bahwa WebGL berjalan di GPU kartu grafis, yang berarti CPU Anda dapat berkonsentrasi pada tugas non-rendering lainnya seperti fisika atau interaksi pengguna yang Anda coba lakukan.
Terlepas dari perender yang Anda pilih, Anda harus ingat bahwa JavaScript harus dioptimalkan untuk performa. 3D bukanlah tugas ringan untuk browser (dan sangat luar biasa bahwa hal ini bahkan dapat dilakukan), jadi berhati-hatilah untuk memahami letak bottleneck dalam kode Anda, dan hapus jika memungkinkan.
Dengan demikian, dan dengan asumsi Anda telah mendownload dan menyertakan three.js dalam file HTML, bagaimana cara menyiapkan tampilan? Seperti ini:
// set the scene size
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
Tidak terlalu rumit, kok.
4. Membuat Mesh
Jadi, kita memiliki tampilan, kamera, dan perender (saya memilih WebGL dalam kode contoh), tetapi kita tidak memiliki apa pun untuk digambar. Three.js sebenarnya dilengkapi dengan dukungan untuk memuat beberapa jenis file standar yang berbeda, yang sangat bagus jika Anda menghasilkan model dari Blender, Maya, Cinema4D, atau yang lainnya. Agar tetap sederhana (ini adalah tentang memulai!) Saya akan membahas primitif. Primitif adalah jaringan geometris, yang relatif dasar seperti Bola, Bidang, Kubus, dan Silinder. Three.js memungkinkan Anda membuat jenis primitif ini dengan mudah:
// set up the sphere vars
var radius = 50, segments = 16, rings = 16;
// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),
sphereMaterial);
// add the sphere to the scene
scene.add(sphere);
Semuanya baik, tetapi bagaimana dengan materi untuk bola? Dalam kode, kita telah menggunakan variabel sphereMaterial, tetapi belum menentukannya. Pertama, kita perlu membahas materi secara lebih mendetail.
5. Bahan
Tidak diragukan lagi, ini adalah salah satu bagian paling berguna dari Three.js. Alat ini menyediakan sejumlah material umum (dan sangat praktis) untuk diterapkan ke mesh Anda:
- 'Dasar' - yang berarti hanya merender 'tidak diterangi'
- Lambert
- Phong
Ada lagi, tetapi sekali lagi demi kemudahan, saya akan membiarkan Anda menemukannya sendiri. Khususnya untuk WebGL, materi ini dapat menjadi penyelamat. Mengapa? Karena di WebGL, Anda harus menulis shader untuk semua hal yang dirender. Shader adalah topik yang sangat besar, tetapi secara singkat, shader ditulis dalam GLSL (OpenGL Shader Language), yang memberi tahu GPU tampilan sesuatu. Artinya, Anda perlu meniru matematika pencahayaan, pantulan, dan sebagainya. Hal ini dapat menjadi sangat rumit dengan sangat cepat. Berkat Three.js, Anda tidak perlu melakukannya jika tidak ingin karena library ini akan mengabstraksinya untuk Anda. Namun, jika ingin menulis shader, Anda juga dapat melakukannya dengan MeshShaderMaterial, sehingga ini adalah penyiapan yang fleksibel.
Namun, untuk saat ini, mari kita terapkan material lambert ke bola:
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});
Perlu juga diperhatikan bahwa ada properti lain yang dapat Anda tentukan saat membuat material selain warna, seperti peta lingkungan atau penghalusan. Anda harus melihat halaman Wiki untuk mengetahui berbagai properti yang dapat Anda tetapkan pada materi dan, pada kenyataannya, objek apa pun yang disediakan mesin untuk Anda. Selain itu, threejs.org baru-baru ini muncul, yang menawarkan tampilan API yang lebih menarik.
6. Lampu!
Jika Anda merender tampilan sekarang, Anda akan melihat lingkaran merah. Meskipun kita telah menerapkan material Lambert, tidak ada cahaya di tampilan sehingga secara default Three.js akan kembali ke cahaya ambient penuh, yang sama dengan pewarnaan datar. Mari kita perbaiki dengan titik cahaya sederhana:
// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
7. Render
Sekarang kita sudah menyiapkan semuanya untuk dirender. Namun, kita sebenarnya perlu melanjutkan dan melakukannya:
// draw!
renderer.render(scene, camera);
Namun, Anda mungkin ingin merender lebih dari sekali, jadi jika Anda akan melakukan loop, Anda harus benar-benar menggunakan requestAnimationFrame; ini merupakan cara tercerdas untuk menangani animasi di browser. Fitur ini belum sepenuhnya didukung, jadi sebaiknya Anda melihat shim Paul Irish.
8. Properti Objek Umum
Jika meluangkan waktu untuk melihat kode Three.js, Anda akan melihat banyak objek yang 'diwarisi' dari Object3D. Ini adalah objek dasar yang berisi beberapa properti yang sangat berguna, seperti informasi posisi, rotasi, dan skala. Secara khusus, Sphere kita adalah Mesh yang diwarisi dari Object3D, yang menambahkan propertinya sendiri: geometri dan materi. Mengapa saya menyebutkan hal ini? Anda mungkin tidak ingin hanya memiliki bola di layar yang tidak melakukan apa pun, dan properti ini patut diselidiki karena memungkinkan Anda memanipulasi detail dasar dari mesh dan material dengan cepat.
// sphere geometry
sphere.geometry
// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array
// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same
9. Dirty Little Secrets
Saya hanya ingin dengan cepat menunjukkan masalah kecil untuk Three.js, yaitu jika Anda mengubah, misalnya, vertex mesh, Anda akan melihat di loop render bahwa tidak ada yang berubah. Mengapa? Karena Three.js (sejauh yang saya tahu) meng-cache data untuk mesh sebagai pengoptimalan. Yang sebenarnya perlu Anda lakukan adalah memberi tahu Three.js bahwa ada hal yang telah berubah sehingga dapat menghitung ulang apa pun yang diperlukan. Anda melakukannya dengan cara berikut:
// changes to the vertices
sphere.geometry.__dirtyVertices = true;
// changes to the normals
sphere.geometry.__dirtyNormals = true;
Sekali lagi, ada lebih banyak lagi, tetapi dua hal yang saya temukan ini adalah yang paling berguna. Anda tentu saja hanya boleh menandai hal-hal yang telah berubah untuk menghindari penghitungan yang tidak perlu.
Kesimpulan
Semoga pengantar singkat tentang Three.js ini bermanfaat bagi Anda. Tidak ada yang lebih baik daripada langsung mencoba sesuatu, dan saya sangat merekomendasikannya. 3D yang berjalan secara native di browser sangat menyenangkan, dan menggunakan mesin seperti Three.js akan menghilangkan banyak masalah bagi Anda dan memungkinkan Anda membuat beberapa hal yang sangat keren. Untuk membantu Anda sedikit, kami telah menggabungkan kode sumber dalam artikel lab ini, sehingga Anda dapat menggunakannya sebagai referensi. Jika Anda menyukainya, beri tahu saya melalui Twitter. Selalu menyenangkan untuk menyapa Anda.