Luo WebGL 3D-aloitussivu

WebGL 3D-aloitussivun luominen on yksi tapa tehdä suuri ensimmäinen vaikutelma yleisösi kanssa. WebGL: n avulla voit tuottaa korkealaatuista visuaalista sisältöä suoraan selaimessa. Voit tehdä sen ilman laajennuksia tai erityisiä vaatimuksia. Kaikki modernit selaimet tukevat WebGL: tä yhdessä mobiililaitteiden ja tablettien kanssa. WebGL: n avulla voit luoda uskomattomia 3D-kohtauksia. Se voi käynnistää WebVR-kokemuksia, manipuloida videota, tehdä grafiikan shaders ja paljon muuta.

Tässä opetusohjelmassa teet aloitussivua kuvitteelliselle elokuvateosille, suhteellisille studioille. Konsepti on dramaattinen ja visuaalisesti kytkettävä, koska salaperäinen esine kuvastaa ja pyörii vastauksena hiiren vuorovaikutukseen. Hiukkaset, jotka ympäröivät sen, vaihtamalla väriä, kun ne liikkuvat. Työskentelet jokaisen vaiheen kautta tämän vuorovaikutteisen sivun luomiseen, jolloin voit luoda omia projekteihisi (lisää inspiraatiota, katso postimme parhaiten Landing-sivut ).

Käytä vain three.js, tehokkaan 3D-renderointikirjaston mukana toimitetut ominaisuudet. Voit käyttää omia kuvia tekstuurina, jotta se olisi ainutlaatuinen. Saat myös käyttää silmiä, valaistusta ja tekstuureja hyödyntäen pinta-ala yksityiskohtia, miten ympäristökarttoja käytetään ja miten kerrosten lisääminen syvyyteen ja kiinnostukseen.

Saattaa olla enemmän kuin tarpeeksi aloittaa ja runsaasti polttoainetta seuraavia hankkeita.

Ennen kuin aloitat, Lataa tämän opetusohjelman tiedostot .

01. Basic HTML -asetus

Aloita, tarvitset jonnekin nähdäksesi 3D-kohtauksen. Aseta perus HTML-tiedosto ja sisällytä linkki kolmeen.js. Tämä voidaan joko isännöidä ulkoisesti tai lisätä Kolme.js arkisto täällä: . Lisää joitakin yksinkertaisia ​​CSS: tä, jos haluat tehdä sivun koko näytön ja poista kaikki vierityspalkit. Tallenna tiedosto paikalliselle verkkopalvelimelle, joten voit palvella HTML: tä, kun se on valmis testaamaan. Lisää seuraava koodi aloittaaksesi.

 ​​& lt;! DocType HTML & GT;
& lt; html & gt;
& lt; pää & gt;
& lt; Otsikko & GT; Suhteellinen studiot & lt; / otsikko & gt;
& lt; script src = "libs / three.min.js" & gt; & lt; / script & gt;
& lt; tyyli & gt;
HTML, runko {marginaali: 0; Pehmuste: 0; ylivuoto piilotettu; }
& lt; / tyyli & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; skripti & gt;
// 3D-koodi menee tänne
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Lisää globaaleja vaihtoehtoja

Tarvitset joitakin muuttujia viitteisiin koko lopputunnuksen ajan. Aseta ne nyt. Tähän sisältyy joukko hiukkasia, "T" muuttuja tetraedronille, hiirelle, raycasteriin ja valoihin.

Skriptitunnisteiden sisällä Aloita lisäämällä seuraava koodi.

 // vars
var num = 30;
var-objektit = [];
var raycaster = uusi kolme.raycaster ();
var hiiri = uusi kolme.Vector2 ();
var valo, t; 

03. Lisää kohtaus, kamera ja render

Meidän on ensin lisättävä kohtaus, joka sisältää kaikki esineet. Sitten lisäämme kameran, joka voi liikkua sen sisällä, panorointi, kallistuminen ja liikkuu tarvitsemme. Ensimmäinen attribuutti on näkökenttä. Toinen on kuvasuhde. Voit myös määritellä läheiset ja kauas leikkausoperot kolmannessa ja neljännellä attribuutilla. Viimeisin, lisää renderöinti, joka käsittelee näyttämistä kankaalle.

Script-tunnisteessa Lisää seuraava koodi.

 // Luo kamera
var Camera = uusi kolme.PerversiveCamera
(65, ikkuna.innerwidth / window.innerheight,
0,1, 1000);
kamera.Position.set (0,0,0,0,5);
// Luo kohtaus
var Scene = uusi kolme.Scene ();

// Luo renderöri
var renderer = uusi kolme.Webglrender (
{antialias: totta});
renderer.setella (window.innerwidth, ikkuna.
sisäinen);
document.body.oppendchild (renderer.Domelement
);

04. Lisää valokeila

Seuraavaksi sinun on lisättävä valo kohtaukseen. Kolme.js sisältää erilaisia ​​valot, mukaan lukien piste, suunta, ympäröivä ja valonheittimet. Käytä tähän kohdalle. Se antaa sinulle sijainnin ja suunnatut ominaisuudet ja voit heittää varjoja, jos haluat myöhemmin.

Lisää valonheitin lisäämällä seuraava koodi.

 // luo paikkavalo
Light = uusi kolme.spotlight (0xccddFF, .8);
light.position.set (0,0,5);
Scene.Add (valo); 

05. Lisää animaatiosilmukka

Animaatiosilmukka, jota kutsutaan joskus "renderilisäksi", kutsutaan ihanteellisesti 60 kertaa sekunnissa. Elokuva kulkee 24 kuvaa sekunnissa (FPS) ja tämä on riittävän nopea huijata silmä näkemään vakioliikettä keskeytyksettä. Tietokoneen animaatiossa pyrimme vähintään 30 fps, mutta ihanteellisesti 60 fps. Tämä takaa hyvin sileän visuaalisen suorituskyvyn, vaikka kehykset pudotetaan säännöllisesti.

Sitoudumme tämän animaatiosilmukan pyynnönmittausframeen toimintoon, joka tekee kaksi asiaa. Ensinnäkin se varmistaa selaimen on valmis lähettämään seuraava kehys. Se tarkoittaa myös animaatioita voi keskeyttää tekemisen, kun käyttäjä ei enää katsella selain-välilehteä,

Lisää tämä koodi tehdäksesi kohtauksen animaatiosilmukan:

 var animate = toiminto () {
RequestAnimationFrame (animaatio);
renderer.render (kohtaus, kamera);
};

// Aloita animaatiosilmukan
Animate (); 

06. Lataa maanrakennus

Seuraavaksi luodaan maasuoma kohtaus. Aloita, sinun on lataa käytettävä kuva. Maa- ja seinäpintojen tekstuurit voidaan luoda ottamalla omia valokuvia ja varovasti leikkaamalla reunoja Photoshop CC . Varmista vain, että he voivat laatta kauniisti. Aloita nopeasti, on myös hienoja kirjastoja verkossa, katso parhaamme Vapaa kuvioita .

Voit valita kaiken, joka laatta. Tämä tarkoittaa, että reunat sekoittuisivat saumattomasti, jos asetit ne vierekkäin. Voit valita jotain laattoja tai kiviä tähän. Huomaa, että käytät tekstuurin kääpivaihtoehtoja, jotta voit toistaa kääre. Tämä esimerkki käyttää 12x12 toistuvaa. Säädä tämä kuvasi sopivaksi, kun testat kohtauksen.

 // Lataa maanrakennus
var tekstuuri = uusi kolme.textureloader ().
Kuormitus ("omaisuus / stone.jpg");
Texture.Wraps = Texture.Wrapt = Kolme.
Toistuva;
Texture.Repeat.set (12, 12);

07. Luo maa-aineisto

Kolme.js sisältää erilaisia ​​materiaaleja, joita voit käyttää. Materiaalit pidetään ihon, joka kattaa 3D-objektin. Voit käyttää perusmateriaaleja, jotka eivät reagoi valoihin tai phongiin tai lambert shader -materiaaleihin, jotka tekevät. Voit myös käyttää omia mukautettuja shader-materiaaleja. Tätä kentälle käytä fyysistä materiaalia. Se on hyvin realistinen ilme, reagoi valolle hyvin. Käytä tekstuuria, jonka olet ladattu diffuusiokarttona ja myös bumpmap, jos sinulla ei ole erityistä koostumusta.

 // Luo maa-aineisto
Materiaali = uusi kolme.Meshfysicalmateriaalia ({kartta: rakenne, bumpmap: tekstuuri}); 

08. Luo maaverkko

Kun yhdistämme materiaalin (iho) geometriaan, joka määrittää 3D-objektin muodon, luomme verkon. Maalla tarvitset yksinkertaisen suunnitelman. Materiaalin varjostin ja rakenne luo monimutkaisen pinta-aluksen illuusion.

Lisää seuraava koodi, jos haluat luoda maadoituksen, käännä mukavaan kulmaan ja aseta se kameran alapuolelle. Varmista, että käytät koodia tämän jälkeen, miten se näyttää. Säädä minkä tahansa koodin, jonka haluat soittaa.

 // Luo maaverkko
var geometria = uusi kolme.planeBuffergeometria
(100 100);
var Ground = uusi kolme.Mesh (geometria,
materiaali);
groted.rotus.z = matematiikka.PI / 180 * -45;
Grotation.x = Math.PI / 180 * -90;
Ground.Position.y = -2.0;
Scene.Add (maa); 

09. Lataa tavoite

Seuraavaksi lisätään Keski-3D-esine painopisteestä. Tämä on kohtauksen tähti, joten valitse tekstuuri, jonka haluat peittää sen. Huomaa: Teet tämän esineen erittäin heijastavan, joten tekstuuri, jonka lataat täältä, on hienovaraisempi kuin maa oli.

 // Lataa esine rakenne
var tekstuuri = uusi kolme.textureloader ().
Kuormitus ("omaisuus / rock_01_diffusion.jpg"); 

10. Luo ympäristökartta

Seuraavaksi luo ympäristö objektin ympärille, joka heijastuu sen pinnalle. Voit myös lisätä tämän kohtauksen kohtauksen mukaan, jos haluat. Jos haluat ladata ympäristön, käytät cubetekstureloaderia. Käytettävien kuvien tulisi olla kuusi kuvaa, jotka ihoa kuution sisäpuolelle muodostamaan saumaton kuva, jota kutsutaan kuutiokarttoiksi.

 var envermap = uusi kolme.CubeTextureLoader ()
.SetPath ('omaisuus /')
.Load (['px.jpg', 'nx.jpg', 'py.jpg', 'ny.
JPG ',' pz.jpg ',' nz.jpg ']; 

11. Lisää Tetrahedon

Kolme.js mukana monet oletusarvoiset geometrit, joita voit käyttää kohtauksiasi. Yksi jäähdyttimistä on tetraedron. Se vie säteellä ja "yksityiskohtaisesti" parametrin määrittää kohteen kasvojen määrä.

Lisää yksi kohtaukseen, seuraavalla koodilla.

 // Luo tetraedron
var geometria = uusi kolme.
Tetrahedronbuffergeometria (2,0);
var materiaali = uusi kolme.meshfysikaalistamateriaalia
({Kartta: Texture, EnverMap: envemap,
Metalli: 1.0, karheus: 0,0});
T = uusi kolme.Mesh (geometria, materiaali);
t.rotation.x = matematiikka.PI / 180 * -10;
Scene.Add (t);

12. Lisää kierto ja kameran kohde

Varmista, että kamera tarkastelee aina pääobjektia, käytät Camera.Look -toimintoa. Voit myös lisätä ympäristön kiertoa myös esineeseen.

Päivitä animaatiotoimintokoodi näyttää tältä.

 Uudelleenpyyntölaite (animaatio);
t.rotation.y - = 0,005;
Kamera.Lookki (T.Position);
renderer.render (kohtaus, kamera); 

13. Lisää hiukkasten silmukka

Seuraavaksi lisää joitakin ympäristön hiukkasia kohtaukseen. Nämä sekoittuvat hienosti etualalla videon silmukka, jonka lisäät myöhemmin, sekä vuorovaikutteisesti. Lisää yksinkertainen "silmukka, jos haluat pitää koodin, käytät useita hiukkasia.

 (i = 0, i & lt; = num; i ++) {
// hiukkaskoodi menee tänne
} 

14. Luo hiukkasverkko

Ensimmäinen asia on luodaan hiukkasobjekti. Voit tehdä tämän pallojen, sprites tai kaikki haluamasi esineet. Nyt yritä tehdä niistä yksinkertaisia ​​palloja.

Sisälläsi silmukka Lisää seuraava koodi.

 // Luo uusi verkko
var geometria = uusi kolme.spherebuffergeometria (.1,6,6);
var materiaali = uusi kolme.meshfysikaalisenmateriaalin ({envemap: envemap, metalli: 1,0});
var partikkeli = uusi kolme.Mesh (geometria, materiaali);

15. Aseta satunnainen sijainti ja etäisyys

Hiukkaset kiertävät keskustaa ja sijoitettava satunnaisesti, jotta ne täyttävät tilan kauniisti ja niillä on orgaaninen ilme. Lisää seuraava koodi asettaaksesi epäsäännöllisen aseman ja määritä sitten vakio etäisyys kullekin hiukkaselle.

 // Aseta satunnainen sijainti
particle.position.set (Math.random () * 100.0 -
50.0,0,0, Math.random () * - 10,0);
// laskettu distnace kuin vakio ja määritä
vastustaa
var a = uusi kolme.Vector3 (0, 0, 0);
var b = particle.position;
var d = a.distanceteto (b);
particle.distance = d;

16. perustaa kulmat kiertoradalle

Tee orbitsin animointia nopeammin lisäämällä kulmavakiot kiertoradalle ja säilytä ne hiukkasen omaisuudeksi. Lisää seuraava koodi määrittää nämä satunnaiset sisältökulmat.

 // määritä 2 satunnaista mutta vakiokulmia
Radialaisissa
particle.radians = matematiikka.random () * 360 * matematiikka.
PI / 180; // Alkukulma
particle.radians2 = matematiikka.random () * 360 * matematiikka.
PI / 180; // Alkukulma

17. Lisää hiukkanen kohtaukseen ja kokoelmaan

Lopuksi lisää hiukkanen kohtaus ja aiemmin määritellyt esineet. Tämä tekee kaiken hiukkasten helppoa myöhemmin.

 // Lisää kohde kohtaukseen
Scene.Add (hiukkanen);
// lisää kokoelmaan
Objects.push (hiukkanen);

18. Lisää animaatio hiukkasiin

Seuraavaksi sinun on päivitettävä hiukkasobjektien sijainti ja kierto. Nämä kiertoradalla vakioisella etäisyydellä kohtauskeskuksesta. Lisää seuraava koodi animaatiotoimintoon.

 (i = 0, i & lt; = num; i ++) {
var o = esineet [i];
o.rotation.y + =. 01;
Jos (i% 2 == 0) {
o.radians + =. 005; o.radians2 + =. 005;
} muu {
O.radians - =. 005; o.radians2 - =. 005;
}
O.position.x = (Math.cos (O.radians) *
O.Distance);
o.position.z = (matematiikka.sin (O.radians) *
O.Distance);
O.position.y = (Math.sin (O.radians2) *
O.Distance * .5);
}

19. Lisää otsikko

Seuraavaksi lisää otsikko näytön keskelle - nimi tuotemerkin esittelyyn. Kirjeiden välimatka otsikoille antaa suuren elokuvan ulkoasun. Käytä mitä tahansa fonttia / tyyliä, jota haluat, mutta katso elokuvan otsikon viitteet inspiraatiota varten. Katso luettelo Ilmainen fontti Luettelo suosikki ladattavista fonteistamme.

Lisää ensin otsikon dom-elementti. Lisää tämä käsikirjoitustunnisteiden jälkeen ennen sulkeutumisrungon tunnistetta.

 & lt; h1 & gt; Suhteelliset studiot & lt; / h1 & gt;

Lisää seuraavat tyylit otsikkoosi tyylitunnisteesi tiedostosi yläosassa.

H1 {Väri: valkoinen; Asema: Absoluuttinen; Top: 50%;
Z-indeksi: 100; Leveys: 100%; Teksti-kohdistus: keskus;
Muunna: Käännä (0, -100%); Font-perhe:
"Raleway", sans-serif; fonttipaino: 100;
Kirjainvälitys: 40px; Teksti-muunnos:
isot kirjaimet; Fontti-koko: 16PX; }

20. Lisää videon silmukka

Mukava temppu luo syvyys laskeutumiseen on lisätä pieni videoin silmukka. Voit käyttää savua, pölyä tai hiukkasia. Nämä ovat laajalti saatavilla verkossa tai osa monista video- ja elokuvapaketteista. Lisää seuraava videotunniste H1-tunnisteen jälkeen. Huomaa, että haluat asettaa sen "mykistetään" ja Autoplay. Tämä mahdollistaa myös videon pelaamisen myös mobiililaitteilla verkossa.

 ​​& lt; video id = "Videobacker" Loop SRC = "Varat /
Snow.mp4 "Autoplay mykistetty & gt; & lt; / video & gt;

Voit tyytyä videon mukaan lisätä seuraavat CSS: n tyyleihisi sivun päähän.

 ​​#Videobacker {tausta-koko: kansi;
Object-Fit: kansi; Z-indeksi: 9; Opasiteetti :.3;
Asema: Absoluuttinen; Top: 0px; Vasen: 0px;
Leveys: 100vw; Korkeus: 100vh; Siirtyminen: 1S
läpinäkyvyys helpottaa;

21. Lisää kirjain-nyrkkeily

Jos haluat antaa aloitussivullesi elokuvateatterin, lisää joitakin kirjainlaatikkoja sivulle.

Aloita lisäämällä div elementtejä tähän.

 ​​& lt; div luokka = 'bar-top' & gt; & lt; / div & gt;
& lt; div luokka = 'bar-pohja' & gt; & lt; / div & gt;

Päivitä sitten tyylit lisätäksesi tyylejä näille kahdelle mustalle baareille. Voit säätää näitä tyylejä myös makusi ja tarpeisiisi.

 ​​.bar-top {tausta-väri: musta;
Korkeus: 100px; Asema: Absoluuttinen; Top: 0;
Vasen: 0; Z-indeksi: 100; Leveys: 100vw;}
.bar-bottom {tausta-väri: musta;
Korkeus: 100px; Asema: Absoluuttinen; Pohja: 0;
Vasen: 0; Z-indeksi: 100; Leveys: 100vW;} 

Tämä artikkeli ilmestyi alunperin julkaisussa 287 web-suunnittelija. Osta numero 287 tai Tilaa täältä .

Lue lisää:

• Web-komponentit: Ultimate Guide
• Kuinka luoda kerrostettu parallax vaikutus
• Kuinka lisätä Animaatio SVG: lle CSS: n kautta