Pengantar
Saya telah menggunakan Three.js untuk beberapa eksperimen saya, dan alat ini benar-benar dapat menghilangkan kerepotan menggunakan 3D di browser. Dengan platform ini, Anda dapat membuat kamera, objek, lampu, material, dan lainnya, serta memiliki pilihan perender, yang berarti Anda dapat memutuskan apakah ingin menggambar adegan menggunakan kanvas HTML 5, WebGL, atau SVG. Dan karena ini {i>open source<i}, Anda bahkan dapat terlibat dalam proyek tersebut. Sekarang, saya akan fokus pada apa yang telah saya pelajari dengan menggunakannya sebagai mesin, dan membahas beberapa dasar.
Untuk semua kehebatan Three.js, ada kalanya Anda mungkin kesulitan. Biasanya Anda perlu menghabiskan banyak waktu untuk menggunakan contoh, rekayasa balik, dan (dalam kasus saya tentu saja) memburu fungsi tertentu dan sesekali mengajukan pertanyaan melalui GitHub. Jika Anda harus bertanya, ngomong-ngomong, menurut saya Mr. doob dan AlteredQualia sangat membantu.
1. Dasar-dasar
Saya akan berasumsi bahwa Anda setidaknya memiliki pengetahuan tentang 3D dan kemahiran yang wajar dalam JavaScript. Jika tidak, ada baiknya Anda mempelajarinya sebelum mencoba dan mencoba-coba hal ini, karena ini bisa sedikit membingungkan.
Dalam dunia 3D, kami memiliki beberapa hal berikut, yang akan memandu Anda melalui proses pembuatan:
- Sebuah adegan
- Perender
- Kamera
- Satu atau dua objek (dengan material)
Tentu saja Anda dapat melakukan hal-hal keren, dan saya berharap Anda akan terus melakukannya dan mulai bereksperimen dengan 3D di browser.
2. Dukungan
Hanya catatan singkat tentang dukungan di browser. Menurut pengalaman saya, browser Chrome Google adalah browser terbaik dalam hal perender yang didukung, dan kecepatan mesin JavaScript yang mendasarinya. Chrome mendukung Canvas, WebGL, dan SVG, dan sangat cepat. Firefox adalah yang kedua, dengan munculnya versi 4. Mesin JavaScript-nya tampaknya sedikit lebih lambat daripada Chrome, tetapi sekali lagi dukungannya untuk teknologi render sangat bagus. Opera dan Safari sedang dalam proses penambahan dukungan WebGL, tetapi versinya saat ini hanya mendukung kanvas. Internet Explorer (versi 9+) hanya mendukung rendering kanvas, dan saya belum pernah mendengar apa pun mengenai rencana Microsoft untuk menambahkan kemampuan WebGL.
3. Atur Pemandangan
Saya anggap Anda telah memilih browser yang mendukung semua teknologi rendering, dan Anda ingin merender dengan kanvas atau WebGL, karena keduanya merupakan pilihan yang lebih standar. Canvas lebih didukung secara luas daripada WebGL, tetapi perlu diperhatikan bahwa WebGL berjalan pada GPU kartu grafis Anda, yang berarti CPU Anda dapat berkonsentrasi pada tugas non-render lainnya seperti fisika atau interaksi pengguna apa pun yang sedang Anda coba.
Terlepas dari perender yang dipilih, Anda harus ingat bahwa JavaScript harus dioptimalkan untuk meningkatkan performa. 3D bukanlah tugas yang mudah bagi browser (dan luar biasa, hal itu dapat terjadi). Jadi, berhati-hatilah untuk memahami letak bottleneck pada kode Anda, dan hapus error tersebut jika bisa.
Jadi, dengan asumsi Anda telah mendownload dan menyertakan tiga.js dalam file HTML, bagaimana cara menyiapkan scene? 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, sebenarnya!
4. Membuat Jaring
Jadi kita memiliki adegan, kamera, dan perender (saya memilih WebGL dalam kode contoh saya), tetapi tidak ada yang dapat kami gambar. 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 semuanya tetap sederhana (lagi pula, ini tentang memulai!) Saya akan berbicara tentang primitif. Primitif adalah jaring geometris, yang relatif dasar seperti Spheres, Planes, Cubes, dan Cylinders. 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);
Semua bagus, tapi bagaimana dengan bahan untuk bola ini? Dalam kode, kita telah menggunakan variabel sphereMaterial, tetapi belum menentukannya. Pertama, kita perlu berbicara tentang material secara lebih detail.
5. Bahan
Tanpa diragukan lagi, ini adalah salah satu bagian yang paling berguna dari Three.js. Di sini Anda mendapatkan sejumlah material umum (dan sangat berguna) untuk diterapkan ke mesh Anda:
- 'Basic' - yang berarti bahwa ia merender 'tidak menyala'
- Lambert
- Jaket Phong
Masih banyak lagi, tetapi sekali lagi untuk kesederhanaan, saya akan membiarkan Anda menemukannya sendiri. Dalam kasus WebGL, materi ini dapat sangat menghemat penggunaan. Mengapa? Karena di WebGL, Anda harus menulis shader untuk semua yang dirender. Shader adalah topik yang sangat besar, tetapi singkatnya, Shader ditulis dalam GLSL (OpenGL Shader Language), yang memberi tahu GPU bagaimana seharusnya tampilan sesuatu. Ini berarti Anda perlu meniru perhitungan pencahayaan, refleksi, dan sebagainya. Hal ini bisa menjadi sangat rumit dengan sangat cepat. Berkat Three.js, Anda tidak perlu melakukan ini jika tidak ingin karenanya akan memisahkan Anda. Namun, jika ingin menulis shader, Anda juga dapat melakukannya dengan MeshShaderMaterial, sehingga ini merupakan penyiapan yang fleksibel.
Untuk saat ini, mari kita terapkan materi lambert ke bola dunia:
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});
Perlu diperhatikan juga bahwa ada properti lain yang dapat Anda tentukan saat membuat material selain warna, seperti penghalusan atau peta lingkungan. Anda harus memeriksa halaman Wiki untuk mengetahui berbagai properti yang dapat disetel pada materi dan, bahkan, objek apa pun yang disediakan mesin untuk Anda. Selain itu, threejs.org baru-baru ini bermunculan, yang menawarkan tampilan API yang lebih menarik.
6. Lampu!
Jika merender tampilan sekarang, Anda akan melihat lingkaran merah. Meskipun kita menerapkan material Lambert, tidak ada cahaya dalam scene, sehingga Three.js secara default akan kembali ke cahaya standby penuh, yang sama dengan pewarnaan datar. Mari kita perbaiki masalah ini 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
Kini kami memiliki semuanya yang telah disiapkan untuk melakukan render. Namun, kita benar-benar perlu melakukan hal tersebut:
// draw!
renderer.render(scene, camera);
Anda mungkin ingin merender lebih dari sekali, jadi jika akan melakukan loop, Anda harus benar-benar menggunakan requestAnimationFrame; ini adalah cara paling cerdas untuk menangani animasi di browser. Halaman ini belum didukung sepenuhnya, jadi sebaiknya baca shim Paul Irish.
8. Properti Objek Umum
Jika Anda meluangkan waktu untuk memeriksa kode Three.js, Anda akan melihat banyak objek yang 'mewarisi' dari Object3D. Objek ini adalah objek dasar yang berisi beberapa properti yang sangat berguna, seperti informasi position, rotasi, dan scale. Secara khusus, Sphere adalah Mesh yang diturunkan dari Object3D, tempat Object3D menambahkan propertinya sendiri: geometry dan materials. Mengapa saya menyebutkan ini? Tidak mungkin Anda hanya ingin memiliki sphere di layar yang tidak melakukan apa-apa, dan properti ini perlu diselidiki karena memungkinkan Anda memanipulasi detail dasar 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. Rahasia Kecil yang Kotor
Saya hanya ingin menunjukkan temuan singkat untuk Three.js, yaitu jika Anda memodifikasi, misalnya, verteks mesh, Anda akan melihat di loop render bahwa tidak ada yang berubah. Mengapa? Nah, karena Three.js (sejauh yang saya tahu) menyimpan data untuk mesh ke dalam cache sebagai bagian dari pengoptimalan. Yang perlu Anda lakukan adalah menandai ke Three.js bahwa ada sesuatu yang telah berubah sehingga dapat menghitung ulang apa pun yang diperlukan. Anda melakukan ini dengan hal berikut:
// changes to the vertices
sphere.geometry.__dirtyVertices = true;
// changes to the normals
sphere.geometry.__dirtyNormals = true;
Sekali lagi, masih banyak lagi, tapi menurut saya itu adalah yang paling berguna. Seharusnya, Anda hanya menandai hal-hal yang telah berubah untuk menghindari penghitungan yang tidak perlu.
Kesimpulan
Semoga pengantar singkat Three.js ini bermanfaat. Sebenarnya tidak ada salahnya mencoba melakukan sesuatu dan saya sangat tidak merekomendasikannya. 3D yang berjalan secara native di browser sangat menyenangkan, dan menggunakan mesin seperti Three.js menghilangkan banyak kerumitan dan memungkinkan Anda membuat beberapa hal yang benar-benar keren. Untuk membantu Anda, saya telah menyelesaikan kode sumber di artikel lab ini, sehingga Anda dapat menggunakannya sebagai referensi. Jika Anda menyukai informasi ini, beri tahu saya melalui Twitter, kami akan menyapanya kapan saja.