Zawartość
- Pierwsze kroki
- Stworzenie podstawy gramofonu
- Tworzenie stóp
- Ramię i głowa
- Kolory i tekstury
- Renderowanie i eksportowanie
- Wykończenie logo
- Animuj logo
Istnieje kilka sposobów tworzenia animacji 3D w Internecie, z których większość wymaga dobrej znajomości JavaScript i WebGL lub użycia wtyczki, takiej jak Flash. Dzięki przekształceniom CSS 3D możliwe jest tworzenie 3D przy użyciu tylko HTML i CSS, ale nie jest to łatwe. Tridiv, moja bezpłatna aplikacja online, upraszcza proces, oferując prosty i intuicyjny interfejs WYSIWYG, który umożliwia użytkownikom tworzenie obiektów 3D bez pisania ani jednej linii kodu.
W tym samouczku zamierzamy stworzyć i animować logo dla „Tridiv Records”, fikcyjnej wytwórni płytowej, używając tylko HTML i CSS. Główna grafika logo zostanie stworzona w 3D przy użyciu Tridiv. Następnie dodamy elementy typograficzne za pomocą zwykłego HTML i CSS.
Możesz zobaczyć końcową animację i kod, który ją generuje tutaj.
Pierwsze kroki
Zaczniemy od stworzenia gramofonu w 3D za pomocą Tridiv. Wejdź na tridiv.com i uruchom aplikację. Musisz używać przeglądarki Chrome, Safari lub Opera 15 (lub nowszej).
Przed rozpoczęciem ważne jest, aby zapoznać się z interfejsem Tridiv. Główna sekcja edytora składa się z czterech widoków: w lewym górnym rogu znajduje się widok 3D, zapewniający pełny widok sceny. Pozostałe trzy widoki pokazują to z góry, z boku i z przodu. Korzystając z tych trzech widoków, możesz tworzyć, edytować i przenosić kształty 3D.
Poziomy pasek narzędzi jest podzielony na dwie części: lewa część wyświetla informacje dotyczące twojego dokumentu; prawa część zawiera narzędzia do tworzenia i edycji kształtów. Plik Ruszaj się wybór i Edytować przyciski wyboru przełączają między różnymi trybami edycji.
Panel właściwości (pasek boczny) wyświetla ustawienia dokumentu, takie jak powiększenie i przyciąganie do siatki, oraz właściwości wybranego kształtu (rozmiar, położenie, obrót, kolor itd.). Jednostką używaną do określania wymiarów i położenia jest ems; kąty obrotu są podane w stopniach.
Aby uniknąć nieporozumień w dalszej części samouczka, będziemy używać następującego skrótu:
w = szerokość h = wysokość d = głębokość diam = średnica x deg = obrót w osi x y deg = obrót w osi y z deg = obrót w osi z
Stworzenie podstawy gramofonu
Zacznij od ustawienia wartości powiększenia na 200. Aby ułatwić rysowanie kształtów, aktywuj ustawienie przyciągania do siatki w Ustawienia dokumentu sekcji paska bocznego. Ustaw wartość przyciągania na 0.125.
Podstawa gramofonu składa się z prostego prostopadłościanu, więc kliknij Dodaj prostopadłościan na górnym pasku narzędzi. Powinieneś zobaczyć, że prostopadłościan pojawi się we wszystkich czterech widokach w edytorze.
Zmień nazwę kształtu na baza używając pola nazwy w panelu właściwości (pod Właściwości kształtu). Nazwa kształtu musi być prawidłową nazwą klasy CSS, ponieważ będzie używana w kodzie wygenerowanym przez edytor. Nazwy tych klas użyjemy później podczas animowania logo, więc upewnij się, że każdy nowy kształt, który utworzysz, nazwałeś poprawnie.
Po nazwie prostopadłościanu upewnij się, że jest wybrany w widoku z góry (powinien być podświetlony na niebiesko, z okrągłym pierścieniem narzędzi), a następnie kliknij Edytować przycisk u góry pierścienia, aby wyświetlić uchwyty edycji. Przeciągnij uchwyty sterujące po bokach prostopadłościanu, aż osiągniesz szerokość i głębokość w = 10 i d = 8 w Właściwości kształtu.
Kliknij kształt w widoku z boku. Spowoduje to wyświetlenie uchwytów edycyjnych w tym widoku, co pozwoli nam zmienić jego wysokość. Dostosuj wysokość, aż osiągnie h = 2. Możesz także wpisywać wartości bezpośrednio w okienku właściwości. Aby zaokrąglić rogi prostopadłościanu, zmień wartości narożników w panelu właściwości na 1.75, a następnie naciśnij [Wchodzić] aby zastosować zmiany. Będziesz miał coś takiego.
Tworzenie stóp
Do nóżek gramofonu użyjemy cylindrów. Dodaj cylinder, a następnie zmień jego średnicę na średnica = 1,75 i jego wysokość do h = 0,5. Kliknij na Ruszaj się przycisk wyboru na górnym pasku narzędzi, aby wyświetlić obszar, który można przeciągać na kształcie. Przesuń cylinder pod podstawę, umieszczając go w jednym z rogów. (Może być konieczne przeniesienie go w widoku z góry, z boku i z przodu).
Zduplikuj cylinder (naciśnij Duplikować w okrągłym pierścieniu narzędzi lub naciśnij przycisk re klucz) i przesunąć nowy cylinder do innego rogu podstawy. Powtarzaj ten proces, aż wszystkie cztery nóżki zostaną prawidłowo ustawione. Nie zapomnij nazwać cylindrów (na przykład stopy-lewa góra, feet-right-top, feet-left-bottom, stopy-lewa góra). Kiedy to zrobisz, wynik powinien wyglądać tak.
Przyjrzymy się teraz tworzeniu talerza, dysku, osi ramienia i przycisku. Proces tworzenia kolejnych kształtów jest podobny jak w przypadku stóp. Oto wymiary używane dla różnych cylindrów:
talerz: śr = 7; h = 0,5 krążka: śr. = 6,75; przycisk h = 0,25: śr. = 1,5; h = 0,25 podstawa osi ramienia: śr. = 2,25; h = 0,25 oś ramienia: średnica = 1,375; h = 1
Aby udoskonalić boki walców, możesz zwiększyć liczbę ścian w każdym z nich, korzystając z pola Boki w panelu właściwości. Nie dodawaj zbyt wielu stron, ponieważ może to negatywnie wpłynąć na ogólną wydajność edytora i końcową animację. W takim przypadku radziłbym nie używać więcej niż 32 stron na talerz i płytę. Powinieneś mieć coś takiego.
Ramię i głowa
Do ramienia i główki gramofonu użyjemy prostopadłościanów. Dla ramienia utwórz prostopadłościan (w = 0,25; h = 0,25; d = 4), a następnie zastosuj obrót -33° na oś y. Na głowę utwórz prostopadłościan (w = 0,5; h = 0,5; d = 1), a następnie zastosuj obrót -33° na oś y. Wyrównaj oba kształty z cylindrem osi ramienia. Wynik powinien wyglądać tak.
Kolory i tekstury
Gramofon prawie skończyliśmy. Ostatnim krokiem jest przypisanie kolorów i nałożenie tekstury na winyl (obraz przedstawiający powierzchnię płyty). Aby przypisać kolory, wybierz kształt i kliknij zabarwienie pole w panelu właściwości. Tridiv umożliwia określenie indywidualnych kolorów dla każdej ściany kształtu, ale w tym przykładzie musimy użyć pola all, aby zmienić kolor wszystkich twarzy. Aby to zrobić, wprowadź szesnastkowy kod koloru w polu, a następnie potwierdź, naciskając Wchodzić.
Oto kolory użyte w tym przykładzie:
podstawa: # 0099FF stopy, przycisk, oś, ramię i głowa: # F2EEE5 dysk: # fa7f7a
W przypadku tekstury winylu proces jest podobny do przypisywania kolorów. Wybierz cylinder dysku, a następnie kliknij obrazy pole w panelu właściwości. Wklej adres URL obrazu, który chcesz zastosować na winylu w górnym polu i potwierdź, naciskając Wchodzić. Możesz użyć własnego obrazu lub pobrać obraz użyty w tym przykładzie.
Powinieneś teraz mieć coś, co wygląda tak.
Renderowanie i eksportowanie
Teraz, gdy gramofon jest gotowy, zajmiemy się sposobem jego renderowania przed wyeksportowaniem. Kliknij Zapowiedź przycisk u góry panelu właściwości. Ustaw wartość powiększenia na 200 aby gramofon był większy. Aby usunąć czarne obramowanie kształtów, przejdź do pliku Granice sekcji okienka i ustaw krycie na 0. Wynik powinien wyglądać mniej więcej tak.
Chcemy, aby gramofon był oświetlany od góry. Aby to zrobić, obróć scenę w taki sposób, aby górna część gramofonu była skierowana w Twoją stronę. Podstawa powinna wyglądać idealnie prostokątnie. Zmiana wartości jasności i ciemności w sekcji tridiv.com/d/4k6 panelu właściwości spowoduje regenerację cieni w scenie. Zmień wartość światła na 0.
Gramofon jest teraz gotowy do eksportu!
Wykończenie logo
Jesteśmy gotowi, aby dodać tekst do logo i stworzyć animację logo. Kliknij Edytować na przycisku CodePen w lewym dolnym rogu Zapowiedź view, aby wyeksportować kod do CodePen. Należy zauważyć, że kod CSS wygenerowany przez Tridiv nie używa prefiksów dostawców, więc będziesz musiał użyć narzędzi takich jak prefixr.com lub leaverou.github.io/prefixfree, aby kod działał w każdej przeglądarce. Zacznij od zamknięcia panelu JavaScript, ponieważ nie będziemy go używać. W panelu HTML usuń tag stylu zastosowany do pliku .scena div.
Rozwiń panel CSS i dodaj na końcu następujący kod:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Tutaj translateY (-140px) przesuwa gramofon o 140 pikseli w górę, pozostawiając miejsce na tekst pod nim. A później rotateX (-55deg) ustawia pionowe nachylenie stołu obrotowego.
Aby dodać tekst, musisz dodać plik .tytuł div zaraz po otwarciu #tridiv div w panelu HTML. Wewnątrz dodaj dwa przęsła> (.main-title i .sub-title), oddzielone h />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Następnie musisz zastosować odpowiednie czcionki i style. W panelu CSS zaimportuj czcionkę Open Sans używaną w logo i dodaj podstawowe style elementów tekstowych.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Wyśrodkowanie bloku tekstu + podstawowe style czcionek * / tytuł {pozycja: bezwzględna; góra: 50%; po lewej: 50%; margines: 0 0 0 -165px; szerokość: 330px; wysokość: 5em; rodzina czcionek: „Open Sans”, sans-serif; waga czcionki: 300; rozmiar czcionki: 24px; wyrównywanie tekstu: do środka; odstępy między literami: 1,5em; kolor: # 0099FF; } title hr {border: 1px solid # fa7f7a; margines: 0,75em 0; } zakres tytułu {display: block; } .main-title {font-size: 2.15em; } .sub-title {tekst-wcięcie: .25em; }
Voilà! Twoje logo jest kompletne. Powinien wyglądać jak na poniższym obrazku. Gdy model 3D jest gotowy, możesz wykorzystać moc CSS, aby uczynić go jeszcze lepszym, dodając style, animacje lub zdarzenia myszy: potraktuj model 3D jak każdy inny element HTML.
Animuj logo
Zobacz animację wykorzystującą logo tutaj. Gdy części gramofonu „opadają”, każda z nich ma tę samą animację klatki kluczowej z różnymi opóźnieniami. Kształty mają ustawiony najwyższy atrybut 50%. Aby stworzyć efekt spadania, animujemy atrybut najwyższy z -400px do 50%:
@keyframes spadają o {0% {top: -400px; } / * Rozpoczynamy animację pozycjonowania kształtu na wysokość 400px * / 100% {top: 50%; } / * to kończymy na jego pierwotnej pozycji * /}
Możesz dodać tę animację do wszystkich kształtów w następujący sposób:
.shape {góra: -400px; animacja: spadek 1s luz 0s do przodu; }
Ustaw atrybut top na -400px i dodaj opóźnienie:
.platter {opóźnienie animacji: 1,05 s; } .disc {opóźnienie animacji: 1,35 s; } .button {opóźnienie animacji: 1,5 s; } ...
Utwórz ostateczny efekt „odbicia” za pomocą rotateX atrybut:
90% {transformacja: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transformacja: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transformacja: translateY (-4,5em) rotateX (660deg) rotateY (0deg); }
Tak stworzyliśmy tę konkretną wersję, ale pamiętaj: nie ma ograniczeń!
Słowa: Julian Garnier
Ten artykuł ukazał się pierwotnie w numerze 248 magazynu sieciowego.
