Sådan oprettes likvekvenser med Webgl

Mange webdesignere ser efter måder at føje en stor indflydelse på deres webstedsdesign, så de får fat i deres brugere. Metoder har udviklet sig gennem årene, fra at bruge en header grafik, til at placere et diasshow under menuen Landingside, for at blive fuld browserbredde - og nu følger det store flertal af websteder dette samme format (lav din egen nemt med en Website Builder. ).

I dag forsøger de design, der vinder 'Dagens hjemmeside' på forskellige webpræmier, generelt forsøger at gøre noget, der er lidt mere unikt, og Webgl er fantastisk til dette. Tilføjelse af et interaktivt element kan virkelig gribe brugernes opmærksomhed og vise, at dette ikke er det samme som de andre websteder, de netop har besøgt. Det gør et websted meget mere interessant end blot at have et kæmpe diasshow og nogle Parallax Scrolling . Hvis du har et websted med komplekse behov, skal du sørge for din Web Hosting. Tjenesten er på punkt.

• 14 Great Landing Page Designs

For at lave en stænkeffekt i denne vejledning vil der blive tilføjet en væske, reflekterende overflade, og dette vil blive animeret mod kameraet med rullende bølger, der bevæger sig fremad. Der vil også være partikler, der bevæger sig frem for at fuldføre udseendet og føles. I midten bliver webstedets logo, og hele scenen reagerer på brugerens musevægning, så indholdet skifter og gør 3D virkelig skiller sig ud.

Det logo design. gøres som en gennemsigtig PNG (hold det sikkert i Sky lagring ), Så dette kan nemt tilpasses til dit eget design. Lysene vil også animere, så farverne vil kredse rundt og fremhæve forskellige bølger inden for scenen.

Download filerne for denne vejledning.

01. Tilføj indledende variabler

Åbn startmappen fra projektfilerne og træk dette til din kodeditor. Åben ' index.html. "Og du vil se, at JavaScript-bibliotekerne allerede er knyttet til dig. Inde i de tomme script-tags er, hvor koden vil gå. Her opdages Webgl for at sikre, at projektet kan køres, så tilføjes en lang række variabler, der vil blive brugt i scenen.

 Hvis (! Detektor.webgl) detektor.Addrilletwebglmessage ();
Var screen_width = vindue.innerwidth;
Var screen_height = vindue.innerheight;
Var Renderer, Kamera, Scene, Movergroup, Floorgeometri, Floormaterial, Pointlight, Pointlight2, PeGeometri;
VAR gulv_res = 60;
VAR gulv_ht = 650;
VAR Stepcount = 0;
VAR NOISESCALE = 9.5;
Var noiseed = math.random () * 100; 

02. Opret flere variabler

Den næste blok af variabler håndterer, hvor stor vandgulvet skal være, og den hastighed, som den vil bevæge sig sammen med indledende muspositioner. Skærmens centrum er udarbejdet, og det forbedrede støjbibliotek bruges til at skabe overfladen af ​​vandet.

 VAR gulv_width = 3600;
VAR gulv_depth = 4800;
VAR MOVER_SPD = 1,9;
Var Mousex = 0;
Var Mousey = 0;
VAR Windowhalfx = vindue.innerwidth / 2;
VAR Windowhalfy = vindue.innerheight / 2;
var snoise = ny forbedringsnoise ();
var textureloader = ny tre.textureloader (); 

03. Beregn musen

Nogle endelige variabler tilsættes til efterbehandlingsvirkningerne af scenen. En event lytter er tilføjet, der kontrollerer musens bevægelse. Scenen skal bevæge sig i displayporten for at reagere på musens bevægelse. Den funktion, der tilføjes her, udarbejder mængden af ​​bevægelse, der er tilladt.

04. Skift efterbehandlingsindstillinger

Det ' params. 'Funktionen er, hvor alle indstillingerne for efterbehandlingseffekter vil blive gemt. Hvis du har brug for at ændre noget, er dette stedet at gøre det. Tilt Shift Blur er dækket af de første fire linjer, så filmen passerer i de resterende linjer. Dette er hovedsagelig til skærmintensitet og støjintensitet.

05. Indstil endelige parametre

Den sidste af parametrene er for den mørke vignet omkring kanten af ​​skærmen. Det ' i det 'og' animere 'Funktioner kaldes til at køre. Det ' animere 'Funktionen vil blive oprettet meget senere i vejledningen, men' i det 'Funktionen er oprettet her. Kameraet og scenen er oprettet for at muliggøre visning af 3D-indholdet.

 EFFECTVIGNETTE.UNIformer ["Offset"]. Værdi = 1,0;
  effektvignette.uniforms ["mørke"].Value = 1,3;
}
i det();
animere ();
funktion init () {
  kamera = ny tre.perspectivecamera (70, vindue.innerwidth / window.innerheight, 1, 4000);
  camera.position.z = 2750;
  scene = ny tre.Scene ();
  scene.fog = ny tre.fogexp2 (0x1c3c4a, 0,00045); 

06. Lad lyset i

For at se indholdet af scenen placeres fire lys. Den første er et halvkugle lys, som bruges bare for at få den grundlæggende atmosfære af scenen. Næste op er det midterlys, der tilføjer et lyseblåt lys i midten af ​​scenen. Dette er sat ud til den ene side for at give noget lys til hele scenen.

 Var Hemispherelight = New Three.HemisKerLight (0xE3Feff, 0xE6DDC8, 0,7);
scene.add (halvkugleelys);
Hemisferelight.position.y = 300;
var centerlight = ny tre.spotlight (0xB7F9FF, 1);
scene.add (centralt);
centerlight.position.Set (2500, 300, 2000);
centerlight.penumbra = 1;
centerlight.decay = 5; 

07. Animate Lights.

De næste to lys, der skal tilføjes. ' Pointlight. 'og' Pointlight2. 'er farvede lys, der vil cirkulere i modsatte retninger rundt om scenen, så lyset ændrer sig konstant i visningen. Den første er et lyserødt lys, og det andet er et orange lys. Stien og formatet for refleksionsbillederne er indstillet i de sidste to linjer.

 Pointlight = New Three.Pointlight (0xe07bff, 1,5);
Pointlight.position.z = 200;
scene.add (pointlight);
Pointlight2 = Ny Tre.Pointlight (0xFF4E00, 1.2);
Pointlight2.position.z = 200;
scene.add (pointlight2);
VAR PATH = "IMG /";
Var Format = '.jpg'; 

08. Skinnende overflader

Den flydende overflade vil have en reflekterende, skinnende overflade, og dette gøres ved at skabe en refleksionscube. Dette er en terning med en 360-graders skybox placeret inde i den, som vil blive afspejlet på væskens overflade. Det ' URLS. 'Array indeholder de billeder, der skal læses, så materialet er oprettet.

09. Opsæt nogle grupper

Mover-gruppen vil indeholde nogle partikler, der vil blive tilføjet senere, mens gulvgruppen vil indeholde væskens overflade. Et nyt 3D-objekt er oprettet, der vil holde den overflade. Der vil være to flydende overflader; man vil have det reflekterende materiale, og den anden vil have wireframe ' floormaterial. ', som defineret her.

 Movergroup = New Three.Object3d ();
scene.add (movergroup);
var gulvgruppe = ny tre.object3d ();
VAR FLOORMATIALT = NYE TREE.MEHPHONGMATER ({
Farve: 0xeeeeee, Side: Three.Doubleside, Blending: Three.AddiveBlending, WireFrame: TRUE
});
Floorgeometry = ny tre.plangeometri (floor_width + 1200, gulv_depth, gulv_res, gulv_res); 

10. Lav overfladerne

De to flydende overflader er skabt her som ' Floormesh. 'og' Floormesh2. '. De er placeret og placeret inde i ' Floorgroup. 'Drej derefter til en god synsvinkel foran kameraet. Dette er ikke direkte fladt, men lidt vinklet, da det ser bedre ud.

 Var Floormesh = New Three.Mesh (Floorgeometry, Cubematerial);
VAR FLOORMESH2 = Nye tre.Mesh (Floorgeometry, Floormaterial);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
FloorGroup.Add (Floormesh);
Floorgroup.add (Floormesh2);
scene.add (gulvgruppe);
floormesh.rotation.x = math.pi / 1,65;
floormesh2.rotation.x = math.pi / 1,65;
gulvgruppe.position.y = 180; 

11. Tilsæt flydende partikler

Sektionen af ​​kode her skaber en tom geometriobjekt og derefter placerer i det 2.000 hjørner, der fungerer som partiklerne. Disse fordeles med tilfældige stillinger på X, Y og Z-aksen. Disse vil flyde lige over overfladen af ​​det flydende gulv.

 PGEOMETRY = NY TREE.EGEOMETRY ();
sprite = textureloader.load ("img / sprite.png");
for (i = 0; i & lt; 2000; i ++) {
  Var Vertex = Ny tre.Vector3 ();
  vertex.x = 4000 * math.random () - 2000;
  vertex.y = -200 + math.random () * 700;
  vertex.z = 5000 * math.random () - 2000;
  pgeometri.vertices.push (vertex);
} 

12. Opret udseendet

Materialet defineret her vil sætte, hvordan partiklerne ser ud. Et billede blev indlæst i det foregående trin, og det bruges som billedet på hver partikel, når materialet er oprettet. Dette påføres derefter på hvert punkt af geometrien for alle partiklerne. Disse tilsættes derefter i scenen.

13. Tilføj logoet

Et logo vil blive placeret i midten af ​​skærmen, og dette vil blive tilføjet på et fladt plan, der står over for kameraet. Logoet er lavet lidt gennemsigtigt og givet en additivblanding, så det er mere synligt, når lettere genstande passerer bag det. Dette er placeret og placeret i scenen.

 Sprite = textureloader.load ("img / logo.png");
geometri = ny tre.planebuffergeometri (500, 640, 1);
Materiale = New Three.MeshLambertmaterial ({
  Gennemsigtig: True, Opacitet: 0.8, Blending: Three.AddiveBlending, Map: Sprite, Side: Three.Doubleside
});
var plan = nyt tre.mesh (geometri, materiale);
plan.position.set (0, 70, 1800);
scene.add (plan); 

14. Tilføj leveringsindstillingerne

Rendereren er oprettet for at have glatte, anti-aliasede kanter, og nu er baggrundsfarven indstillet. Dette tilføjes i dokumentets krop, så scenen er på HTML-siden. Postbehandlingseffekterne er oprettet ved at have forskellige render og shader passere initialiseret.

15. Lav passet

Når filmen og Glitch Pass tilføjes, oprettes en effektkomponist, der komponerer alle passerer sammen. Disse tilføjes en efter en til komponisten, og det vil til sidst blive gjort til skærmen for publikumsvisning.

16. Luk 'init' funktionen

De sidste få indstillinger tilføjes til initialiseringen af ​​scenen. Parametrene til efterbehandling er indstillet, indstillingen af ​​bølgerne kaldes, og en hændelseslytter tilføjes, når browseren er ændret. Dette gør det muligt at opdage, at displayet opdateres for at passe til de nye dimensioner.

17. Sæt bølgerne op

Bølgerne er skabt nu for overfladen af ​​væsken. Dette gøres ved at flytte gennem hvert hjørne af gulv geometrien på X og Z-aksen og bevæge den opad på Y-aksen. På dette stadium ' til 'Loops er skabt til X- og Z-aksen.

 Funktion setwaves () {
  Stepcount ++;
  movergroup.position.z = -move_Spd;
  VAR I, IPOS;
  Var Offset = Stepcount * Move_Spd / Floor_depth * Floor_res;
  for (i = 0; i & lt; floor_res + 1; i ++) {
  for (var j = 0; j & lt; gulv_res + 1; j ++) {
  ipos = i + offset; 

18. Gør bølger

Ikke alle hjørner vil blive skaleret opad på samme måde. De længst væk fra kameraet vil være stort, så siderne vil være lidt mindre, og de nærmeste kamera vil blive nedskaleret mindst. Dette gør ryggen og sidder lidt mere interessant at se på.

 IF ((I & GT; 30) || (J & LT; 12) || (J & GT; 48)) {
  Floorgeometry.Vertices [I * (gulv_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floor_res * noisescale, noisesed) * floor_ht;
  } ellers hvis (i & gt; 25 & amp; & amp; i & lt; 30) {
  Floorgeometry.Vertices [I * (gulv_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floor_res * noisescale, noisesed) * (gulv_ht / 1.2);
  } ellers {
  Floorgeometry.Vertices [i * (gulv_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floor_res * noisescale, noisesed) * (gulv_ht / 2);
  }
  }
  }
  Floorgeometry.Verticesneedupdate = TRUE;
} 

19. Ændre størrelse og animere

Når vinduet er ændret, kaldes funktionen her fra lytteren, der blev oprettet i trin 16. Kameraet, renderer og komponist er alle nulstillet her for at matche de nye dimensioner af vinduet i browseren. Den animerede funktion sætter sig kun på 60fps, der ringer til Render-funktionen for at opdatere displayet.

 Funktion OnwindowResize () {
  Camera.Antre = window.innerwidth / window.innerHeight;
  kamera.updateprojectionMatrix ();
  renderer.Sethize (vindue.innerwidth, window.innerheight);
  komponist.setsize (vindue.innerwidth, vindue.innerheight);
}
funktion animate () {
  requestanimationframe (animere);
  gøre ();
} 

20. Sæt enhver handling

Renderfunktionen kaldes hver ramme. Pointlysene er indstillet til kredsløb rundt i scenen, og kameraet er placeret i henhold til musens bevægelse, med lidt lempelse, så den bevæger sig gradvist på plads. Kameraet er indstillet til altid at se på midten af ​​scenen.

funktion render () {
  VAR TIMER = -0.0002 * DATO.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. Gør scenen

I det sidste trin flyttes partiklerne fremad på deres individuelle vertex, og hvis de kommer til kameraet, er de placeret tilbage i afstanden. Dette er opdateret og ' Setwaves ' Funktionen kaldes for at få bølgerne til at rulle fremad. Scenen er gengivet af effektkomponisten.

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine Webdesigner . Abonner på Web Designer her .

Relaterede artikler:

• Kom godt i gang med WebGL ved hjælp af Three.js
• 11 trin til at skabe bedre logoer
• 18 Webdesign YouTube-kanaler, du skal se