Opprett en webgl 3D destinasjonsside

Å lage en WebGl 3D destinasjonsside er en måte å gjøre et godt førsteinntrykk med publikum. Med WebGL, kan du levere visuelt innhold av høy kvalitet i nettleseren. Du kan gjøre det uten plugins eller spesielle krav. Alle moderne nettlesere støtter Webgl, sammen med mobile enheter og tabletter. Webgl lar deg lage utrolige 3D-scener. Det kan drive webvr-opplevelser, manipulere video, gjengir grafikkhærer og mye mer.

I denne opplæringen skal du lage en destinasjonsside for fiktive filmstudio, relative studioer. Konseptet er dramatisk og visuelt engasjerende, som et mystisk objekt reflekterer og roterer som svar på musinteraksjon. Partikler whiz rundt det, skiftende farge som de beveger seg. Du vil jobbe gjennom hvert trinn for å lage denne interaktive siden, slik at du kan generere din egen for prosjektene dine (for videre inspirasjon, se vårt innlegg på det beste Landing sider ).

Du bruker bare de medfølgende funksjonene til tre.js, det kraftige 3D-gjengivelsesbiblioteket for nettet. Du kan bruke dine egne bilder som teksturer for å gjøre det unikt. Du vil også lære om å bruke masker, belysning og teksturer for å forbedre overflatedetaljer, hvordan du bruker miljøkart, og hvordan du legger til lag for dybde og interesse.

Det bør være mer enn nok til å komme i gang, og mye å brenne dine neste prosjekter.

Før du begynner, Last ned filene for denne opplæringen .

01. Grunnleggende HTML-oppsett

For å begynne, trenger du et sted å se din 3D-scene. Sett opp en grunnleggende HTML-fil og ta med en lenke til tre.js. Dette kan enten være vert for eksternt eller lagt til fra tre.js repository her: . Legg til noen enkle CSS for å gjøre siden Fullskjerm og fjern eventuelle rullefelt. Lagre filen din til din lokale webserver, slik at du kan servere HTML-en når du er klar til å teste. Legg til følgende kode for å komme i gang.

 ​​& lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; relative studioer & lt; / title & gt;
& lt; script src = "libs / tre.min.js" & gt; & lt; / script & gt;
& lt; Style & gt;
html, kropp {margin: 0; polstring: 0; Overflow: Skjult; }
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; script & gt;
// 3D-koden går her
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Legg til globale varianter

Du trenger noen variabler for referanser i hele resten av koden. Sett dem opp nå. Dette vil inkludere en matrise for å holde partikler, en 't' variabel for din tetrahedron, mus, raycaster og lys.

Inne i skriptmerkene dine, start ved å legge til følgende kode.

 // vars
var num = 30;
var objekter = [];
var raycaster = ny tre.raycaster ();
var mus = ny tre.Vector2 ();
var lys, t; 

03. Legg til en scene, kamera og gjengivelse

Vi må først legge til en scene som vil inneholde alle våre objekter. Deretter legger vi til et kamera som kan bevege seg rundt i den, panorere, vippe og flytte som vi trenger. Den første attributtet er synsfeltet. Den andre er aspektforholdet. Du kan også definere de nærte og langt klippingplanene i tredje og fjerde attributter. Sist, legg til renderen, som håndterer scenen til lerretet.

I Script-taggen legger du til følgende kode.

 // Lag kamera
var kamera = ny tre.perspectivecamera
(65, window.Innerwidth / window.InnerHeight,
0,1, 1000);
camera.position.Set (0,0,0,0,5);
// lage en scene
varscene = ny tre.scene ();

// skape renderen
Var Renderer = Ny tre.WebGlrenderer (
{antialias: sant});
Genderer.Setsize (Window.Innerwidth, vindu.
innerhette);
Dokument.body.appendchild (Renderer.DomElement.
);

04. Legg til en spotlight

Deretter må du legge til et lys til scenen. Three.js kommer med en rekke lys, inkludert punkt, retningsbestemt, omgivende og spotlights. Bruk en spotlight for dette. Det vil gi deg posisjon og retningsegenskaper, og lar deg kaste skygger hvis du ønsker senere.

Legg til følgende kode ved siden av å legge til spotlight.

 // Lag et spotlys
Lys = Ny tre.spotlight (0xccdddff, .8);
Light.Position.Set (0,0,5);
scene.add (lys); 

05. Legg til en animasjonsløyfe

En animasjonsløyfe, noen ganger kalt en "Render Loop", kalles ideelt 60 ganger per sekund. Film kjører på 24 bilder per sekund (fps), og dette er raskt nok til å lure øyet til å se konstant bevegelse uten avbrudd. I datamaskinens animasjon tar vi sikte på minst 30 fps, men ideelt 60 fps. Dette sikrer svært jevn visuell ytelse, selv om rammer blir tapt periodisk.

Vi binder denne animasjonssløyfen til RequestanimationFrame-funksjonen, som gjør to ting. Først sikrer det at nettleseren er klar til å gjøre den neste rammen. Det betyr også animasjoner kan pause gjengivelse når brukeren ikke lenger ser på nettleserfanen,

Legg til denne koden for å gjøre scenen i en animasjonsløyfe:

 var animate = funksjon () {
requestanimationFrame (animate);
Renderer.Render (scene, kamera);
};

// Start animasjonsløyfe
animert (); 

06. Legg i en bakken tekstur

Deretter vil du skape en bakke for scenen. For å starte, må du laste et bilde som skal brukes. Teksturer for ting som bakken og veggoverflater kan opprettes ved å ta dine egne bilder og nøye beskjære justeringsanlegg i Photoshop CC. . Bare vær sikker på at de kan flere pent. For å komme i gang raskt, er det også gode biblioteker på nettet, se vårt beste på Gratis teksturer .

Du kan velge noe som vil fliser. Dette betyr at kantene ville blande seg sømløst hvis du la dem side om side. Du kan velge noe som fliser eller stein for dette. Legg merke til at du bruker teksturfoliealternativene for å gjenta innpakningen for dette. Dette eksemplet bruker 12x12 gjentatte. Juster dette for å passe bildet ditt når du tester scenen.

 // Legg i en bakken tekstur
var tekstur = ny tre.textureloader ().
last ("eiendeler / stone.jpg");
tekstur.wraps = texture.wrapt = tre.
Repeatwrapping;
tekstur.Repeat.Set (12,12);

07. Lag et grunnmateriale

Tre.js inkluderer en rekke materialetyper for deg å bruke. Materialene er tenkt som huden som dekker et 3D-objekt. Du kan bruke grunnleggende materialer som ikke reagerer på lys eller Phong eller Lambert Shader-materialer som gjør det. Du kan også bruke dine egne tilpassede shader-materialer. For denne bakken, bruk et fysisk materiale. Den har et veldig realistisk utseende, som reagerer på lyset veldig bra. Bruk tekstur du lastet som diffuse kart, og også som en bumpmap hvis du ikke har en bestemt tekstur for det.

 // Lag grunnmateriale
Materiale = Nytt tre.MeshphysicalMaterial ({Kart: Tekstur, BumpMap: Tekstur}); 

08. Lag et jordnett

Når vi kombinerer materialet (huden) med geometrien som definerer formen på 3D-objektet, lager vi et maske. For bakken trenger du en enkel plan. Materialets skygger og tekstur vil skape illusjonen av komplekse overflatedetaljer.

Legg til følgende kode for å lage bakken, roter til en fin vinkel og plasser den til under kameraet. Pass på å kjøre koden din etter dette for å se hvordan den ser ut. Juster hvilken som helst kode du trenger for å ringe den inn.

 // Lag jordnett
var geometri = ny tre.planebufferometri
(100,100);
var bakken = ny tre.mesh (geometri,
materiale);
ground.Rotation.z = Math.pi / 180 * -45;
ground.Rotation.x = Math.pi / 180 * -90;
ground.position.y = -2.0;
scene.add (bakken); 

09. Legg et mål

Deretter legger du til et sentralt 3D-objekt for fokalinteresse. Dette er stjernen på scenen din, så velg en tekstur du liker å dekke den. Merk: Du vil gjøre dette objektet svært reflekterende, så tekstur du laster her er et mer subtilt utseende enn bakken var.

 // Last Object Texture
var tekstur = ny tre.textureloader ().
last ("eiendeler / rock_01_diffusion.jpg"); 

10. Lag et miljø kart

Deretter lager du et miljø rundt objektet ditt som reflekteres på overflaten. Du kan også legge til dette på scenen som Scene.background eiendom hvis du ønsker det. For å laste et miljø, bruker du en Cubetextureloader. Bildene du bruker, skal være seks bilder som huden innsiden av kuben din for å danne et sømløst bilde, kalt Cube Maps.

 var envmap = ny tre.cubetextureloader ()
.Setpath ('Eiendeler /')
.load (['px.jpg', 'nx.jpg', 'py.jpg', 'NY.
jpg ',' pz.jpg ',' nz.jpg ']; 

11. Legg til Tetrahedon.

Tre.js kommer med mange standard geometrier du kan bruke for scenene dine. En av de kjøligere er tetrahedronen. Det tar en radius og en "detalj" parameter for å definere antall ansikter av objektet.

Legg til en til din scene, med følgende kode.

 // Lag tetrahedron
var geometri = nye tre.
Tetrahedronbuffergeometri (2,0);
VAR Material = Nytt tre.MeshphysicalMaterial
({Kart: Tekstur, Envmap: Envmap,
Metalhet: 1,0, grovhet: 0,0});
t = ny tre.mesh (geometri, materiale);
t.Rotation.x = Math.pi / 180 * -10;
scene.add (t);

12. Legg til rotasjon og kamera mål

For å sikre at kameraet alltid ser på hovedobjektet, bruker du Camera.Lookat-funksjonen. Du kan også legge til enhver omgivende rotasjon på objektet ditt også.

Oppdater din animere funksjonskode for å se slik ut.

 RequestanimationFrame (Animate);
t.rotation.y - = 0,005;
kamera.Lookat (t.position);
Renderer.Render (scene, kamera); 

13. Legg til partiklersløyfe

Deretter legger du til noen omgivende partikler på scenen. Disse vil blander seg pent med forgrunnen video loop du vil legge til senere, så vel som å være interaktiv. Legg til en enkel 'for' Loop for å holde koden du vil bruke til å lage flere partikler.

 For (i = 0; i & lt; = num; i ++) {
// Partikkelkode vil gå her
} 

14. Lag partikkelnett

Den første tingen å gjøre er å lage partikkelobjektet. Du kan gjøre dette med sfærer, sprites eller et objekt du ønsker. For nå, prøv å gjøre dem enkle sfærer.

Inne i din for loop legger du til følgende kode.

 // Lag nytt maske
var geometri = ny tre.sperebuffergeometri (.1,6,6);
VAR Materiale = Nytt tre.MeshphysicalMaterial ({Envmap: Envmap, Metalness: 1.0});
var partikkel = ny tre.mesh (geometri, materiale);

15. Sett tilfeldig posisjon og avstand

Partiklene vil bane det sentrale objektet og bør være tilfeldig plassert slik at de fyller rommet pent og har et organisk utseende. Legg til følgende kode for å angi en uregelmessig posisjon og tilordne en konstant avstand for hver partikkel.

 // Sett tilfeldig posisjon
Particle.position.Set (Math.Random () * 100.0 -
50,0,0,0, Math.Random () * - 10.0);
// calc distnace som konstant og tilordne
til objekt
var a = ny tre.Vector3 (0, 0, 0);
var b = partikkel.
var d = a.distanceto (b);
particle.distance = D;

16. Sett opp vinkler for baner

For å gjøre animere banene raskere, legg til vinkelkonstantene for banene, og lagre dem som en egenskap av partikkelen. Legg til følgende kode for å definere disse tilfeldige innholdsinglene.

 // Definer 2 tilfeldige, men konstante vinkler
i radianer
Particle.radians = Math.Random () * 360 * Matematikk.
PI / 180; // innledende vinkel
Particle.radians2 = Math.Random () * 360 * Matematikk.
PI / 180; // innledende vinkel

17. Legg til partikkel til scene og samling

Til slutt, legg til partikkelen til scenen og til objektene du definert tidligere. Dette vil gjøre iterende alle partiklene lett senere.

 // Legg til objekt på scenen
scene.add (partikkel);
// Legg til i samlingen
objekter.push (partikkel);

18. Legg til animasjon til partikler

Deretter må du oppdatere posisjonen og rotasjonen av partikkelobjektene dine. Disse bane i konstant avstand fra scenen senteret. Legg til følgende kode i din animere funksjon.

 For (i = 0; i & lt; = num; i ++) {
var o = objekter [i];
o.Rotation.y + =. 01;
hvis (i% 2 == 0) {
o.radians + =. 005; o.radians2 + =. 005;
} else {
o.radians - =. 005; o.radians2 - =. 005;
}
o.position.x = (Math.cos (O.radians) *
o.distance);
o.position.z = (Math.sin (O.radians) *
o.distance);
o.position.y = (Math.sin (O.radians2) *
o.distance * .5);
}

19. Legg til en tittel

Deretter legger du til en tittel i midten av skjermen - et navn for å introdusere merkevaren din. Letter-avstand for titler gir et flott kinematisk utseende. Bruk en hvilken som helst skrift / stil du liker, men se på filmtittelhenvisninger for inspirasjon. Se vår liste over gratis fonter For en liste over våre favoritt nedlastbare fonter.

Først legg til DOM-elementet for tittelen din. Legg til dette etter skriptkryssene før den avsluttende kroppsmerket.

 & lt; h1 & gt; relative studioer & lt; / h1 & gt;

Legg til følgende stiler for tittelen din på stilen din på toppen av filen din.

H1 {farge: hvit; posisjon: absolutt; Topp: 50%;
Z-indeks: 100; Bredde: 100%; Tekstjustering: Senter;
transformasjon: Oversett (0, -100%); Font-familie:
'Raleway', Sans-serif; font-vekt: 100;
brevavstand: 40px; Tekst-transformasjon:
stor bokstav; FONT-STØRRELSE: 16PX; }

20. Legg til en video loop

Et fint triks for å skape dybde til landingen din er å legge til en liten video loop. Du kan bruke røyk, støv eller partikler. Disse er allment tilgjengelige online, eller en del av et bredt antall video- og filmprodukter. Legg til følgende videokode etter H1-taggen din. Merk at du vil sette den til "dempet" og autoplay. Dette vil også tillate videoen å spille på mobile enheter også online.

 ​​& lt; video id = "videobacker" loop src = "eiendeler /
snow.mp4 "autoplay dempet & gt; & lt; / video & gt;

For å stille opp videoen, legg til følgende CSS til stilene dine på hodet på siden din.

 ​​#Videobacker {bakgrunnsstørrelse: deksel;
Objekt-passform: Deksel; Z-indeks: 9; Opacity: .3;
posisjon: absolutt; Topp: 0px; Venstre: 0px;
Bredde: 100vw; Høyde: 100VH; Overgang: 1S.
opasitet lette ut-ut;

21. Legg til brevboksing

For å virkelig gi din destinasjonsside en kinematisk stil, legg til noen bokstavs bokser til siden.

Begynn med å legge til DIV-elementene for dette.

 ​​& lt; div klasse = 'bar-top' & gt; & lt; / div & gt;
& lt; div class = 'bar-bottom' & gt; & lt; / div & gt;

Deretter oppdaterer du stilene dine for å legge til stiler for disse to svarte barene. Du kan også justere disse stilene til din smak og behov.

 ​​.Bar-top {bakgrunnsfarge: svart;
Høyde: 100px; posisjon: absolutt; Topp: 0;
Venstre: 0; Z-Index: 100; Bredde: 100VW;}
.Bar-bunn {bakgrunnsfarge: svart;
Høyde: 100px; posisjon: absolutt; Bunn: 0;
Venstre: 0; Z-indeks: 100; Bredde: 100vw;} 

Denne artikkelen opprinnelig oppstod i utgave 287 av webdesigneren. Kjøp utgave 287. eller Abonner her .

Les mer:

• Webkomponenter: Den ultimate guiden
• Hvordan lage en lagdelt parallaxeffekt
• Slik legger du animasjon til SVG via CSS