10 oszałamiających przykładów Open-Source Three.js w akcji

To może wydawać się szalone, ale w rzeczywistości można budować obiekty 3D za pomocą JavaScript. Większość twórców stron internetowych polega na bibliotekach takich jak Three.js, aby to osiągnąć.

Ale jest to tak szczegółowy proces, że nie wszyscy zadają sobie trud przyjrzenia się temu. Jeśli jesteś ciekawy rzeczy 3D JS, najlepszym sposobem na naukę jest studiowanie innych. Właśnie dlatego stworzyłem tę galerię.

To jedne z najlepszych projektów Three.js, jakie udało mi się znaleźć na CodePen. Oferują wiele różnych stylów i cech, które rozbudzą Twoją kreatywność motoryczną.

1. Ziemia o niskiej zawartości poli

Dzięki pojedynczemu elementowi HTML i kilkudziesięciu linijkom CSS/JS mamy tę low poly Earth autorstwa programisty Sama Saccone.

Na początku może się wydawać, że nie jest to dużo. Ale jest to jeden z bardziej znanych pomysłów, jakie widziałem, a nawet wykorzystuje niestandardowy efekt animacji. Masy lądowe odstają nawet od Ziemi, nadając jej znacznie bardziej realistyczny wygląd.

Każdy, kto używał wcześniej Three.js, powinien wiedzieć, jakie to niesamowite.

Z pewnością jest to skok przed podobnymi projektami – głównie ze względu na mniejszą bazę kodu.

2. Kule

Ten dziwny, podobny do planety projekt również używa Three.js z całkiem zgrabnym efektem. Spheres działa na preprocesorze Stylus, który można zobaczyć zaimportowany do CSS.

Działa również bez kodu HTML – co naprawdę sprawia, że ​​jest to widok. To wszystko JS, wszystko 3D i działa doskonale w każdej nowoczesnej przeglądarce.

Mniejsze kule przesuwają się po większej kuli, korzystając z funkcji geometrycznych z biblioteki JS. Wydaje się szalone, że jest to w ogóle możliwe, ale to świadectwo tego, jak daleko zaszliśmy w CSS.

3. Obrót planety

Wchodząc w dalsze pomysły na planetoidy, mamy tę szaloną obracającą się galaktykę stworzoną przez dewelopera Bryana Jonesa.

Używa również niczego oprócz Three.js i kilku podstawowych CSS do stylizowania i organizowania planet. Muszę powiedzieć, że efekty 3D są zaskakujące. Wciąż nie mogę się pogodzić z faktem, że takie rzeczy są możliwe w typowej przeglądarce internetowej!

Ale nie można zaprzeczyć, że ten fragment kodu CodePen jest świetnym pomocnikiem w nauce, jeśli dopiero zaczynasz pracę na terytorium Three.js.

4. Logo domku na drzewie w Three.js

Internetowy zasób edukacyjny Treehouse jest po prostu fenomenalny – szczególnie dla początkujących. Jeden z ich instruktorów, Nick Pettit, stworzył pełne logo Treehouse przy użyciu Three.js.

I powiem, że ta rzecz jest niesamowita! Nigdy nie widziałem takiej konfiguracji i rzadko spotykam długopisy z tak szczegółowymi komentarzami. Kod Nicka znacznie ułatwia kopanie, znajdowanie funkcji, których nie rozumiesz, a następnie szukanie odpowiedzi w Google.

Wszystko w tym logo 3D powinno udowadniać, że współczesny JS wcale nie jest przestarzały.

Wskazówka: spróbuj kliknąć i przeciągnąć po ekranie, aby obrócić logo. Zabawne rzeczy!

5. Drewniana beczka

Oto kolejny szalony fragment stworzony przez Nicka Pettita przy użyciu czystego kodu JS. Bez HTML, bez CSS – wszystko jest renderowane w języku JavaScript.

Oczywiście opiera się to na elemencie canvas, które można wygenerować w JavaScript. Sam trochę go używałem – ale nigdy do tego poziomu. To pokazuje, jak wiele można zrobić z solidną biblioteką 3D.

Dowodzi to również, że Nick naprawdę wie, jak uczyć. To tylko jeden z wielu przykładów na jego koncie CodePen – z których wszystkie mają łatwe do odczytania komentarze do nauki w trakcie.

6. Three.js + TweenMax

Deweloper Martand Kashyap połączył skrypt TweenMax z Three.js, aby stworzyć tę szaloną rzecz.

Jest to jeden z bardziej unikalnych pisaków na tej liście, z kilkoma fajnymi efektami animacji. Panele faktycznie wyglądają jak płaskie powierzchnie 2D, ale animacje odwracania tworzą naturalny efekt 3D. To staje się dość szalone, jeśli patrzysz na to wystarczająco długo.

W rzeczywistości opierało się to na projekcie grafiki ruchomej, który Martand przekonwertował na JavaScript. Widzę to dużo częściej i jest to cholernie imponujące.

7. Pole gwiazd cząstek

Koncepcja ruchu na powierzchni 2D przywodzi na myśl wszelkiego rodzaju projekty paralaksy. Znajdziesz je w całej sieci, wiele razy korzystając z eksperymentalnych funkcji JavaScript.

A ten fragment kodu z CodePen jest fantastyczny do zbierania takich pomysłów. Ma dość szaloną animację z różnymi prędkościami powiększania, panoramowaniem w bok i wieloma innymi powiązanymi funkcjami.

Cząsteczki są generowane dynamicznie i możesz kliknąć w dowolnym miejscu na stronie, aby powiększyć. To jest jak niekończąca się pustka przestrzeni – podobnie jak ta, w której żyjemy. Ale ta jest tworzona za pomocą czystego kodu JS.

8. Kostki Hamla

Więcej informacji o geometrii obrotowej znajdziesz w tych kostkach Three.js. Działają na języku szablonów Haml wraz z ~100 liniami JavaScript.

Być może najbardziej imponującą częścią tego projektu jest efekt cieniowania. Nie widzisz tego zbyt często, ale jest to jeden z najlepszych sposobów na stworzenie realistycznie wyglądającego efektu 3D w przeglądarce.

Na szczęście możesz sobie z tym wszystkim poradzić za pomocą Three.js – z odpowiednimi fragmentami. A ten może działać jako świetny szablon do tego celu.

9. Teserakt

Mike Fey opracował ten niezwykle złożony tesserakt renderowany w przestrzeni 3D. W rzeczywistości wygląda bardziej jak rozłożony sześcian zorganizowany w przestrzeń 3D – trochę jak sześcian w sześcianie.

Pamiętaj jednak, że to demo wymaga wielu bibliotek, aby to działało. Mike ma pięć różnych skryptów JS z jQuery, jQuery UI, ThreeJS, TweenJS i skrypt CubeJS. Te ostatnie 3 są hostowane na jego osobistej stronie i powinny być dostępne.

Nie mogę powiedzieć, żeby ten projekt okazał się wartościowy w realnym świecie. Ale to piekielne źródło nauki, jeśli chcesz zagłębić się w geometrię przestrzenną 3D.

10. Odłamki 3D

Deweloper Tobias Duhr zbudował te fragmenty 3D jako próbkę tego, co jest możliwe w ThreeJS. Działają jak wspomniane wcześniej obracające się sześciany, z tą różnicą, że kształty są inne, a cieniowanie też zniknęło.

Uznałbym to za łatwiejsze wprowadzenie do nauki ThreeJS, jeśli nie jesteś pewien, od czego zacząć. To prawda, że ​​nie jest to samouczek, więc nie możesz go nauczyć jak innych zasobów.

Ale po prostu studiując ten kod, odejdziesz z nowymi pomysłami na własną pracę.

11. Drzewo Pitagorasa 3D

To drzewo Pitagorasa 3D jest po prostu oszałamiające. Deweloper Josep Llodra stworzył ten projekt za pomocą zaledwie 150 linii kodu JavaScript oraz biblioteki Three.js.

Właściwie opiera się na tym projekcie, o którym wspomniałem wcześniej. Zasadniczo tworzy strukturę tych kostek w jeden zdefiniowany kształt, a następnie organizuje je na podstawie rozmiaru i położenia.

Jeśli nie jesteś pewien, co możesz zrobić z Three.js, mam nadzieję, że ta galeria dostarczy trochę inspiracji. Ale zawsze możesz znaleźć więcej na CodePen, jeśli chcesz się rozejrzeć.