Nestemäisten vaikutusten luominen WebGL: llä

Monet web-suunnittelijat etsivät tapoja lisätä suuria vaikutuksia sivuston suunnitteluun, jotta he tarttuvat käyttäjiensä huomion. Menetelmät ovat kehittyneet vuosien varrella, käyttämästä otsikon graafista, asettamaan diaesityksen aloitussivun valikkoon, jotta tulet täydellisen selaimen leveyden - ja nyt valtaosa sivustoista noudattaa tätä samaa muotoa (luo oma helposti a Verkkosivuston rakentaja ).

Nykyään mallit, jotka voittaa "sivuston" eri web-palkintojen sivustoja, kokeile yleensä jotain, joka on hieman ainutlaatuinen, ja WebGL on suuri tähän. Interaktiivisen elementin lisääminen voi todella tarttua käyttäjien huomion ja osoittaa, että tämä ei ole sama kuin muut sivustot, joita he ovat juuri käyneet. Se tekee sivuston paljon mielenkiintoisemmaksi kuin vain jättiläinen diaesitys ja jotkut parallax vieritys . Jos sinulla on sivusto, jossa on monimutkaisia ​​tarpeita, varmista, että sivujen ylläpito Palvelu on kohdassa.

• 14 Suuri aloitussivun mallit

Jos haluat tehdä roiskeita tässä opetusohjelmassa, lisätään neste, heijastava pinta, ja tämä animoitiin kameraa kohti liikkuvia aaltoja eteenpäin. Myös hiukkasia, jotka siirtyvät eteenpäin ulkoasun loppuun saattamiseksi. Keskustassa on sivuston logo, ja koko kohtaus reagoi käyttäjän hiiren liikkeeseen niin, että sisällön siirtymät ja tekee 3D: n todella erottua.

The Logon suunnittelu on tehty läpinäkyvänä PNG: ksi (pidä se turvallisena pilvivarasto ), joten tämä voidaan helposti räätälöidä omaan muotoiluun. Valot myös animoivat niin, että värit kiertävät ympäri ja korostavat erilaisia ​​aaltoja paikan sisällä.

Lataa tiedostot Tähän opetusohjelmaan.

01. Lisää alkuperäiset muuttujat

Avaa aloituskansio projektitiedostoista ja vedä tämä koodiin. Avoin ' index.html "Ja näet, että JavaScript-kirjastot on jo liitetty sinulle. Tyhjien käsikirjoitustunnisteiden sisällä on, missä koodi menee. Tässä WebGL havaitaan varmistamaan, että projektia voidaan suorittaa, sitten lisätään koko muuttujien valikoima, jota käytetään kohtauksessa.

 Jos (! Dectector.webgl) detector.addgetwebglmessage ();
var screen_width = window.innerwidth;
var screen_height = window.innerheight;
var renderöinti, kamera, kohtaus, moverroup, lattialevyt, flomateriaal, pistinvalon, pistinvalaistus2, pgeometria;
var floor_res = 60;
var floor_ht = 650;
var stepcount = 0;
var nousescale = 9,5;
var noisied = Math.random () * 100; 

02. Luo enemmän muuttujia

Seuraavammat muuttujat käsittelevät, kuinka suuri vedenpohja on ja nopeus, jota se liikkuu osilla hiiren asennolla. Näytön keskus on kehitetty ja parannettu melunkirjasto käytetään veden pinnan luomiseen.

 var floor_width = 3600;
var floor_depth = 4800;
var mobile_spd = 1.9;
var hiirix = 0;
var mousey = 0;
var windowhalfx = ikkuna.innerwidth / 2;
var windowhalfy = window.innerheight / 2;
var snoe = uusi parannettu ();
var Textureloader = uusi kolme.textureloader (); 

03. Laske hiiri

Joitakin lopullisia muuttujia lisätään kohtauksen jälkeisiin jalostusvaikutuksiin. Lisätään tapahtuman kuuntelija, joka tarkistaa hiiren liikkeen. Kohtaus siirtyy näyttöporttiin reagoimaan hiiren liikkeeseen. Tähän lisätty toiminto toimii sallitun liikkeen määrän.

04. Muuta postin käsittelyn asetuksia

" paramps "Toiminto on, jos kaikki jälkikäsittelyvaikutusten asetukset tallennetaan. Jos haluat muuttaa mitään, tämä on paikka tehdä se. Kallistuksen vaihteen hämärtyminen peitetään ensimmäisissä neljässä rivillä, sitten kalvo kulkee jäljellä oleviin viivoihin. Tämä johtuu pääasiassa näytön intensiteettille ja melun voimakkuudelle.

05. Aseta lopulliset parametrit

Viimeinen parametrit ovat tumma vigetti näytön reunan ympärillä. " sen sisällä "ja" animoida "Toimintoja kutsutaan toimimaan. " animoida "Toiminto luodaan paljon myöhemmin opetusohjelmassa, mutta" sen sisällä "Toiminto luodaan täällä. Kamera ja kohtaus on asetettu 3D-sisällön katseluun.

 Efektivignette.Uniforms ["Offset"]. Value = 1,0;
  forfecvignette.Uniforms ["pimeys"].Value = 1.3;
}
sen sisällä();
Animate ();
Toiminto init () {
  Kamera = uusi kolme.PerversiveCamera (70, Window.innerWidth / window.innerheight, 1, 4000);
  kamera.position.z = 2750;
  Scene = uusi kolme.Scene ();
  Scene.fog = uusi kolme.fogexp2 (0x1c3c4a, 0,00045); 

06. Anna valon

Jos haluat nähdä kohtauksen sisältö, sijoitetaan neljä valoa. Ensimmäinen on pallonpuoliskolla valo, jota käytetään vain saadaksesi kohtauksen perusympäristö. Seuraavaksi on keskellä valo, joka lisää vaaleansinisen valon keskelle kohtausta. Tämä on asetettu toiselle puolelle, jotta voit antaa jonkin verran valoa koko kohtaukseen.

 var hemispherelight = uusi kolme.hemispherelight (0xe3feff, 0xe6ddc8, 0,7);
Scene.Add (Hemisphereleght);
hemispherelight.position.y = 300;
var Centerlight = uusi kolme.Spotlight (0xB7f9ff, ​​1);
Scene.Add (keskivalo);
keskilight.position.set (2500, 300, 2000);
Centerlight.Penumbra = 1;
keskilight.decay = 5; 

07. Animoivat valot

Seuraavat kaksi lisättyä valoa. " Pointlight "ja" Pointlight2 "Värilliset valot, jotka ympyröivät vastakkaisiin suuntiin kohtauksen ympärillä, niin että valo muuttuu jatkuvasti näkymässä. Ensimmäinen on vaaleanpunainen valo ja toinen on oranssi valo. Heijastuskuvien polku ja muoto asetetaan viimeiset kaksi riviä.

 Pointlight = uusi kolme.Pointlight (0XE07BFF, 1.5);
Pointlight.position.Z = 200;
Scene.Add (Pointlight);
Pointlight2 = uusi kolme.Pointlight (0xFF4E00, 1.2);
Pointlight2.position.Z = 200;
Scene.Add (Pointlight2);
var reitti = "img /";
var formaatti = '.jpg'; 

08. Kiiltävät pinnat

Nestepinnalla on heijastava, kiiltävä pinta ja tämä tehdään luomalla heijastusväline. Tämä on kuutio, jossa on 360 asteen Skybox sijoitettu sen sisälle, mikä heijastuu nesteen pinnalle. " URL-osoitteet "Array sisältää ladattavien kuvien, sitten materiaali määritetään.

09. Aseta joitakin ryhmiä

Mover-ryhmä sisältää joitain hiukkasia, jotka lisätään myöhemmin, kun taas lattiaryhmä sisältää nesteen pinnan. Luodaan uusi 3D-objekti, joka pitää kyseisen pinnan. Siellä on kaksi nestemäistä pintaa; Yksi on heijastava materiaali ja toinen on Wireframe ' Flomaterial ", kuten tässä on määritelty.

 Movergroup = uusi kolme.object3d ();
Scene.Add (Movergroup);
var lattiaryhmä = uusi kolme.object3d ();
var flomaterial = uusi kolme.meshpphongmateriaalia ({
Väri: 0xeeeeee, Side: Three.doubleside, sekoitus: Three.Additive, Wireframe: True
});
FloorGgeometry = uusi Three.PlaneGeMetry (Floor_width + 1200, Floor_depth, Floor_res, Floor_res); 

10. Tee pinnat

Kaksi nestemäistä pintaa syntyy täällä " FloorMesh "ja" FloorMesh2 ". Ne on sijoitettu ja sijoitettu sisään lattiarvio "Sitten pyöritetään hyvään katselukulmaan kameran edessä. Tämä ei ole suoraan tasainen, mutta hieman kulmassa, koska se näyttää paremmalta.

 var FloorMesh = uusi kolme.Mesh (lattialevy, kuutiometriä);
var floormesh2 = uusi kolme.Mesh (lattialevy, flomaterial);
flesormesh2.position.y = 20;
flesormesh2.position.z = 5;
lattiaproup.add (FloorMesh);
lattiagrop.add (flesormesh2);
Scene.Add (lattiaryhmä);
FlesorMesh.Rotation.x = Math.Pi / 1.65;
floormesh2.rotation.x = matematiikka.PI / 1.65;
lattiagroup.position.y = 180; 

11. Lisää kelluvia hiukkasia

Koodin osio luo tyhjän geometria-esineen ja sijoitetaan sitten siihen 2 000 pistettä, jotka toimivat hiukkasina. Nämä jakautuvat satunnaisiin asentoihin X-, Y: n ja Z-akselilla. Nämä kelluvat vain nestemäisen lattian pinnan yläpuolella.

 PGEOMETRY = uusi kolme.geometria ();
Sprite = Textureloader.load ("img / sprite.png");
(i = 0, i & lt; 2000; i ++) {
  vartex = uusi kolme.Vector3 ();
  Vertex.x = 4000 * Math.random () - 2000;
  Vertex.y = -200 + Math.random () * 700;
  Vertex.Z = 5000 * Math.random () - 2000;
  pgeometry.vertices.Push (Vertex);
} 

12. Luo ulkonäkö

Tässä määritelty materiaali määrittää, miten hiukkaset näyttävät. Edelliseen vaiheeseen ladattiin kuva ja jota käytetään kuhunkin hiukkasen kuvana, kun materiaali luodaan. Tätä sovelletaan sitten jokaiseen geometrian pisteeseen kaikille hiukkasille. Nämä lisätään sitten kohtaukseen.

13. Lisää logo

Logo sijoitetaan näytön keskelle ja tämä lisätään tasaiselle tasolle, joka kohdistaa kameran. Logo on hieman läpinäkyvä ja lisäaineitaso niin, että se on näkyvämpi, kun kevyempi esine kulkee sen takana. Tämä on sijoitettu ja sijoitettu kohtaukseen.

 Sprite = Textureloader.load ("img / logo.png");
geometria = uusi kolme.planeBuffergeometria (500, 640, 1);
materiaali = uusi kolme.meshlambertmateriaalia ({
  Läpinäkyvä: Todellinen, Opasiteetti: 0.8, sekoitus: kolme.Kaikki, kartta: sprite, puoli: kolme.doubleside
});
var taso = uusi kolme.mesh (geometria, materiaali);
plane.position.set (0, 70, 1800);
Scene.Add (taso); 

14. Lisää renderasetukset

Renderer on asetettu sileät, anti-aliased reunat ja nyt taustaväri on asetettu. Tämä lisätään asiakirjan kehoon niin, että kohtaus on HTML-sivulla. Postin käsittelyvaikutukset perustetaan, kun sinulla on erilaisia ​​renderöitä ja varjostaa.

15. Tee passi

Kun kalvo ja häiriöaste lisätään, luodaan vaikutus säveltäjä, joka säveltää kaikki kulkevat yhdessä. Nämä lisätään yksi kerrallaan säveltäjälle ja se lopulta tehdään yleisön näytön näytölle.

16. Sulje "Init" -toiminto

Viimeiset asetukset lisätään kohtauksen alustus. Postin käsittelyn parametrit asetetaan, aaltojen asetusta kutsutaan ja tapahtuman kuuntelija lisätään aina, kun selain muuttuu. Tämä mahdollistaa näytön päivittämisen uusien mittojen mukaan.

17. Aseta aallot

Aallot luodaan nyt nesteen pinnalle. Tämä tehdään siirtämällä lattian geometrian jokaisen huipputason X- ja Z-akselilla ja siirtämällä sitä ylöspäin Y-akselilla. Tässä vaiheessa " varten "Silmukat luodaan X- ja Z-akselille.

 Toimintoasetukset () {
  Stepcount ++;
  Movergroup.position.z = -Move_SPD;
  var I, IPO;
  var offset = portaat * move_spd / floor_depth * floor_res;
  (i = 0; i & lt; floor_res + 1; i ++) {
  for (var j = 0; j & lt; floor_res + 1; j ++) {
  IPO = I + Offset; 

18. Tee aaltoja

Kaikki pisteet eivät skaalautuvat ylöspäin samalla tavalla. Kamerasta kauimpana olevat ne ovat suuria, sitten sivut ovat hieman vähemmän, ja lähimpään kameran pienimmistä. Tämä tekee selästä ja sivut hieman mielenkiintoisemmaksi katsomaan.

 Jos ((i & gt; 30) || (j & lt; 12) || (j & gt; 48)) {
  FloorGgeometry.vertices [I * (Floor_res + 1) + J] .Z = snoise.noise (iPos / Floor_res * Noisecale, J / Floor_res * Noiseescale, Noisesed) * Floor_ht;
  } muu, jos (i & gt; 25 & amp; i & lt; 30) {
  FloorGgeometry.vertices [i * (Floor_res + 1) + J] .Z = snoise.noise (IPOS / Floor_res * Noise, J / Floor_res * Noisescale, Noisesed) * (Floor_ht / 1.2);
  } muu {
  FloorGgeometry.vertices [I * (Floor_res + 1) + J] .Z = snoise.noise (IPOS / Floor_res * Noisecale, J / Floor_res * NoiseScale, NoiseseD) * (Floor_ht / 2);
  }
  }
  }
  FloorGgeometry.verticesNeedUpdate = tosi;
} 

19. Muuta ja animoida

Kun ikkuna on muutettu, funktiota kutsutaan tässä vaiheessa 16 asetettulta kuuntelijalle. Kamera, renderer ja säveltäjä kaikki nollataan täällä, mikä vastaa selaimen ikkunan uusia mittoja. Animate-toiminto asettaa vain 60 kuvaa sekunnissa, soittamalla render-toiminnon päivittämään näytön.

 Toiminto onwindowresize () {
  kamera.Aspect = window.innerwidth / window.innerheight;
  kamera.UpdateprojektiMatrix ();
  renderer.setella (window.innerwidth, window.innerheight);
  säveltäjä.Setsaze (window.innerwidth, window.innerheight);
}
Toiminto Animate () {
  RequestAnimationFrame (animaatio);
  render ();
} 

20. Aseta jokainen toimintakehys

Render-toimintoa kutsutaan jokaisena kehyksessä. Pistevalot asetetaan kiertoradalle ylös kohtaus ja kamera sijoitetaan hiiren liikkeen mukaan, hieman keventämällä niin, että se liikkuu asteittain paikalleen. Kamera on asetettu katsomaan aina kohtauksen keskustaa.

Toiminto render () {
  Var ajastin = -0.0002 * DATE.NOW ();
  Pointlight.position.x = 2400 * Math.cos (ajastin);
  Pointlight.position.Z = 2400 * Math.sin (ajastin);
  Pointlight2.position.x = 1800 * Math.cos (-Timer * 1,5);
  Pointlight2.position.Z = 1800 * Math.sin (-Timer * 1,5);
  kamera.x + = (hiirix - camera.position.x) * .05;
  Camera.Position.y + = (-mousey - camera.position.y) * .05;
Kamera.Lookki (kohtaus.position); 

21. Render the kohtaus

Lopullisessa vaiheessa hiukkaset siirretään eteenpäin heidän yksilöllisellä kärkillä ja jos ne pääsevät kameraan, ne sijoitetaan takaisin etäisyydelle. Tämä päivitetään ja " SETWAVES ' Toimintoa kutsutaan tekemään aallot eteenpäin eteenpäin. Vaikutus säveltäjä tekee kohtaus.

Tämä artikkeli julkaistiin alun perin Creative Web Design Magazine Nettisivujen suunnittelija . Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

• Aloita WebGL: n kanssa käyttämällä kolmea.js
• 11 askelta parempia logoja
• 18 Web Design YouTube-kanavat Sinun täytyy katsoa