Three.js'nin 10 Çarpıcı Açık Kaynak Örneği İş Başında

Çılgınca görünebilir, ancak aslında JavaScript ile 3B nesneler oluşturabilirsiniz. Çoğu web geliştiricisi, bunu başarmak için Three.js gibi kitaplıklara güvenir.

Ancak bu o kadar ayrıntılı bir süreçtir ki, herkes onu incelemeye zahmet etmez. Şimdi, 3D JS konularını merak ediyorsanız, öğrenmenin en iyi yolu başkalarını incelemektir. İşte tam da bu yüzden bu galeriyi yaptım.

Bunlar, CodePen'de barındırılan bulabildiğim en iyi Three.js projelerinden bazıları. Yaratıcı motorunuzu canlandıracak bir dizi farklı stil ve özelliğe sahiptirler.

1. Düşük Poli Toprak

Tek bir HTML öğesi ve birkaç düzine CSS/JS satırıyla, geliştirici Sam Saccone tarafından hazırlanan bu düşük poli Dünya'ya sahibiz.

İlk başta çok fazla gibi görünmeyebilir. Ama gördüğüm en belirgin fikirlerden biri ve özel bir animasyon efekti bile kullanıyor. Kara kütleleri Dünya'dan bile yapışarak ona çok daha gerçekçi bir görünüm kazandırıyor.

Three.js'yi daha önce kullanmış olan herkes bunun ne kadar harika olduğunu bilmelidir.

Kesinlikle benzer projelerden bir sıçrama - çoğunlukla daha küçük kod tabanı için.

2. Küreler

Bu garip gezegen benzeri proje aynı zamanda Three.js'yi oldukça düzgün bir efektle kullanıyor. Küreler, CSS'ye aktarıldığını görebileceğiniz Stylus ön işlemcisinde çalışır.

Ayrıca HTML olmadan da çalışır – bu da gerçekten görülmesi gereken bir manzaradır. Hepsi JS, tamamı 3D ve her modern tarayıcıda mükemmel şekilde çalışıyor.

Daha küçük küreler, JS kitaplığındaki geometrik işlevleri kullanarak daha büyük küre üzerinde kayar. Bunun mümkün olması bile çılgınca görünüyor, ancak CSS ile ne kadar ilerlediğimizin bir kanıtı.

3. Gezegen Dönmesi

Daha fazla gezegen fikrine girerken, geliştirici Bryan Jones tarafından yaratılan bu çılgın dönen galaksiye sahibiz.

Ayrıca gezegenleri biçimlendirmek ve düzenlemek için Three.js ve bazı temel CSS'lerden başka bir şey kullanmaz. 3D efektlerin şaşırtıcı olduğunu söylemeliyim. Hala bunun tipik bir web tarayıcısında mümkün olduğu gerçeğini kafamdan atamıyorum!

Ancak, Three.js bölgesinde yeni başlıyorsanız, bu CodePen snippet'inin harika bir çalışma yardımcısı olduğu inkar edilemez.

4. Three.js'de Ağaç Ev Logosu

Çevrimiçi öğrenme kaynağı Treehouse, özellikle yeni başlayanlar için olağanüstü. Eğitmenlerinden biri olan Nick Pettit, Three.js kullanarak tam bir Treehouse logosu yarattı.

Ve şunu söylememe izin verin, bu şey harika! Hiç böyle bir kurgu görmemiştim ve bu kadar detaylı yorumlara sahip kalemleri çok nadir görüyorum. Nick'in kodu, araştırmayı, anlamadığınız işlevleri bulmayı ve ardından yanıtlar için Google'ı aramayı çok daha kolay hale getirir.

Bu 3D logo ile ilgili her şey, modern JS'nin eski olmadığını kanıtlamalıdır.

İpucu: logoyu döndürmek için tıklamayı+ekran üzerinde sürüklemeyi deneyin. Eğlenceli şeyler!

5. Ahşap Varil

İşte Nick Pettit tarafından sadece saf JS kodu kullanılarak geliştirilen başka bir çılgın pasaj. HTML yok, CSS yok - her şey JavaScript dili aracılığıyla işleniyor.

Doğal olarak bu, JavaScript içinde oluşturabileceğiniz tuval öğesine dayanır. Kendim biraz kullandım - ama asla bu seviyeye kadar. Sağlam bir 3B kitaplık ile ne kadar yapabileceğinizi göstermeye gidiyor.

Ayrıca Nick'in öğretmeyi gerçekten bildiğini de kanıtlıyor. Bu, CodePen hesabındaki pek çok örnekten yalnızca biridir - bunların tümü, ilerledikçe öğrenmeniz için okunması kolay yorumlara sahiptir.

6. Three.js + TweenMax

Geliştirici Martand Kashyap, bu çılgın şeyi yapmak için TweenMax komut dosyasını Three.js ile birleştirdi.

Bazı harika animasyon efektleriyle bu listedeki en benzersiz kalemlerden biridir. Paneller aslında düz 2B yüzeylere benziyor, ancak çevirme animasyonları doğal bir 3B efekti yaratıyor. Yeterince uzun süre bakarsanız oldukça çılgına döner.

Bu aslında Martand'ın JavaScript'e dönüştürdüğü bir hareketli grafik projesine dayanıyordu. Bunu daha sık görüyorum ve oldukça etkileyici.

7. Parçacık Yıldız Alanı

2D yüzey üzerindeki hareket kavramı akla her türlü paralaks tasarımını getirir. Bunları, JavaScript'teki deneysel özellikleri kullanarak birçok kez web'de bulacaksınız.

Ve CodePen'den gelen bu pasaj, bu tür fikirleri toplamak için harika ötesi. Farklı yakınlaştırma hızları, yana kaydırma ve bir dizi başka ilgili özellik ile oldukça çılgın bir animasyonu var.

Parçacıklar dinamik olarak oluşturulur ve yakınlaştırmak için sayfada herhangi bir yere tıklayabilirsiniz. Bu, hiç bitmeyen bir boşluk gibi geliyor - içinde yaşadığımıza çok benziyor. Ama bu, saf JS koduyla oluşturuldu.

8. Haml Küpleri

Biraz daha dönen geometri için bu Three.js küplerine göz atın. ~ 100 satır JavaScript ile birlikte Haml şablonlama dilinde çalışırlar.

Bu tasarımın belki de en etkileyici kısmı gölgeleme efektidir. Bunu çok sık görmezsiniz, ancak tarayıcıda gerçekçi görünümlü 3B efekt oluşturmanın en iyi yollarından biridir.

Neyse ki, doğru snippet'lerle Three.js aracılığıyla hepsini halledebilirsiniz. Ve bu, bu amaç için harika bir şablon olarak çalışabilir.

9. Tesseract

Mike Fey, 3B uzayda oluşturulan bu inanılmaz derecede karmaşık tesseratı geliştirdi. Aslında daha çok 3B uzayda düzenlenmiş katlanmamış bir küp gibi görünüyor - bir tür küp içinde küp gibi.

Ancak bu demonun devam etmesi için çok sayıda kitaplık gerektiğini unutmayın. Mike'ın jQuery, jQuery UI, ThreeJS, TweenJS ve bir CubeJS betiği ile beş farklı JS betiği vardır. Son 3'ü kişisel sitesinde barındırılmaktadır ve erişim ücretsiz olmalıdır.

Bu projenin gerçek dünyada değerli olacağını söyleyemem. Ancak 3B uzaysal geometriye dalmak istiyorsanız, bu harika bir öğrenme kaynağı.

10. 3B Parçalar

Geliştirici Tobias Duhr, bu 3D Parçaları ThreeJS'de mümkün olanın bir örneği olarak oluşturdu. Şekillerin farklı olması ve gölgelemenin olmaması dışında daha önce bahsedilen dönen küpler gibi çalışırlar.

Nereden başlayacağınızdan emin değilseniz, bunu ThreeJS öğrenmek için daha kolay bir giriş olarak düşünürdüm. Verilmiş, bu bir öğretici değil, bu nedenle size diğer kaynaklar gibi öğretemez.

Ancak, sadece bu kodu inceleyerek, kendi işiniz için bazı yeni fikirlerle uzaklaşacaksınız.

11. 3D Pisagor Ağacı

Bu 3D Pisagor Ağacı tek kelimeyle büyüleyici. Geliştirici Josep Llodra, bu projeyi Three.js kitaplığının yanı sıra yalnızca 150 satır JavaScript ile oluşturdu.

Aslında daha önce bahsettiğim bu projeye dayanıyor. Temel olarak, bu küpleri tanımlanmış tek bir şekle dönüştürür ve ardından boyut ve konuma göre düzenler.

Three.js ile neler yapabileceğinizden emin değilseniz, umarım bu galeri size biraz ilham verir. Ancak etrafa bakmak isterseniz CodePen'de her zaman daha fazlasını bulabilirsiniz.