three.js
Pustaka JavaScript untuk Format File 3D
Open Source JavaScript API untuk membaca, menulis, dan merender format file WebGL, FBX, Collada, serta OBJ melalui pustaka 3D Gratis.
three.js adalah pustaka 3d JavaScript murni sumber terbuka yang mudah digunakan yang memberikan kemampuan kepada pengembang perangkat lunak untuk merender file WebGL. Pustaka three.js menawarkan pemuat untuk berbagai format file seperti FBX, Collada serta OBJ tetapi format yang disarankan untuk mengimpor dan mengekspor data adalah glTF. Hal yang hebat tentang format file glTF adalah sangat kompak dan dapat dengan mudah ditransmisikan dan juga memuat dengan sangat cepat.
Pustaka mendukung beberapa fitur penting yang terkait dengan model 3D seperti membuat pemandangan, memuat model 3D, membuat teks, menggambar garis, menyetel kamera, membuat kubus geometris, menambahkan kubus ke pemandangan, merender pemandangan, menambahkan viewport ke elemen, dan masih banyak lagi. Ada berbagai kamera yang digunakan di perpustakaan three.js.
Sekilas
Ringkasan fitur three.js.
- Buat adegan 3D
- Memuat model 3D
- Menggambar garis
- Baca/Tulis FBX
- Baca/Tulis Collada
- Konversi adegan 3D
- Ekspor data dalam glTF
- penanganan komponen
- menangani tekstur
three.js mendukung format file 3D populer yang tercantum di bawah.
Platform Kemerdekaan
three.js dapat dijalankan di semua bundel JavaScript modern, pilihan paling populer adalah webpack.
- JavaScript
Memulai dengan three.js
Cara termudah untuk menginstal three.js adalah dengan menggunakan npm. Silakan gunakan perintah berikut untuk instalasi yang lancar.
Install three.js via NPM
Instal three.js melalui NPM
npm install --save three Buat Adegan menggunakan JavaScript
Perpustakaan open source three.js telah menyediakan dukungan untuk membuat adegan 3D untuk memutar kubus di dalam aplikasi JavaScript mereka sendiri. Untuk menampilkan apa pun dengan three.js kita memerlukan adegan, kamera, dan penyaji. Anda dapat menggunakan kamera yang berbeda dan atributnya untuk menyelesaikan adegan. Selanjutnya, Anda dapat menggunakan instance renderer dan mengatur ukuran yang kita inginkan untuk merender aplikasi kita. Anda dapat menyimpan resolusi yang lebih rendah atau lebih tinggi. Terakhir, Anda menambahkan elemen renderer (<canvas>) ke dokumen HTML Anda. Anda dapat dengan mudah membuat kubus dengan menggunakan BoxGeometry dan menggunakan bahan untuk mewarnainya. Setelah itu, Anda membutuhkan Mesh yang dapat dimasukkan ke dalam scene dan dipindahkan sesuai kebutuhan Anda.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and penyaji. You can use different cameras and their attribute to complete the scene. Next, you can use a penyaji instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the penyaji element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a jala that can be inserted into the scene and moved according to your need.
Memuat Model 3D melalui JavaScript
Pustaka three.js open source memungkinkan pemrogram perangkat lunak memuat model 3D di dalam aplikasi mereka sendiri hanya dengan beberapa baris kode JavaScript. Model 3D tersedia dalam ratusan format file. Setiap model hadir dengan tujuan yang berbeda, fitur lain-lain, dan kompleksitas yang berbeda-beda. Pertama, Anda harus memiliki loader dan setelah itu, Anda akan dapat memuat adegan.
Menggambar Garis dalam Diagram
Perpustakaan open source three.js telah menyediakan dukungan untuk menggambar garis atau lingkaran di dalam aplikasi JavaScript mereka sendiri. Untuk memulainya, kita perlu menyiapkan renderer, scene, dan kamera. Setelah itu, Anda perlu mendefinisikan materi dan dapat menggunakan LineBasicMaterial atau LineDashedMaterial. Setelah materi, kita akan membutuhkan geometri dengan beberapa simpul. Garis ditarik antara setiap pasangan simpul yang berurutan.
