Jak tworzyć efekty płynne z Webgl

Wielu projektantów stron internetowych poszukuje sposobów, aby dodać duży wpływ na projekty witryn, dzięki czemu zwrócą uwagę swoich użytkowników. Metody ewoluowały przez lata, z wykorzystaniem grafiki nagłówka, do umieszczania pokazu slajdów w menu strony docelowej, aby stać się pełną szerokością przeglądarki - a teraz ogromną większość witryn podąża za tym samym formacie (tworz swój własny łatwo za pomocą Kreator strony internetowej ).

Dziś projekty, które wygrywają "Strona dnia" na różnych stronach nagród Web Generalnie próbują robić coś, co jest trochę wyjątkowe, a Webgl jest dla tego świetny. Dodanie interaktywnego elementu może naprawdę chwycić uwagę użytkowników i pokazać, że nie jest to tak samo jak inne witryny, które właśnie odwiedzili. Sprawia, że ​​witryna jest znacznie bardziej interesująca niż tylko mając gigantyczny pokaz slajdów i niektórych przewijanie paralaksy. . Jeśli masz stronę z złożonymi potrzebami, upewnij się, że twoje hosting Usługa jest w punkcie.

• 14 świetnych projektów stron docelowych

Aby dokonać efektu rozpryskowego w tym samouczku, ciecz, zostanie dodana powierzchnia odblaskowa, a to będzie animowane w kierunku kamery z falami walcowymi poruszającymi się naprzód. Będą również cząsteczki, które poruszają się do przodu, aby uzupełnić wygląd i czuć. W centrum będzie logo witryny, a cała scena zareaguje na ruch myszy użytkownika, dzięki czemu treści przesuwa się i sprawia, że ​​3d naprawdę wyróżni się.

The. projekt logo jest renderowany jako przezroczysty PNG (zachowaj to bezpieczne magazyn w chmurze ), więc można to łatwo dostosować do własnego projektu. Światła będą również animować, aby kolory będą orbity i podświetli różne fale w scenie.

Pobierz pliki. Dla tego samouczka.

01. Dodaj zmienne początkowe

Otwórz folder Start z plików projektu i przeciągnij to do edytora kodu. Otwarty ' index.html. - A zobaczysz, że biblioteki JavaScript zostały już połączone dla Ciebie. Wewnątrz pustego znaczników skryptów jest miejsce, w którym przejdzie kod. Tutaj jest wykryty, aby upewnić się, że projekt można uruchomić, dodano cały zakres zmiennych, które będą używane na scenie.

 Jeśli (! Detector.Webgl) detektor.addgetWebglmessage ();
var screen_width = window.innerwidth;
var screen_height = window.innerheight;
Var Renderer, aparat, scena, movergroup, floorgeometria, Floormaterial, Pointlight, Pointlight2, PGeometria;
var floor_res = 60;
var floor_ht = 650;
var Stepcount = 0;
var noisescale = 9,5;
var noiseseed = math.random () * 100; 

02. Utwórz więcej zmiennych

Następny blok zmiennych uchwytu, jak duża powinna być podłoga wodna i prędkość, którą poruszy się wraz z początkowymi pozycjami myszy. Środek ekranu jest wypracowany, a ulepszona biblioteka hałasu jest używana do tworzenia powierzchni wody.

 var floor_width = 3600;
var floor_depth = 4800;
var Move_SPD = 1,9;
var mousex = 0;
var mousey = 0;
var windowhalfx = window.innerwidth / 2;
var windowhalfy = window.innerheight / 2;
var snoise = nowy improwiveNoise ();
Var Textureloader = Nowy Three.Textureloader (); 

03. Oblicz mysz

Dodaje się kilka końcowych zmiennych dla skutków przetwarzania postu. Dodaje się słuchacz zdarzeń, który sprawdza ruch myszy. Scena porusza się w porcie wyświetlacza, aby reagować na ruch myszy. Dodaje się funkcję, którą dodaje się tutaj wykonywanie dozwolonego ruchu.

04. Zmień ustawienia przetwarzania postu

" params. "Funkcja polega na tym, gdzie zostaną zapisane wszystkie ustawienia efektów przetwarzania pocztowego. Jeśli musisz coś zmienić, to jest miejsce, aby to zrobić. Rozmycie przesunięcia przechylania jest pokryta w pierwszych czterech liniach, a następnie folia przechodzi w pozostałych liniach. Jest to głównie dla natężenia ekranu i intensywność hałasu.

05. Ustaw ostateczne parametry

Ostatnim parametrów służy do ciemnej winiety wokół krawędzi ekranu. " w tym ' i ' animować "Funkcje są używane do uruchomienia. " animować "Funkcja zostanie utworzona znacznie później w samouczku, ale" w tym "Funkcja jest tworzona tutaj. Aparat i scena są skonfigurowane, aby umożliwić przeglądanie treści 3D.

 Effectvignette.uniforms ["offset"]. Wartość = 1,0;
  effectvignette.uniforms ["ciemność"].Value = 1,3;
}
w tym();
animować();
funkcja init () {
  Camera = Nowy Three.PerspeckeCamera (70, Window.innerwidth / window.innerheight, 1, 4000);
  camera.position.Z = 2750;
  scena = nowy trzy.scene ();
  scene.fog = nowy trzy.fogexp2 (0x1C3C4A, 0,00045); 

06. Niech światło

Aby zobaczyć zawartość sceny, zostaną umieszczone cztery światła. Pierwszy to światło półkula, które jest używane, aby uzyskać podstawową atmosferę sceny. Dalej jest środkiem światłem, który dodaje jasnoniebieskie światło na środku sceny. Jest to ustawione na bok, aby dać trochę światła całej sceny.

 Var Hemisferelight = Nowy Three.Hemispherelight (0xe3FEFF, 0xe6ddc8, 0,7);
scena.add (półkula);
hemisphereLight.position.y = 300;
Var Centerlight = Nowy Three.Spotlight (0xB7F9FF, 1);
scena.add (centrum środka);
Centerlight.position.set (2500, 300, 2000);
Centerlight.penumbra = 1;
Centerlight.decay = 5; 

07. Animate Lights.

Następne dwa światła do dodania. " Pointlight. ' i ' Pointlight2. "Czy kolorowe światła, które kręci się w przeciwnych kierunkach wokół sceny, aby światło się zmienia stale w widoku. Pierwszym jest różowe światło, a drugi jest pomarańczowym światłem. Ścieżka i format zdjęć refleksji są ustawiane w dwóch ostatnich liniach.

 Pointlight = Nowy Three.Pointlight (0xe07bff, 1,5);
pointlight.position.Z = 200;
scena.Add (pointlight);
Pointlight2 = Nowy Three.Pointlight (0xFF4E00, 1.2);
pointlight2.position.z = 200;
scena.Add (pointlight2);
var path = "img /";
var format = '.jpg'; 

08. Błyszczące powierzchnie

Ciekła powierzchnia będzie miała odblaskową, błyszczącą powierzchnię i odbywa się, tworząc kostkę odbicia. Jest to sześcian z 360-stopniowym Skybox umieszczony wewnątrz go, co będzie odzwierciedlone na powierzchni cieczy. " URL. "Array zawiera obrazy do załadowania, a następnie materiał jest skonfigurowany.

09. Skonfiguruj kilka grup

Grupa mover będzie zawierać niektóre cząstki, które zostaną dodane później, podczas gdy grupa podłogowa będzie zawierać powierzchnię cieczy. Utworzony jest nowy obiekt 3D, który będzie utrzymać tę powierzchnię. Będą dwie płynne powierzchnie; Jeden będzie miał materiał odblaskowy, a druga będzie miała szkielet " floormaterial. ", jak tu zdefiniowano.

 Movergroup = New Three.Object3d ();
scena.add (movergroup);
var piętro = nowy trzy .Object3d ();
var floormaterial = Nowy Three.meshongMaterial ({
Kolor: 0xeeeeeeee, strona: Three.Doubleside, Mieszanie: Three.DodityZnalezienie, Wireframe: True
});
Floorgeometria = Nowy Three.Planegeometria (podłogi_WIDTH + 1200, podłogi: podłogowe_reny, podłogi); 

10. Zrób powierzchnie

Dwie płynne powierzchnie są tworzone tutaj jako " floormesh. ' i ' floormesh2. ". Są ustawione i umieszczone wewnątrz " grupa podłogi "Następnie obrócił się do dobrego kąt widzenia przed kamerą. To nie jest bezpośrednio płaskie, ale nieco kątowe, ponieważ wygląda tak bardzo.

 Var Floormesh = Nowy Three.mesh (Floorgeometria, Cubematerial);
var floormesh2 = nowy trzy.mesh (floorgeometry, floormaterial);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
grupa podłogi.add (Floormresh);
grupa podłogi.add (floormesh2);
scena.add (grupa podłogi);
floormesh.rotation.x = math.pi / 1,65;
floormesh2.rotation.x = math.pi / 1,65;
podłogaGroup.position.y = 180; 

11. Dodaj pływające cząstki

Sekcja kodu zawiera tutaj pusty obiekt geometrii, a następnie umieszcza w nim 2 000 wierzchołków, które działają jako cząstki. Są one dystrybuowane na przypadkowych pozycjach na osi X, Y i Z. Będą one unosić się tuż nad powierzchnią płynnej podłogi.

 PGeometria = Nowy trzy.
Sprite = Textureloader.load ("IMG / Sprite.png");
dla (I = 0; I & LT; I ++) {
  var vertex = nowy trzy.vector3 ();
  vertex.x = 4000 * math.random () - 2000;
  Vertex.y = -200 + math.random () * 700;
  vertex.z = 5000 * math.random () - 2000;
  pgeometry.vertics.push (wierzchołek);
} 

12. Utwórz wygląd

Zostanie tu zdefiniowany materiał, jak wyglądają cząstki. Obraz został załadowany w poprzednim etapie, który jest używany jako obraz na każdej cząstce, po utworzeniu materiału. Następnie stosuje się do każdego punktu geometrii dla wszystkich cząstek. Są one następnie dodawane do sceny.

13. Dodaj logo

Logo zostanie umieszczone w środku ekranu, a to zostanie dodane na płaskiej płaszczyźnie, która zmierzy się z kamerą. Logo jest wykonywane lekko przezroczyste i biorąc pod uwagę mieszankę dodatku, aby była bardziej widoczna, gdy lżejsze przedmioty przechodzą za nim. Jest to ustawione i umieszczone na scenę.

 Sprite = Textureloader.load ("img / logo.png");
geometria = nowa trzy.Planebuffergeometry (500, 640, 1);
Material = Nowy Three.meslambertMaterial ({
  Przezroczyste: Prawda, nieprzezroczystość: 0.8, Mieszanie: Three.DiveBling, Mapa: Sprite, Side: Three
});
var samolot = nowy trzy.mesh (geometria, materiał);
samolot.position.set (0, 70, 1800);
scena.Add (samolot); 

14. Dodaj ustawienia renderowania

Renderer jest ustawiony na płynne krawędzie anty-aliasowane, a teraz kolor tła jest ustawiony. Jest to dodawane do korpusu dokumentu, aby scena była na stronie HTML. Efekty przetwarzania pocztowego są ustawione przez inicjowane przez inicjalizację różnych przelewów i cieniowania.

15. Zrób przepustkę

Po dodaniu przepustki folii i usterki, tworzony jest kompozytor efektu, który komponuje wszystkie przechodzi. Są one dodawane jeden po drugim do kompozytora i ostatecznie zostanie wydany na ekranie dla widowni.

16. Zamknij funkcję "init"

Ostatnie kilka ustawień jest dodawane dla inicjalizacji sceny. Parametry do przetwarzania pocztowego są ustawione, ustawienie fal nazywa się i dodaje się słuchacz zdarzeń, gdy przeglądarka jest zmieniana. Umożliwia to zaktualizowanie wyświetlacza, aby dopasować nowe wymiary.

17. Ustaw fale

Fale są teraz tworzone do powierzchni cieczy. Odbywa się to poprzez przesuwanie każdego wierzchołka geometrii podłogi na osi X i Z i przesuwając ją w górę na osi Y. Na tym etapie " dla "Pętle są tworzone dla osi X i Z.

 Funkcja SetWaves () {
  Stepcount ++;
  movergroup.position.Z = -move_spd;
  var i, ipos;
  var offset = Stepcount * Move_SPD / Floor_Depth * Floor_res;
  dla (i = 0; I & LT; Floor_res + 1; I ++) {
  dla (var j = 0; j 00; floor_res + 1; j ++) {
  IPOS = I + offset; 

18. Zrób fale

Nie wszystkie wierzchołki zostaną skalowane w górę w ten sam sposób. Te najdalsze od aparatu będą duże, a następnie boki będą nieco mniejsze, a te najbliższe kamera zostaną najmniej skalowane. To sprawia, że ​​tył i boki nieco ciekawsze, aby spojrzeć.

 IF ((I & GT; 30) || (J ^ 12) || (J & GT; 48)) {
  floorgeometry.vertics [i * (podłogi_res + 1) + j]
  } ELS IF (I & GT; 25 & AMP; & AMP; I & LT; 30) {
  floorgeometry.vertices [I * (podłogi_res + 1) + j]
  } else {
  floorgeometry.vertices [i * (podłogi_Res + 1) + j]
  }
  }
  }
  floorgeometry.verticseNeedupdate = true;
} 

19. Zmień rozmiar i animuj

Po zmianie rozmiaru okna, funkcja jest tutaj wywoływana z słuchacza, który został ustawiony w kroku 16. Aparat, render i kompozytor są tutaj resetowane, aby pasowały do ​​nowych wymiarów okna przeglądarki. Funkcja Animate właśnie ustawia się w 60FP, dzwoniąc do funkcji renderowania, aby zaktualizować wyświetlacz.

 Funkcja OnWindowResize () {
  camera.aspect = window.innerwidth / window.innerheight;
  camera.updateProjeniaMatrix ();
  render.setize (window.innerwidth, window.innerheight);
  kompozytor.setize (window.innerwidth, window.innerheight);
}
Funkcja Animate () {
  prośbacyjnyframeFrame (animate);
  renderowanie();
} 

20. Ustaw każdą ramkę działania

Funkcja renderowania nazywana jest każda ramka. Lampki punktowe są ustawione na orbitę dookoła na scenie, a kamera jest umieszczona zgodnie z ruchem myszy, z małym łagodzeniem, aby porusza się stopniowo na miejscu. Aparat jest ustawiony, aby zawsze patrzeć na środek sceny.

Funkcja Render () {
  var timer = -0.0002 * Data.NOW ();
  pointlight.position.x = 2400 * math.cos (timer);
  pointlight.position.z = 2400 * math.sin (timer);
  pointlight2.position.x = 1800 * Math.cos (-Timer * 1,5);
  pointlight2.position.Z = 1800 * Math.sin (-Timer * 1,5);
  camera.position.x + = (Mousex - camera.position.x) * .05;
  camera.position.y + = (-mousey - camera.position.y) * .05;
camera.lookat (scene.position); 

21. Renderuj scenę

W ostatnim etapie cząstki są przemieszczane do przodu na ich indywidualne wierzchołek, a jeśli dostaną się do kamery, są one umieszczone z powrotem do odległości. To jest aktualizowane i " setwaves ' Funkcja jest wywoływana, aby fale były zwalniane do przodu. Scena jest świadczona przez kompozytor skutków.

Ten artykuł został pierwotnie opublikowany w magazynie kreatywnego projektowania stron internetowych Projektant stron internetowych . Subskrybuj tutaj projektant stron internetowych .

Powiązane artykuły:

• Zacznij od Webgl przy użyciu trzech.js
• 11 kroków, aby utworzyć lepsze logo
• 18 Web Design YouTube kanały potrzebne do obejrzenia