Opret en WebGL 3D destinationsside

Oprettelse af en WebGL 3D destinationsside er en måde at gøre et godt første indtryk med dit publikum. Med WebGL kan du levere højkvalitets visuelt indhold lige i browseren. Du kan gøre det uden plugins eller eventuelle særlige krav. Alle moderne browsere understøtter WebGL, sammen med mobile enheder og tabletter. Webgl giver dig mulighed for at oprette utrolige 3D-scener. Det kan power WebVR oplevelser, manipulere video, gøre grafikskader og meget mere.

I denne vejledning vil du lave en destinationsside for det fiktive filmstudio, relative studios. Konceptet er dramatisk og visuelt engagerende, da et mystisk objekt afspejler og roterer som svar på musens interaktion. Partikler whiz omkring det, skiftende farve, som de bevæger sig. Du vil arbejde gennem hvert trin for at oprette denne interaktive side, så du kan generere din egen til dine projekter (for yderligere inspiration, se vores indlæg på det bedste landingssider. ).

Du bruger kun de inkluderede funktioner i Three.js, det kraftfulde 3D-gengivelsesbibliotek til internettet. Du kan bruge dine egne billeder som teksturer for at gøre det unikt. Du vil også lære om at udnytte masker, belysning og teksturer for at forbedre overflade detaljer, hvordan man bruger miljøkort, og hvordan man tilføjer lag til dybde og renter.

Der bør være mere end nok til at komme i gang, og masser at brændstof dine næste projekter.

Før du starter, Download filerne til denne vejledning .

01. Grundlæggende HTML Setup

For at begynde, har du brug for et sted at se din 3D-scene. Opsæt en grundlæggende HTML-fil og inkludere et link til tre.js. Dette kan enten hostes eksternt eller tilføjes fra Tre.js Repository her: . Tilføj nogle enkle CSS for at gøre siden Fuld skærm og fjern eventuelle rullestænger. Gem din fil til din lokale webserver, så du kan tjene HTML, når du er klar til at teste. Tilføj følgende kode for at komme i gang.

 ​​& lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; hoved & gt;
& lt; titel & gt; relative studios & lt; / titel & gt;
& lt; script src = "libs / tre.min.js" & gt; & lt; / script & gt;
& lt; stil & gt;
HTML, krop {margin: 0; Padding: 0; Overløb: Skjult; }
& lt; / stil & gt;
& lt; / Head & GT;
& lt; body & gt;
& lt; script & gt;
// 3D-kode går her
& lt; / script & gt;
& lt; / body & gt;
& lt; / HTML & GT; 

02. Tilføj globale varianter

Du skal bruge nogle variabler til referencer i hele resten af ​​koden. Sæt de op nu. Dette vil omfatte en matrix for at holde partikler, en 't' variabel for din tetrahedron, mus, raycaster og lys.

Inde i dine script-tags, start ved at tilføje følgende kode.

 // VARS
var num = 30;
VAR OBJECTS = [];
var raycaster = ny tre.raycaster ();
Var mus = ny tre.vector2 ();
var lys, t; 

03. Tilføj en scene, kamera og gengivelse

Vi skal først tilføje en scene, som vil indeholde alle vores objekter. Derefter tilføjer vi et kamera, der kan bevæge sig rundt i det, panorere, vippe og flytte som vi har brug for. Den første egenskab er synsfeltet. Det andet er billedforholdet. Du kan også definere de nærmeste og fjerne klipningsplaner i tredje og fjerde attributter. Sidst, tilføj den renderer, som håndterer tegning af scenen til lærredet.

I script-mærket tilføj følgende kode.

 // Opret kamera
var kamera = ny tre.perspectivecamera
(65, vindue.innerwidth / window.innerheight,
0,1, 1000);
kamera.position.Sæt (0,0,0,0,5);
// Opret en scene
var scene = ny tre.Scene ();

// CREATE RENDER.
var renderer = ny tre.webgrenderer (
{antialias: true});
renderer.setsize (vindue.innerwidth, vindue.
indreheight);
Dokument.body.appendchild (render.domelement.
);

04. Tilføj en spotlight

Dernæst skal du tilføje et lys til scenen. Three.js leveres med en række lys, herunder punkt, retningsbestemt, omgivende og spotlights. Brug et spotlight til dette. Det vil give dig position og retningsbestemt egenskaber, og lad dig kaste skygger, hvis du ønsker det senere.

Tilføj følgende kode ved siden af ​​Tilføj spotlight.

 // Opret et spotlys
lys = ny tre.spotlight (0xccddff, .8);
lys.position.Sæt (0,0,5);
scene.add (lys); 

05. Tilføj en animationsløjfe

En animationsløjfe, nogle gange kaldet en 'render loop', kaldes ideelt 60 gange pr. Sekund. Film kører ved 24 billeder pr. Sekund (FPS), og det er hurtigt nok til at narre øjet til at se konstant bevægelse uden afbrydelse. I computer animation sigte vi for mindst 30 fps, men ideelt set 60fps. Dette sikrer meget glat visuel ydeevne, selvom rammerne tabes periodisk.

Vi binder denne animationsløjfe til RequestAnimationframe-funktionen, som gør to ting. For det første sikrer det, at browseren er klar til at gøre den næste ramme. Det betyder også animationer kan pause, når brugeren ikke længere ser på browser-fanen,

Tilføj denne kode for at gøre scenen i en animationsløjfe:

 Var animate = funktion () {
requestanimationframe (animere);
renderer.render (scene, kamera);
};

// Start animationsløjfe
animere (); 

06. Læg en jorden tekstur

Dernæst opretter du en grund til scenen. For at starte, skal du indlæse et billede, der skal bruges. Teksturer til ting som jorden og vægflader kan oprettes ved at tage dine egne fotos og omhyggeligt beskæring af justeringskanter i Photoshop CC. . Bare vær sikker på, at de kan flise pænt. For at komme i gang hurtigt, er der også gode biblioteker online, se vores bedste på Gratis teksturer. .

Du kan vælge noget, der vil flise. Det betyder, at kanterne vil blande sammen problemfrit, hvis du lagde dem side om side. Du kan vælge noget som fliser eller sten til dette. Bemærk, at du bruger teksturpakningsindstillingerne til at gentage indpakningen for dette. Dette eksempel bruger 12x12 gentagelse. Juster dette for at passe til dit billede, når du tester scenen.

 // Læg en jorden tekstur
Var Texture = New Three.Textureloader ().
belastning ("Aktiver / stone.jpg");
Texture.wraps = Texture.Wrap = tre.
Gentag;
tekstur.Repeat.Sæt (12,12);

07. Opret et jordmateriale

Tre.js indeholder en række forskellige materialetyper, som du kan bruge. Materialer betragtes som huden, der dækker en 3D-objekt. Du kan bruge grundlæggende materialer, der ikke reagerer på lys eller phong eller lambert shader materialer, der gør. Du kan også bruge dine egne brugerdefinerede shaders materialer. For denne jord skal du bruge et fysisk materiale. Det har et meget realistisk udseende, der reagerer på lyset meget godt. Brug den tekstur, du har lagt som Diffus Map, og også som bumpmap, hvis du ikke har en bestemt tekstur til det.

 // Opret jordmateriale
Materiale = Ny Tre.MhPhysicalMaterial ({MAP: Texture, BumpMap: Texture}); 

08. Opret et jordnet

Når vi kombinerer materialet (hud) med geometrien, der definerer formen af ​​3D-objektet, skaber vi et maske. For jorden har du brug for en simpel plan. Materialet Shader og Texture vil skabe illusionen af ​​komplekse overflade detaljer.

Tilføj følgende kode for at oprette dit jordnet, drej til en god vinkel og placer den til under kameraet. Sørg for at køre din kode efter dette for at se, hvordan det ser ud. Juster enhver kode, du skal ringe til den.

 // Opret jordnet
var geometri = ny tre.planebuffergeometri
(100.100);
var jord = 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 (jorden); 

09. Læg et mål

Dernæst tilføjer du et centralt 3D-objekt for fokusinteresse. Dette er stjernen på din scene, så vælg en tekstur, du kan lide at dække den. Bemærk: Du vil gøre dette objekt meget reflekterende, så den tekstur, du indlæser her, er et mere subtil udseende end jorden var.

 // Indlæs objekttekstur
Var Texture = New Three.Textureloader ().
belastning ("Aktiver / rock_01_diffusion.jpg"); 

10. Opret et Miljøskort

Dernæst opret et miljø omkring dit objekt, der vil blive afspejlet på overfladen. Du kan også tilføje dette til scenen som scenebackground ejendom, hvis du ønsker det. For at indlæse et miljø bruger du en cubetextureloader. De billeder, du bruger, skal være seks billeder, der hænger indersiden af ​​din terning til at danne et sømløst billede, kaldet Cube Maps.

 Var Envmap = New Three.Cubetextureloader ()
.setpath ('Aktiver /')
.load (['px.jpg', 'nx.jpg', 'py.jpg', 'ny.
JPG ',' pz.jpg ',' nz.jpg ']) 

11. Tilføj tetrahedon.

Tre.js leveres med mange standard geometrier, du kan bruge til dine scener. En af de køligere er tetrahedronen. Det tager en radius og en "detaljeret" parameter til at definere antallet af ansigter af objektet.

Tilføj en til din scene, med følgende kode.

 // Opret tetrahedron
var geometri = ny tre.
Tetrahedronbuffergeometri (2,0);
VAR MATERIAL = NY TREE.MEHPHYSICALMATERIAL
({map: tekstur, envmap: ENMMAP,
Metalness: 1,0, ruhed: 0,0});
t = ny tre.mesh (geometri, materiale);
t.rotation.x = math.pi / 180 * -10;
scene.add (t);

12. Tilføj rotation og kamera mål

For at sikre, at kameraet altid ser på dit hovedobjekt, bruger du CAMERA.LOOKAT-funktionen. Du kan også også tilføje en omgivende rotation til dit objekt.

Opdater din ANIMATE-funktionskode for at se sådan ud.

 RequestanimationFrame (animere);
t.rotation.y - = 0,005;
camera.lookat (t.position);
renderer.render (scene, kamera); 

13. Tilføj partikelsløjfe

Derefter tilsættes nogle omgivende partikler til scenen. Disse vil blande sig pænt med forgrunds video-loop, du vil tilføje senere, såvel som at være interaktive. Tilføj en simpel 'for' loop for at holde koden du bruger til at oprette flere partikler.

 For (I = 0; I & LT; = Num; I ++) {
// partikelkode vil gå her
} 

14. Opret partikelnet

Den første ting at gøre er at skabe partikelobjektet. Du kunne gøre dette med kugler, sprites eller ethvert objekt du ønsker. For nu, prøv at lave dem enkle kugler.

Inde i din for loop Tilføj følgende kode.

 // Opret nyt mesh
Var geometri = ny tre.Spherebuffergeometri (.1,6,6);
VAR MATERIAL = Ny tre.MhPhysicalMaterial ({Envmap: Envmap, metalness: 1.0});
var partikel = ny tre.mesh (geometri, materiale);

15. Indstil tilfældig position og afstand

Partiklerne vil bane det centrale objekt og bør tilfældigt placeres, så de fylder rummet pænt og har et organisk udseende. Tilføj følgende kode for at indstille en uregelmæssig position og derefter tildele en konstant afstand for hver partikel.

 // Indstil tilfældig position
partikel.position.set (math.random () * 100,0 -
50,0,0,0, matemath.random () * - 10.0);
// Beral distnace som konstant og tildelt
til objekt
Var A = Ny tre.Vector3 (0, 0, 0);
Var B = partikel.position;
Var d = a.distanceto (b);
partikel.distance = D;

16. Indstil vinkler til baner

For at gøre animering af banerne hurtigere, tilsæt vinkelkonstanterne til banerne og opbevar dem som en egenskab af partiklen. Tilføj følgende kode for at definere disse tilfældige indholdsvinkler.

 // Definer 2 tilfældige men konstante vinkler
i radianer
Particle.radians = Math.Random () * 360 * matematik.
Pi / 180; // første vinkel
partikel.radians2 = math.random () * 360 * matematik.
Pi / 180; // første vinkel

17. Tilføj partikel til scene og samling

Endelig tilsæt partiklen til scenen og til de objekters array du tidligere definerede. Dette vil gøre iterating alle partiklerne nemt senere.

 // Tilføj objekt til scene
scene.add (partikel);
// Tilføj til samling
objekter.push (partikel);

18. Tilføj animation til partikler

Derefter skal du opdatere positionen og rotationen af ​​dine partikelobjekter. Disse kredsløb på en konstant afstand fra scenens centrum. Tilføj følgende kode til din animerede funktion.

 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;
} ellers {
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. Tilføj en titel

Derefter tilføj en titel i midten af ​​skærmen - et navn for at introducere dit mærke. Brev-afstand til titler giver et godt filmisk udseende. Brug enhver skrifttype / stil du kan lide, men se på filmtitel referencer til inspiration. Se vores liste over Gratis skrifttyper. for en liste over vores foretrukne downloadbare skrifttyper.

Først tilføj DOM-elementet for din titel. Tilføj dette efter script-tags før lukkekroppen.

 & lt; h1 & gt; relative studios & lt; / h1 & gt;

Tilføj følgende stilarter til din titel til dine stilmærker øverst på din fil.

H1 {farve: hvid; position: absolut; Top: 50%;
Z-indeks: 100; Bredde: 100%; Tekst-Align: Center;
Transform: Oversæt (0, -100%); Font-Family:
'Raleway', Sans-Serif; skrifttype-vægt: 100;
Brevafstand: 40px; Tekst-transformation:
store bogstaver; Font-størrelse: 16px; }

20. Tilføj en video loop

Et godt trick til at skabe dybde til din landing er at tilføje en lille video loop. Du kan bruge røg, støv eller partikler. Disse er bredt tilgængelige online eller en del af et bredt antal video- og filmfremstillingspakker. Tilføj følgende video-tag efter din H1-tag. Bemærk, at du vil indstille den til 'Dæmpet' og AutoPlay. Dette vil også tillade videoen at spille på mobile enheder også online.

 ​​& LT; Video ID = "Videobacker" loop src = "Aktiver /
snow.mp4 "Autoplay Muted & GT; & LT; / Video & GT;

For at style videoen skal du tilføje følgende CSS til dine stilarter på hovedet på din side.

 ​​#videobacker {baggrundsstørrelse: cover;
Objekt-fit: Dæk; Z-indeks: 9; Opacitet: .3;
position: absolut; Top: 0px; Venstre: 0px;
Bredde: 100VW; Højde: 100Vh; Overgang: 1s.
opacitet lette-in-out;

21. Tilføj brevboksning

For virkelig at give din destinationsside en filmisk stil, tilføj nogle brevkasser til siden.

Start med at tilføje divelementerne til dette.

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

Opdater derefter dine stilarter for at tilføje stilarter til disse to sorte søjler. Du kan justere disse stilarter til din smag og også behov.

 ​​.Bar-top {baggrundsfarve: sort;
Højde: 100px; position: absolut; TOP: 0;
Venstre: 0; Z-indeks: 100; Bredde: 100VW;}
.Bar-bund {baggrundsfarve: sort;
Højde: 100px; position: absolut; Bund: 0;
Venstre: 0; Z-indeks: 100; Bredde: 100VW;} 

Denne artikel optrådte oprindeligt i udstedelse 287 af webdesigneren. Køb problem 287. eller Abonner her .

Læs mere:

• Webkomponenter: The Ultimate Guide
• Sådan oprettes en lagdelt parallaxffekt
• Sådan tilføjes animation til SVG via CSS