Krótki wpis o tym w jak fajnych czasach przyszło nam żyć, mnogość bibliotek, które dzięki internetowi i wspaniałym ludziom, którzy je tworzą, są dziś na wyciągnięcie myszki. Dziś bardzo króciutki wpis, który pokaże jak łatwo i przyjemnie stworzyć coś szalonego, a w dodatku w 3D i to bezpośrednio w naszej przeglądarce. W zamierzchłych czasach do osiągnięcia takiego efektu zapewne użylibyśmy Flash’a, który to nieprzyzwoicie spowalniał nasze przeglądarki, a i pod względem bezpieczeństwa nie jeden ser szwajcarski by mu pozazdrościł ilość dziur. Na szczęście wszystko idzie do przodu i tak też powstał canvas oraz WebGl i w oparciu o te dwie technologie powstała biblioteka języka JavaScript Three.js, którą chciałem Wam pokrótce zaprezentować, a może kogoś zainspirować. Wszystko co jest nam potrzebne znajdziemy pod adresem Threejs.org. Biblioteka posiada świetną dokumentacje. Naszym dzisiejszym bohaterem będzie zielony cylinder. Zacznijmy od przygotowania struktury katalogów pod nasz micro projekt, oraz ściągnięcia odpowiednich plików z witryny threejs.org

Następnie do folderu js kopiujemy pliki three.js oraz OrbitControls.js( dzięki któremu będziemy mieli kontrole nad naszym cylindrem). Plik ten znajdziemy w ściągniętej paczce  (examples->js->controls). W pliku index.html, w którym to będzie działa się magia, zaczniemy od stworzenia struktury dokumentu html i podpięcia naszych skryptów z folderu js.

Następnie w sekcji „head” dodamy niezbędne style.

I teraz w „body” naszego dokumentu utworzymy skrypt, w którym to stworzymy nasz obiecany zielony cylinder, mało tego, sprawimy, że będzie się kręcił z rotacja o którą go poprosimy wzdłuż wybranych osi i jeszcze będziemy mogli go kontrolować przy pomocy myszki i skrola. Poniżej cały niezbędny kod oraz gif z efektem końcowym.

 

Podsumowując, przy nie wielkim nakładzie sił zrobiliśmy coś co robi duże wrażenie, mam nadzieję, że część z Was już sobie wyobraża jak ogromny potencjał drzemie w tej technologii. Zachęcam do głębszego zapoznania się z nią, zwłaszcza, że społeczność wokół threejs i ilość dostępnych poradników jak i osób gotowych pomóc jest bardzo duża.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *