1. Produk
  2.   3D
  3.   JavaScript
  4.   Curtains.js
 
  

Pustaka JavaScript untuk Membuat Interaksi & Animasi 3D 

Open Source JavaScript API yang memungkinkan untuk mengonversi elemen HTML DOM menjadi bidang bertekstur interaktif. Anda dapat dengan mudah Mengelola WebGL & memposisikan mesh Anda relatif terhadap elemen DOM halaman web Anda.

curtains.js adalah pustaka JavaScript ringan open source yang memberi pengembang perangkat lunak kemampuan untuk mengubah elemen DOM HTML mereka menjadi bidang bertekstur interaktif dengan mudah. Pustaka berukuran kecil tetapi sangat stabil memungkinkan pengguna untuk dengan mudah membuat interaksi dan animasi 3D yang kuat. Ini dapat dengan mudah menerjemahkan elemen HTML yang berisi gambar dan video ke dalam bidang bertekstur 3D WebGL, memungkinkan pengguna menganimasikannya melalui shader.

Pustaka ini sangat mudah digunakan tetapi Anda harus memiliki pengetahuan dasar yang baik tentang HTML, CSS, JavaScript, dan shader. shader adalah sekumpulan instruksi yang berjalan di jalur grafik dan memberi tahu komputer cara merender setiap piksel. Anda juga perlu tahu lebih banyak tentang vertex dan fragment shader, cara menggunakan uniform serta dasar-dasar sintaks GLSL.

curtains.js ini tersedia di bawah lisensi MIT yang berarti bebas digunakan untuk proyek pribadi dan komersial. Tujuan utama perpustakaan adalah untuk menyediakan cara mudah untuk menangani WebGL dan memposisikan mesh Anda relatif terhadap elemen DOM halaman web Anda. WebGL adalah API JavaScript untuk rendering grafik 3D dan 2D secara real-time di dalam browser.

Previous Next

Memulai Zen-3d

Cara termudah untuk menginstal curtains.js  adalah menggunakan npm. Silakan gunakan perintah berikut untuk instalasi yang lancar.

Instal curtains.js melalui NPM

npm i curtainsjs 

Kelola Adegan menggunakan JavaScript

Pustaka sumber terbuka curtains.js telah menyertakan fungsionalitas berguna yang terkait dengan manajemen adegan dan propertinya yang relevan. Scene akan menumpuk semua objek yang akan digambar termasuk planes dan shader pass dalam array yang berbeda, dan memanggilnya dalam urutan yang benar untuk digambar. Anda dapat dengan mudah mengatur ulang tumpukan pesawat, menghapus tumpukan tempat, membangunnya kembali dengan indeks tempat baru, menambahkan pesawat baru ke pemandangan, menghapus pesawat dari pemandangan, mengubah posisi pesawat, dan sebagainya.

Menangani Render Properties

Library gratis curtains.js menyediakan kemampuan untuk menangani render di dalam aplikasi Anda sendiri dengan mudah. Penanganan kelas Renderer telah menyediakan beberapa fungsi penting yang terkait dengan konteks WebGL seperti pembuatan dan pemulihan, ekstensi, perintah WebGL, dan banyak lagi. Ini dapat digunakan untuk menghasilkan wadah, menambahkan kanvas, menangani ekstensi WebGL, peristiwa hilangnya/pemulihan konteks, dan membuat objek kelas Scene yang akan melacak semua objek yang ditambahkan. Selain di atas, ia juga mendukung penanganan perintah WebGL global, seperti pembersihan adegan, pengikatan buffer bingkai, kedalaman pengaturan, fungsi campuran, dan sebagainya.

Menganimasikan Gambar dan Video melalui JavaScript

Pustaka sumber terbuka curtains.js memberi pengembang perangkat lunak kekuatan untuk menganimasikan gambar dan video di dalam aplikasi mereka sendiri dengan mudah. Library ini memungkinkan developer membuat bidang yang berisi gambar dan video yang berfungsi seperti elemen HTML biasa, dengan posisi dan ukuran yang ditentukan oleh aturan CSS. Anda juga dapat menggunakan beberapa tekstur, beberapa bidang, beberapa bidang teks kanvas, beberapa tekstur video, dan banyak lagi.

 Indonesia