Utwórz stronę Lądowania WebGL 3D

Tworzenie strony Landingowej WebGL 3D jest jednym ze sposobów na dobre pierwsze wrażenie z publicznością. Dzięki Webgl możesz dostarczyć wysokiej jakości zawartość wizualną bezpośrednią w przeglądarce. Możesz to zrobić bez wtyczek lub specjalnych wymagań. Wszystkie nowoczesne przeglądarki obsługują webgl wraz z urządzeniami mobilnymi i tabletkami. Webgl umożliwia tworzenie niesamowitalnych scen 3D. Może zasilać doświadczenia WebVR, manipulowanie wideo, renderować cieniowanie graficzne i wiele więcej.

W tym samouczku zrobisz stronę docelowej dla fikcyjnego studia filmowego, stosunkowe studia. Koncepcja jest dramatyczna i wzrokowo angażująca, jako tajemniczy obiekt odzwierciedla i obraca się w odpowiedzi na interakcję myszy. Cząstki wokół niego, zmieniając kolor, jak się poruszają. Pracujesz przez każde z kroków, aby utworzyć tę interaktywną stronę, umożliwiając wygenerowanie własne dla swoich projektów (do dalszej inspiracji, zobacz nasze stanowisko w najlepszych Strony docelowe. ).

Użyjesz tylko dołączonych funkcji trzech.js, potężnej biblioteki renderowania 3D dla sieci. Możesz użyć własnych obrazów jako tekstur, aby uczynić go wyjątkowym. Dowiesz się również o wykorzystaniu siatki, oświetlenia i tekstur, aby zwiększyć szczegóły powierzchni, jak korzystać z map środowiskowych i jak dodawać warstwy na głębokość i odsetki.

Powinien być więcej niż wystarczający, aby zacząć, i dużo do napędzania kolejnych projektów.

Zanim zaczniesz, Pobierz pliki dla tego samouczka .

01. Podstawowa konfiguracja HTML

Aby rozpocząć, potrzebujesz gdzieś, aby zobaczyć swoją scenę 3D. Skonfiguruj podstawowy plik HTML i zawiera link do trzech.js. Może to być hostowane zewnętrznie lub dodane z Three.js repozytorium tutaj: . Dodaj kilka prostych CSS, aby strona pełnego ekranu i usunąć wszelkie paski przewijania. Zapisz plik do lokalnego serwera WebServer, dzięki czemu możesz podawać HTML, gdy jest gotowy do testowania. Dodaj następujący kod, aby rozpocząć.

! DocType HTML & GT;
& lt; html & gt;
& lt; Head & GT;
& LT; Tytuł i GT; Studia Względne / Tytuł i GT;
& lt; skrypt src = "libs / three.min.js" & gt; & lt; / script & gt;
& lt; style & gt;
html, ciało {margines: 0; Wyściółka: 0; Przepełnienie: Ukryte; }
& LT; / Style & GT;
& LT; / Head & GT;
& lt; body & gt;
& lt; script & gt;
// kod 3D idzie tutaj
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Dodaj globalne warianty

Wystąpiłeś kilka zmiennych do referencji w ciągu całej reszty kodu. Ustaw te teraz. Będzie to obejmować tablicę, aby utrzymać cząstki, zmienną "T" dla tetrahedron, myszy, Raycaster i światła.

Wewnątrz tagów skryptów rozpocznij od dodawania następującego kodu.

 // vars
var num = 30;
var obiekty = [];
var raymaster = nowy trzy.raycaster ();
var myszy = nowy trzy.vector2 ();
var light, t; 

03. Dodaj scenę, aparat i render

Musimy najpierw dodać scenę, która będzie zawierać wszystkie nasze obiekty. Następnie dodajemy kamerę, która może poruszać się w niej, przechylając, przechylając i poruszać się, jak potrzebujemy. Pierwszym atrybutem jest pole widzenia. Drugi jest współczynnikiem proporcji. Możesz także zdefiniować samoloty przycinające w pobliżu i czwartej atrybutów. Ostatni, dodaj renderator, który obsługuje rysowanie sceny na płótnie.

W znaczniku skryptu Dodaj następujący kod.

 // Utwórz kamerę
var camera = nowa trzy.perspectivecamera
(65, window.innerwidth / window.innerheight,
0,1, 1000);
camera.position.set (0,0,0.0,5);
// Utwórz scenę
var scene = nowy trzy.scene ();

// Utwórz render.
var renderer = nowy trzy.webglmrenderer (
{Antialas: True});
Render.Setize (window.innerwidth, okno.
innerheight);
Document.body.appendChild (Render.darkement.
);

04. Dodaj reflektor

Następnie musisz dodać światło do sceny. Trzy.js wyposażone są w różne światła, w tym punkt, kierunkowy, otoczenia i reflektory. Użyj tego centrum. Daje Ci pozycję i właściwości kierunkowe, i pozwoli Ci rzucić cienie, jeśli chcesz później.

Dodaj następujący kod, aby dodać reflektor.

 // Utwórz światło punktowe
Light = Nowy Three.Spotlight (0xCCDDFF ,,,8);
Light.position.set (0,0,5);
scena.add (światło); 

05. Dodaj pętlę animacji

Pętla animacji, czasami nazywana "pętli renderowania", nazywana jest idealnie 60 razy na sekundę. Film działa przy 24 klatkach na sekundę (FPS), a to jest wystarczająco szybkie, aby oszukać oko do widzenia stałego ruchu bez przerwy. W animacji komputerowej dążymy do co najmniej 30 fps, ale idealnie 60fps. Zapewnia to bardzo gładką wydajność wizualną, nawet jeśli ramki są okresowo spadły.

Wiązujemy tę pętlę animacyjną do funkcji żądaniaFramacyjne, co robi dwie rzeczy. Po pierwsze, zapewnia, że ​​przeglądarka jest gotowa renderować następnej klatki. Oznacza to również animacje mogą przerwać renderowanie, gdy użytkownik nie jest już przeglądający tę kartę przeglądarki,

Dodaj ten kod, aby renderować scenę w pętli animacji:

 Var Animate = Funkcja () {
prośbacyjnyframeFrame (animate);
Render.Render (scena, aparat);
};

// Rozpocznij pętlę animacji
animować (); 

06. Załaduj teksturę ziemi

Następnie stworzysz ziemię na scenę. Aby rozpocząć, musisz załadować obraz do użycia. Tekstury dla rzeczy, takich jak powierzchnie ziemi i ściany, mogą być tworzone poprzez wykonanie własnych zdjęć i starannie przycinanie krawędzi regulacji Photoshop CC. . Upewnij się, że mogą ładnie płytki. Zacznij szybko, są również świetne biblioteki online, widząc jak najlepiej Bezpłatne tekstury. .

Możesz wybrać wszystko, co będzie płytki. Oznacza to, że krawędzie mienią się bezproblemowo, jeśli położyłeś je obok siebie. Możesz wybrać coś w rodzaju płytek lub kamienia. Zauważ, że używasz opcji zawijania tekstury, aby powtórzyć opakowanie na to. Ten przykład używa powtarzania 12x12. Dostosuj to, aby dopasować się do zdjęcia po przetestowaniu sceny.

 // załaduj teksturę ziemi
Var Texture = Nowy Three.TextureLoader ().
ładunek ("Aktywa / kamień.jpg");
tekstura.wraps = tekstura.wapt = trzy.
Repeatwpling;
tekstura.repeat.set (12,12);

07. Utwórz materiał naziemny

Trzy.js obejmuje różne typy materiałów do użycia. Materiały są uważane za skórę, która obejmuje obiekt 3D. Można korzystać z podstawowych materiałów, które nie reagują na światła lub phong lub Lambert Shader Materials. Możesz również używać własnych niestandardowych materiałów cieniujących. Dla tej ziemi użyj fizycznego materiału. Ma bardzo realistyczny wygląd, bardzo dobrze reagując na światło. Użyj tekstury załadowanego jako mapę rozproszoną, a także jako bumpmap, jeśli nie masz tego konkretnej tekstury.

 // Utwórz materiał naziemny
Material = Nowy Three.MeshysicalMaterial ({Mapa: Tekstura, Bummmap: Tekstura}); 

08. Utwórz siatkę naziemną

Kiedy łączymy materiał (skóra) z geometrią, która określa kształt obiektu 3D, tworzymy siatkę. Na ziemię potrzebujesz prostego planu. Materiał shader i tekstura utworzą iluzję złożonego detale powierzchni.

Dodaj następujący kod, aby utworzyć swoją siatkę uziemiając, obróć się do ładnego kąt i umieść go poniżej kamery. Pamiętaj, aby uruchomić swój kod po tym, aby zobaczyć, jak to wygląda. Dostosuj dowolny kod, w którym musisz go wybrać.

 // Utwórz siatkę naziemną
var geometria = nowa trzy.planebuffergeometry
(100 100);
var teren = nowy trzy.mesh (geometria,
materiał );
ground.rotation.Z = math.pi / 180 * -45;
ground.rotation.x = math.pi / 180 * -90;
ground.position.y = -2.0;
scena.add (ziemia); 

09. Załaduj cel

Następnie dodasz centralny obiekt 3D na zainteresowanie ogniskowym. To jest gwiazda twojej sceny, więc wybierz teksturę, którą chcesz go przykryć. Uwaga: Udaj się, aby ten obiekt jest wysoce odblaskowy, więc tekstura, którą tu ładujesz, jest bardziej subtelny wygląd niż ziemia.

 // Tekstura obiektów obciążenia
Var Texture = Nowy Three.TextureLoader ().
obciążenie ("Aktywa / Rock_01_Diffusion.jpg"); 

10. Utwórz mapę środowiska

Następnie utwórz środowisko wokół obiektu, który zostanie odzwierciedlony na jego powierzchni. Możesz również dodać to do sceny jako scena. Właściwość, jeśli chcesz. Aby załadować środowisko, używasz kubeteksturelloader. Wykorzystane obrazy powinny być sześć obrazów, które skóra wnętrze twojej kostki, aby utworzyć bezszwowy obraz, zwany mapami kostki.

 Var Envmap = Nowy Three.Cubetextureloader ()
.setPath ('Aktywa /')
.load (['px.jpg', 'nx.jpg', 'py.jpg', "NY.
jpg ',' pz.jpg ',' nz.jpg ']); 

11. Dodaj Tetrahedon.

Three.js wyposażone są w wiele domyślnych geometrii, których możesz użyć do swoich scen. Jeden z chłodniejszych jest tetrahedron. Potrzeba promienia i parametru "szczegółu", aby zdefiniować liczbę twarzy obiektu.

Dodaj jeden na scenę, z następującym kodem.

 // Utwórz tetrahedron
var geometria = nowy trzy.
Tetrahedronbuffergeometry (2,0);
Var Material = Nowy Three.MeshysicalMaterial
({Mapa: Tekstura, Envmap: Envmap,
Metalowość: 1,0, szorstkość: 0,0});
t = nowy trzy.mesh (geometria, materiał);
t.rotation.x = math.pi / 180 * -10;
scena.add (t);

12. Dodaj docelowy rotacji i kamery

Aby upewnić się, że aparat zawsze patrzy na główny obiekt, używasz funkcji aparatu.lookat. Możesz również dodać trochę obrotu otoczenia do obiektu.

Zaktualizuj kod funkcji animowanego, aby wyglądał tak.

 ŻądanieFrameFrame (Animate);
t.rotation.y - = 0,005;
camera.lookat (t.position);
Render.Render (scena, aparat); 

13. Dodaj pętlę cząstek

Następnie dodaj kilka cząstek otoczenia na scenę. Będą one ładnie mieszać z pętlą wideo pierwszego planu, którą dodasz później, a także interaktywne. Dodaj proste "dla" pętli, aby utrzymać kod, używać do tworzenia wielu cząstek.

 Dla (I = 0; I & LT; = num; i ++) {
// Kod cząstek pójdzie tutaj
} 

14. Utwórz siatkę cząstek

Pierwszą rzeczą do zrobienia jest utworzenie obiektu cząstek. Możesz to zrobić z sferami, sprytnymi lub dowolnym obiektem. Na razie spróbuj zrobić ich proste kule.

Wewnątrz pętli Dodaj następujący kod.

 // Utwórz nową siatkę
var geometria = nowa trzecia.spherebuffergeometry (0,16,6);
Var Material = Nowy Three.MeshysicalMaterial ({EnvMap: EnvMap, Metalness: 1.0});
var wire = nowy trzy.mesh (geometria, materiał);

15. Ustaw losową pozycję i odległość

Cząsteczki będą orbitować centralny obiekt i powinny być losowo ustawione, aby ładnie wypełnić przestrzeń i mają organiczny wygląd. Dodaj następujący kod, aby ustawić nieregularną pozycję, a następnie przypisać stałą odległość dla każdej cząstki.

 // Ustaw losową pozycję
cząstek.position.set (math.random () * 100.0 -
50.0,0.0, matematyka.Random () * - 10.0);
// Calk Distnace jako stałą i przypisuje
sprzeciwiać się
var a = nowy trzy.vector3 (0, 0, 0);
var b = wire.position;
var d = a.distancento (b);
cząstek.distance = d;

16. Ustaw kąty do orbitów

Aby szybciej ożywić orbity, dodać stałe kątowe dla orbitów i przechowują je jako właściwość cząstki. Dodaj następujący kod, aby zdefiniować te losowe kąty treści.

 // Definiuj 2 losowe, ale ciągłe kąty
w radianach.
Często.Radians = math.random () * 360 * Matematyka.
PI / 180; // Kąt początkowego
Często.Radians2 = math.random () * 360 * Matematyka.
PI / 180; // Kąt początkowego

17. Dodaj cząstkę do sceny i kolekcji

Wreszcie, dodaj cząstkę na scenę i do tablicy obiektów zdefiniowałeś wcześniej. Spowoduje to łatwe dołączenie wszystkich cząstek.

 // Dodaj obiekt na scenę
scena.add (cząstka);
// dodać do kolekcji
obiekty.push (cząstka);

18. Dodaj animację do cząstek

Następnie musisz zaktualizować położenie i obrót obiektów cząstek. Orbitę w stałej odległości od centrum sceny. Dodaj następujący kod do funkcji animacji.

 Dla (I = 0; I & LT; = num; i ++) {
var o = obiekty [i];
o.rotation.y + =. 01;
Jeśli (I% 2 == 0) {
O.Radians + =. 005; O.Radians2 + =. 005;
} else {
O.Radians - = 0, 005; o.Radians2 - = 0, 005;
}
o.position.x = (math.cos (O.Radians) *
o.distance);
o.position.Z = (math.sin (O.Radians) *
o.distance);
o.position.y = (math.sin (O.Radians2) *
o.distance * .5);
}

19. Dodaj tytuł

Następnie dodaj tytuł na środku ekranu - nazwa, aby przedstawić swoją markę. Odstęp listów dla tytułów daje wspaniały wygląd kinowy. Użyj dowolnej czcionki / stylu, ale spójrz na tytuł filmu Odniesienia do inspiracji. Zobacz naszą listę Darmowe czcionki Lista naszych ulubionych czcionek do pobrania.

Najpierw dodaj element DOM do tytułu. Dodaj to po znacznikach skryptów przed zamykającym znacznikiem ciała.

 H1 & GT; Względne studia i LT; / H1 & GT;

Dodaj następujące style dla swojego tytułu do tagów w stylu w górnej części pliku.

H1 {kolor: biały; pozycja: absolutna; Top: 50%;
Z-indeks: 100; Szerokość: 100%; Tekst-Wyrównuj: Centrum;
Transform: Tłumacz (0, -100%); rodzina czcionek:
"Raleway", Sans-Serif; Czcionka: 100;
Odstęp listu: 40px; Tekst transformacyjny:
duże litery; Rozmiar czcionki: 16px; }

20. Dodaj pętlę wideo

Miła sztuczka, aby utworzyć głębokość do lądowania, jest dodanie małej pętli wideo. Możesz użyć dymu, kurzu lub cząstek. Są one powszechnie dostępne online lub część szerokiej liczby pakietów wideo i filmowych. Dodaj następujący znacznik wideo po tagu H1. Zauważ, że chcesz go ustawić, aby "wyciszony" i autoodtwarzanie. Pozwoli to również wideo do gry na urządzeniach mobilnych online.

 ​​& LT; Video ID = "VideoWacker" Loop SRC = "Aktywa /
Snow.mp4 "AutoPlay Muted & LT; / Video & GT;

Aby stylizować wideo, dodaj następujące CSS do swoich stylów na głowie swojej strony.

 ​​#videoOwacker {rozmiar tła: okładka;
Obiekt-Fit: Cover; Z-indeks: 9; nieprzezroczystość: .3;
pozycja: absolutna; Top: 0px; Po lewej: 0px;
Szerokość: 100vw; Wysokość: 100VH; Przejście: 1s.
łatwość uchylenia krycia;

21. Dodaj boks

Naprawdę podaj swoją stronę w stylu kinowym, dodaj kilka skrzynek liter na stronę.

Zacznij od dodawania elementów DIV.

 ​​

Następnie zaktualizuj swoje style, aby dodać style dla tych dwóch czarnych barów. Możesz również dostosować te style do smaku i potrzeb.

. BAR-TOP {Background-Color: Black;
Wysokość: 100px; pozycja: absolutna; Top: 0;
w lewo: 0; z-indeks: 100; Szerokość: 100VW;}
.bar-dno {kolor - kolor: czarny;
Wysokość: 100px; pozycja: absolutna; Dół: 0;
Po lewej: 0; Z-index: 100; Szerokość: 100VW;} 

Ten artykuł pierwotnie pojawił się w wydaniu 287 projektantów stron internetowych. Kup problem 287. lub Subskrybuj tutaj .

Czytaj więcej:

• Komponenty internetowe: Najlepszy przewodnik
• Jak utworzyć warstwowy efekt paralaksy
• Jak dodać animację do SVG za pośrednictwem CSS