Hogyan készítsünk folyékony hatásokat WebGL-vel

Számos webes tervező keres, hogyan adhat nagy hatással a webhelyük tervét, hogy megragadják a felhasználók figyelmét. A módszerek az évek során alakultak ki, a fejléc grafikájának használatával, hogy diavetítés helyezze el a céloldali menübe, hogy teljes böngésző szélessége legyen - és most a területek túlnyomó többsége ugyanazt a formátumot kövesse (hozzon létre saját könnyedén a weboldal építője ).

Ma, a tervek, amelyek a különböző webes díjakat nyernek "napi helyszínen", általában megpróbálnak valamit csinálni, ami egy kicsit egyedülállóbb, és a WebGl nagyszerű. Az interaktív elem hozzáadása valóban megragadhatja a felhasználók figyelmét, és megmutatja, hogy ez nem ugyanaz, mint a többi, amit csak meglátogattak. Ez sokkal érdekesebbé teszi a webhelyet, mint egy óriási diavetítés és néhány parallaxis görgetés . Ha van egy bonyolult igényű webhelyed, győződjön meg róla, hogy a web hosting A szolgáltatás ponton van.

• 14 nagyszerű leszálló oldal tervek

A fröccsenés hatása ebben a bemutatóban, egy folyadék, fényvisszaverő felület kerül hozzáadásra, és ez a képkeret felé a mozgékony hullámok felé halad. Vannak olyan részecskék is, amelyek előre haladnak a megjelenés és az érzés befejezéséhez. A központban lesz a webhely logója, és az egész jelenet reagál a felhasználó egérmozgására, hogy a tartalom eltolódjon, és a 3D-t valóban kiemelkedik.

A logó tervezés átlátszó PNG-ként jelenik meg (tartsa biztonságban felhő tároló ), így ez könnyen testre szabható a saját kialakításához. A fények is élő, így a színek körül körpályán, és jelölje ki a különböző hullámok belül a helyszínre.

Töltse le a fájlokat Ehhez a bemutatóra.

01. Adja meg a kezdeti változókat

Nyissa meg a Start mappát a projektfájlokból, és húzza ezt a kódszerkesztőbe. Nyisd ki ' index.html - És látni fogod, hogy a JavaScript könyvtárak már kapcsolódtak az Ön számára. Az üres szkript címkék belsejében van, ahol a kód megy. Itt a WebGl észleli, hogy megbizonyosodjon arról, hogy a projekt futtatható, akkor hozzáadunk egy teljes változót, amelyet a jelenetben használnak.

 Ha (! Detector.Webgl) detektor.addgetweblmessage ();
var screen_width = window.innerwidth;
var screen_height = window.innerheight;
var renderer, kamera, jelenet, hovagroup, padló, floormaterial, mutató fény, mutató2, pgeometry;
var emeleti_res = 60;
var emeleti_ht = 650;
var stepcount = 0;
var noisescale = 9,5;
var noiseseed = math.Random () * 100; 

02. Több változót hozhat létre

A következő blokk változók kezelni, milyen nagy a víz padló legyen, és a sebesség, hogy mozog együtt a kezdeti egér pozíciókat. A képernyő közepét ki kell dolgozni, és a továbbfejlesztett zajkönyvtárat a víz felületének létrehozásához használják.

 var emeleti_width = 3600;
var emeleti_depth = 4800;
VAR MOVE_SPD = 1.9;
var mousex = 0;
var moicyy = 0;
var windowhalfx = window.innerwidth / 2;
var windowhalfy = window.InnerHeight / 2;
var snoise = új improvedNoise ();
var textureloader = új három.TextUREloader (); 

03. Számítsa ki az egeret

Néhány végső változó hozzáadódik a jelenet utáni feldolgozási hatásaihoz. Egy eseményhallgató hozzáadódik, amely ellenőrzi az egérmozgást. A jelenet mozog a kijelzőportban, hogy reagáljon az egér mozgására. Az itt hozzáadott függvény kiemeli a megengedett mozgás mennyiségét.

04. A Post Feldolgozási beállítások módosítása

A ' paramentumok "A funkció az, ahol a postfeldolgozási hatások összes beállítása tárolódik. Ha bármit meg kell változtatnod, ez az a hely, ahol meg kell tennie. A Tilt Shift Blur az első négy sorban van lefedve, majd a film áthalad a fennmaradó vonalakban. Ez elsősorban a képernyő intenzitására és a zaj intenzitására vonatkozik.

05. Állítsa be a végleges paramétereket

Az utolsó paraméterek a sötét matrica a képernyő szélén vannak. A ' benne és "és" élő "Funkciókat hívnak le. A ' élő "A funkció sokkal később jön létre a bemutatóban, de a" benne A funkció itt jön létre. A fényképezőgép és a jelenet be van állítva, hogy lehetővé tegye a 3D-tartalom megtekintését.

 EffectVignette.Uniforms ["Offset"]. Érték = 1,0;
  effectvignette.Uniforms ["sötétség"].érték = 1,3;
}
benne();
élő();
funkció init () {
  kamera = új három.perspectivecamera (70, window.innerwidth / window.innerheight, 1, 4000);
  camera.position.z = 2750;
  jelenet = új három.scene ();
  scene.fog = új három.fogexp2 (0x1c3c4a, 0,00045); 

06. Legyen a fény

A jelenet tartalmának megtekintéséhez négy fény kerül elhelyezni. Az első egy félteke fény, amelyet csak a jelenet alapvető környezetének megszerzésére szolgál. Ezután a középső fény, amely egy világoskék fényt ad hozzá a jelenet közepén. Ez az egyik oldalra van állítva, hogy fényt adjon az egész jelenethez.

 var hemispherelight = új három.hemispherelight (0xe3feff, 0xE6ddc8, 0,7);
jelenet.add (félgömböt);
hemispherelight.position.y = 300;
variclight = új három.Spotlight (0xb7f9ff, ​​1);
jelenet.add (középvilág);
centerlight.position.set (2500, 300, 2000);
centerlight.penumbra = 1;
középvilág = 5; 

07. Animálja a fényeket

A következő két fény hozzáadásra kerül. ' Fényszóró és "és" Pointight2 "Színes fények, amelyek a jelenet körül ellentétes irányban vannak, így a fény folyamatosan változik a nézetben. Az első egy rózsaszín fény, a második pedig narancssárga fény. A reflexiós képek elérési útja és formája az utolsó két sorban van beállítva.

 Pointight = Új Three.Pointlight (0xE07BFF, 1.5);
pointlight.position.z = 200;
scene.add (mutatófény);
Pointight2 = új három.pointlight (0xFF4E00, 1.2);
pointight2.position.z = 200;
jelenet.add (mutatófény2);
var path = "img /";
var formátum = '.jpg'; 

08. Fényes felületek

A folyadékfelületnek fényvisszaverő, fényes felülete lesz, és ez egy visszaverődés kocka létrehozásával történik. Ez egy kocka, amelynek 360 fokos skyboxja van belépve, amely tükröződik a folyadék felületére. A ' URL-ek "A tömb tartalmazza a betöltendő képeket, majd az anyag beállítása.

09. Állítson be néhány csoportot

A mozgatócsoport tartalmaz néhány részecskéket, amelyeket később hozzáadnak, míg a padlócsoport tartalmazza a folyadék felületét. Új 3D objektumot hoz létre, amely ezt a felületet tartja. Két folyadékfelület lesz; az egyik lesz a fényvisszaverő anyag, és a második lesz a drótváz floormaterialis "Az itt meghatározottak szerint.

 Movergroup = új három.object3d ();
Scene.add (MoverGroup);
var foillgroup = új három.object3d ();
var floormaterial = új három.Meshphongmaterial ({
Szín: 0xEeeeee, oldala: három.Dubleside, keverés: három.Adbitive, Wireframe: True
});
FloorGeometry = új három.PLOREGEOMETRY (FLOOR_WIDTH + 1200, padlózat_depth, padlózás, padlózat_res); 

10. Készítsük a felületeket

A két folyadékfelület itt jön létre, mint " floormesh és "és" floormesh2 ”. Ők helyezkednek el és helyezkednek el a " padlóterem - Ezután a kamera előtt egy jó látószögre forog. Ez nem közvetlenül lapos, de enyhén szögletes, ahogy jobban néz ki.

 var floormesh = új három.Mesh (padlósometriás, cubematerial);
var floormesh2 = új három.Mesh (padlómérgezés, floormaterial);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
padlócsoport.add (floormesh);
padlócsoport.add (floormesh2);
Scene.Add (FloorGroup);
floormesh.rotation.x = Math.pi / 1.65;
floormesh2.rotation.x = Math.pi / 1.65;
floorgroup.position.y = 180; 

11. Adja hozzá a lebegő részecskéket

A kódrészlet itt létrehoz egy üres geometriai objektumot, majd elhelyezi bele 2000 csúcspontjai működnek a részecskéket. Ezek véletlenszerű pozíciókban vannak elosztva az X, Y és Z tengelyen. Ezek csak a folyékony padló felszínén úsznak.

 Pgeometry = új három.Geometria ();
sprite = textureloader.load ("img / sprite.png");
(i = 0, én & lt; 2000; i ++) {
  var csúcs = új három.Vektor3 ();
  Vertex.x = 4000 * Math.Random () - 2000;
  Vertex.y = -200 + Math.Random () * 700;
  Vertex.z = 5000 * Math.Random () - 2000;
  pgeometry.vertices.push (Vertex);
} 

12. Hozzon létre egy pillantást

Az itt megadott anyag beállítja, hogy a részecskék hogyan néznek ki. A képet az előző lépésben töltötték be, és az egyes részecskéken lévő képként használják, miután az anyag létrejött. Ezt követően alkalmazzák a geometria minden pontjára az összes részecske számára. Ezeket ezután a jelenetbe adjuk.

13. Adja hozzá a logót

A logó a képernyő közepére kerül, és ez egy sík síkra kerül, amely szembe kell néznie a kamerával. A logó kissé átlátszó, és additív keveréket ad, hogy jobban látható legyen, ha könnyebb tárgyak mögötte. Ez a helyszínbe helyezhető.

 Sprite = textureloader.load ("img / logo.png");
geometria = új három.Ploorebuffergeometry (500, 640, 1);
Anyaga = új három.meshambertmaterial ({
  Átlátszó: TRUE, Opacity: 0.8, Keverés: Három.Adbibling, Térkép: Sprite, Side: Three.Dibleside
});
var sík = új három.Mesh (geometria, anyag);
sík.position.set (0, 70, 1800);
jelenet.add (sík); 

14. Adja hozzá a render beállításait

A renderelő úgy van beállítva, hogy sima, anti-aliased élek, és most a háttérszín be van állítva. Ezt a dokumentum testébe adjuk úgy, hogy a jelenet a HTML oldalon legyen. Az utófeldolgozási hatásokat úgy állítják be, hogy különböző renderelő és árnyékoló áthaladnak.

15. Készítsd el a passzot

Miután a film és a glitch Pass hozzáadásra kerül, létrejön egy Effektus zeneszerző, amely összegyűjti az összes haladást. Ezeket a zeneszerzőn egyre adják hozzá, és végül a közönség kijelzőjének képernyőjére kerül sor.

16. Zárja be az "init" funkciót

Az utolsó néhány beállítás hozzáadódik a jelenet inicializálásához. A POST feldolgozás paramétereit beállítják, a hullámok beállításait hívják, és egy esemény hallgatót adnak hozzá, ha a böngészőt átmérik. Ez lehetővé teszi a kijelző frissítését, hogy illeszkedjen az új dimenziókhoz.

17. Állítsa be a hullámokat

A hullámok most a folyadék felületére jönnek létre. Ezt úgy végezzük, hogy az X és Z tengelyen lévő padló geometriájának minden csúcsát mozgatjuk, és felfelé mozog az y tengelyen. Ebben a szakaszban a " -ért Az X és Z tengelyhez hurkok jönnek létre.

 Funkció Setwaves () {
  Stepcount ++;
  overgroup.position.z = -move_spd;
  var i, iPos;
  var ofset = stepcount * MOVE_SPD / floor_depth * floor_res;
  (i = 0; i & lt; floor_res + 1, i ++) {
  (var j = 0; j & lt; floor_res + 1, j ++) {
  IPOS = I + Offset; 

18. Legyen hullámok

Nem minden csúcsot ugyanúgy felfelé kell méretezni. Azok a legtávolabbi a kamerától nagy, akkor az oldalak kissé kevesebb lesz, és a legközelebbi kamerát a legkevésbé mérik. Ez a hát és az oldalak kissé érdekesebbnek tekinthetők.

 Ha ((i & gt; 30) || (J & lt; 12) || (J & GT; 48)) {
  padlózás.vertices [i * (floor_res + 1) + j] .z = snoise.noise (IPOS / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * floor_ht;
  } egyébként, ha (I & GT; 25 & amp; & lt; 30) {
  Floorgeometry.vertices [I * (padló_res + 1) + j] .Z = snoise.noise (IPOS / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * (padló_ht / 1.2);
  } más {
  FloorGeometry.vertices [I * (padló_res + 1) + j] .z = snoise.noise (IPOS / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * (padló_ht / 2);
  }
  }
  }
  padlózás.verticesneedupdate = igaz;
} 

19. Átméretezés és animál

Amikor az ablak átméretezett, a funkciót a 16. lépésben beállított hallgatónak hívják. A fényképezőgép, a renderelő és a zeneszerző minden esetben visszaáll, hogy megfeleljen a böngésző ablakának új dimenzióinak. Az animátum funkció csak 60Fps-nál állítja be, és hívja a render funkciót a kijelző frissítéséhez.

 Funkció onwindowresize () {
  camera.aspect = window.innerwidth / window.innerheight;
  camera.updateProjectmatrix ();
  renderer.setsize (window.innerwidth, window.innerheight);
  zeneszerző.Setetsize (window.innerwidth, window.innerheight);
}
Funkció animálja () {
  kérésnév (animál);
  Vakol();
} 

20. Állítsa be minden cselekvési keretet

A render funkciót minden keretnek nevezik. A lényeg fények beállítása pályára körül a jelenetet, és a kamera van elhelyezve szerint az egér mozgását, egy kis lazítás, hogy mozog fokozatosan a helyére. A kamera mindig a jelenet középpontjára néz.

funkció render () {
  var timer = -0.0002 * dátum.Now ();
  pointlight.position.x = 2400 * Math.Cos (időzítő);
  pointlight.position.z = 2400 * Math.sin (időzítő);
  pointlight2.position.x = 1800 * math.cos (-timer * 1.5);
  pointight2.position.z = 1800 * math.sin (-timer * 1.5);
  camera.position.x + = (mousex - camera.position.x) * .05;
  camera.position.y + = (-mousy - camera.position.y) * .05;
kamera.Lookat (scene.position); 

21. Rendezze a jelenetet

Az utolsó lépésben a részecskéket előre mozgatják az egyéni csúcsukon, és ha eljutnak a fényképezőgéphez, visszahelyezik őket a távolba. Ez frissül és a " setwaves ' A funkciót úgy hívják, hogy a hullámok előrehaladjanak. A jelenetet az Effect Composer biztosítja.

Ezt a cikket eredetileg a Creative Web Design magazinban tették közzé Web designer . Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

• Kezdje el a WebGL-t a Three.js segítségével
• 11 lépés a jobb logók létrehozásához
• 18 Web Design YouTube-csatornák meg kell nézni