10 Contoh Open-Source yang Menakjubkan dari Three.js In Action

Ini mungkin tampak gila, tetapi Anda sebenarnya dapat membuat objek 3D dengan JavaScript. Sebagian besar pengembang web mengandalkan perpustakaan seperti Three.js untuk mencapai ini.

Tapi itu adalah proses yang sangat rinci sehingga tidak semua orang mau repot-repot melihatnya. Sekarang, jika Anda ingin tahu tentang hal-hal 3D JS, cara terbaik untuk belajar adalah dengan mempelajari yang lain. Itulah mengapa saya membuat galeri ini.

Ini adalah beberapa proyek Three.js terbaik yang dapat saya temukan di-host di CodePen. Mereka menampilkan banyak gaya dan sifat berbeda yang akan membangkitkan motor kreatif Anda.

1. Tanah Poli Rendah

Dengan satu elemen HTML dan beberapa lusin baris CSS/JS, kami memiliki Earth poli rendah ini oleh pengembang Sam Saccone.

Ini mungkin tidak tampak seperti banyak pada awalnya. Tapi itu salah satu ide paling menonjol yang pernah saya lihat dan bahkan menggunakan efek animasi khusus. Daratan bahkan menonjol dari Bumi, memberikan penampilan yang jauh lebih realistis.

Siapa pun yang pernah menggunakan Three.js sebelumnya harus tahu betapa hebatnya ini.

Ini jelas merupakan lompatan di depan proyek serupa – sebagian besar untuk basis kode yang lebih kecil.

2. Bola

Proyek aneh seperti planet ini juga menggunakan Three.js dengan efek yang cukup rapi. Spheres berjalan pada praprosesor Stylus, yang dapat Anda lihat diimpor ke CSS.

Ini juga berjalan tanpa HTML – yang benar-benar membuat pemandangan ini menarik untuk dilihat. Semuanya JS, semuanya 3D dan berjalan sempurna di setiap browser modern.

Bola yang lebih kecil meluncur di atas bola yang lebih besar menggunakan fungsi geometris dari perpustakaan JS. Tampaknya gila bahwa ini bahkan mungkin, tetapi ini adalah bukti seberapa jauh kami telah datang dengan CSS.

3. Rotasi Planet

Masuk ke ide planetoid lebih lanjut, kami memiliki galaksi berputar gila yang dibuat oleh pengembang Bryan Jones.

Itu juga tidak menggunakan apa pun selain Three.js dan beberapa CSS dasar untuk menata dan mengatur planet. Saya harus mengatakan, efek 3D mengejutkan. Saya masih tidak dapat memahami fakta bahwa hal ini dimungkinkan di browser web biasa!

Tetapi tidak dapat disangkal bahwa cuplikan CodePen ini adalah bantuan belajar yang bagus jika Anda baru memulai di wilayah Three.js.

4. Logo Rumah Pohon di Three.js

Sumber belajar online Treehouse sangat fenomenal – terutama untuk pemula. Salah satu instruktur mereka, Nick Pettit, benar-benar membuat logo Treehouse lengkap menggunakan Three.js.

Dan izinkan saya mengatakan bahwa hal ini luar biasa! Saya belum pernah melihat pengaturan seperti ini dan saya jarang melihat pena yang memiliki komentar rinci seperti itu. Kode Nick membuatnya lebih mudah untuk digali, menemukan fungsi yang tidak Anda pahami, lalu mencari jawaban di Google.

Segala sesuatu tentang logo 3D ini harus membuktikan bahwa JS modern masih jauh dari usang.

Petunjuk: coba klik+seret di atas layar untuk memutar logo. Hal menyenangkan!

5. Tong Kayu

Berikut cuplikan gila lain yang dikembangkan oleh Nick Pettit hanya menggunakan kode JS murni. Tanpa HTML, tanpa CSS – semuanya dirender melalui bahasa JavaScript.

Tentu ini bergantung pada elemen kanvas, yang dapat Anda hasilkan di dalam JavaScript. Saya sendiri telah menggunakannya sedikit – tetapi tidak pernah ke level ini. Ini menunjukkan seberapa banyak yang dapat Anda lakukan dengan perpustakaan 3D yang solid.

Dan itu juga membuktikan bahwa Nick benar-benar tahu cara mengajar. Ini hanyalah salah satu dari banyak contoh di akun CodePen-nya – semuanya memiliki komentar yang mudah dibaca untuk dipelajari sambil jalan.

6. Three.js + TweenMax

Pengembang Martand Kashyap menggabungkan skrip TweenMax bersama dengan Three.js untuk membuat hal gila ini.

Ini adalah salah satu pena yang lebih unik dalam daftar ini, dengan beberapa efek animasi yang keren. Panel sebenarnya terlihat seperti permukaan 2D datar, tetapi animasi membalik menciptakan efek 3D alami. Ini menjadi sangat gila jika Anda menatapnya cukup lama.

Ini sebenarnya didasarkan pada proyek grafik gerak yang diubah Martand menjadi JavaScript. Saya lebih sering melihat ini dan itu sangat mengesankan.

7. Bidang Bintang Partikel

Konsep gerak pada permukaan 2D mengingatkan semua jenis desain paralaks. Anda akan menemukan ini di seluruh web, sering kali menggunakan fitur eksperimental dalam JavaScript.

Dan cuplikan dari CodePen ini sangat luar biasa untuk mengumpulkan ide-ide seperti itu. Ini memiliki animasi yang cukup gila dengan kecepatan zoom yang berbeda, panning ke samping dan banyak fitur terkait lainnya.

Partikel dihasilkan secara dinamis dan Anda dapat mengklik di mana saja pada halaman untuk memperbesar. Ini terasa seperti ruang hampa yang tidak pernah berakhir – seperti yang kita tinggali. Tapi yang ini dibuat dengan kode JS murni.

8. Kubus Haml

Untuk beberapa geometri berputar lainnya, lihat kubus Three.js ini. Mereka berjalan pada bahasa templating Haml bersama dengan ~100 baris JavaScript.

Mungkin bagian yang paling mengesankan dari desain ini adalah efek bayangan. Anda tidak sering melihat ini, tetapi ini adalah salah satu cara terbaik untuk membuat efek 3D yang tampak realistis di browser.

Untungnya, Anda dapat menangani semuanya melalui Three.js – dengan cuplikan yang tepat. Dan yang ini dapat berfungsi sebagai template yang bagus untuk tujuan itu.

9. Tesseract

Mike Fey mengembangkan tesseract yang sangat kompleks ini yang dirender dalam ruang 3D. Ini sebenarnya lebih mirip kubus yang tidak dilipat yang diatur ke dalam ruang 3D – seperti kubus di dalam kubus.

Tetapi perhatikan bahwa demo ini membutuhkan banyak perpustakaan untuk menjalankannya. Mike memiliki lima skrip JS yang berbeda dengan jQuery, jQuery UI, ThreeJS, TweenJS dan skrip CubeJS. 3 yang terakhir di-host di situs pribadinya dan harus bebas untuk diakses.

Saya tidak bisa mengatakan bahwa proyek ini akan terbukti berharga di dunia nyata. Tapi itu adalah sumber belajar yang luar biasa jika Anda ingin menyelami geometri spasial 3D.

10. Pecahan 3D

Pengembang Tobias Duhr membuat Pecahan 3D ini sebagai contoh dari apa yang mungkin dilakukan di ThreeJS. Mereka bekerja seperti kubus berputar yang disebutkan sebelumnya, kecuali bentuknya berbeda dan bayangannya juga hilang.

Saya akan menganggap ini sebagai intro yang lebih mudah untuk mempelajari ThreeJS jika Anda tidak yakin harus mulai dari mana. Memang, ini bukan tutorial sehingga tidak bisa mengajari Anda seperti sumber daya lainnya.

Namun, hanya dengan mempelajari kode ini, Anda akan mendapatkan beberapa ide baru untuk pekerjaan Anda sendiri.

11. Pohon Pythagoras 3D

Pohon Pythagoras 3D ini sangat menakjubkan. Pengembang Josep Llodra membuat proyek ini hanya dengan 150 baris JavaScript, di samping perpustakaan Three.js.

Ini sebenarnya didasarkan pada proyek ini, yang saya sebutkan sebelumnya. Pada dasarnya, ini menyusun kubus-kubus itu menjadi satu bentuk yang ditentukan, dan kemudian mengaturnya berdasarkan ukuran dan posisi.

Jika Anda tidak yakin apa yang dapat Anda lakukan dengan Three.js, saya harap galeri ini menawarkan sedikit inspirasi. Tetapi Anda selalu dapat menemukan lebih banyak di CodePen jika Anda ingin melihat-lihat.