Crea una pagina di destinazione 3D WebGL

La creazione di una pagina di destinazione WebGL 3D è un modo per fare una grande prima impressione con il tuo pubblico. Con WebGL, è possibile offrire contenuti visivi di alta qualità proprio nel browser. Puoi farlo senza plugin o requisiti speciali. Tutti i moderni browser supportano WebGL, insieme a dispositivi mobili e tablet. WebGL consente di creare incredibili scene 3D. Può alimentare esperienze webvr, manipolare video, rendono shader grafici e molto altro.

In questo tutorial, farai una pagina di destinazione per lo studio cinematografico immaginario, i relativi monolocali. Il concetto è drammatico e visivamente impegnato, poiché un oggetto misterioso riflette e ruota in risposta all'interazione del mouse. Particelle si alzano intorno, cambiando il colore mentre si muovono. Lavorerai attraverso ciascuno dei passaggi per creare questa pagina interattiva, permettendoti di generare il tuo per i tuoi progetti (per ulteriore ispirazione, consulta il nostro post sul meglio Pagine di atterraggio ).

Utilizzerai solo le funzionalità incluse di tre.js, la potente libreria di rendering 3D per il web. Puoi usare le tue immagini come trame per renderlo unico. Imparerai anche di utilizzare maglie, illuminazione e trame per migliorare i dettagli della superficie, come utilizzare le mappe ambientali e come aggiungere livelli per profondità e interessi.

Ci dovrebbe essere più che sufficiente per iniziare, e molto per alimentare i tuoi prossimi progetti.

Prima che inizi, Scarica i file per questo tutorial .

01. Setup HTML di base

Per iniziare, è necessario da qualche parte per vedere la tua scena 3D. Configurare un file HTML di base e includi un collegamento a tre.js. Questo può essere ospitato esternamente o aggiunto dal Three.js Repository qui: . Aggiungi un po 'di CSS semplice per rendere la pagina a schermo intero e rimuovere le barre di scorrimento. Salva il tuo file sul tuo server web locale, in modo da poter serrare l'HTML quando è pronto per testare. Aggiungi il seguente codice per iniziare.

 ​​& lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; Titolo & GT; relativi studiosi & lt; / Titolo & GT;
& lt; script src = "libs / tre.min.js" & gt; & lt; / script & gt;
& lt; style & gt;
HTML, Body {Margine: 0; Imbottitura: 0; Overflow: nascosto; }
& lt; / style & gt;
& lt; / head & gt;
& lt; corpo e GT;
& lt; script & gt;
// codice 3D va qui
& lt; / script & gt;
& lt; / corpo e GT;
& lt; / html & gt; 

02. Aggiungi varianti globali

Avrai bisogno di alcune variabili per i riferimenti per tutto il resto del codice. Impostare quelli ora. Ciò includerà un array per contenere particelle, una variabile 'T' per il tuo tetraedro, mouse, raycaster e luci.

All'interno dei tag script, inizia aggiungendo il seguente codice.

 // vars
var num = 30;
var oggetti = [];
var raycaster = nuovo tre.Raycaster ();
var mouse = nuovo tre.Vector2 ();
VAR LUCE, T; 

03. Aggiungi una scena, fotocamera e rendering

Dobbiamo prima aggiungere una scena che conterrà tutti i nostri oggetti. Quindi aggiungiamo una macchina fotografica che può muoversi dentro di essa, panning, inclinazione e muoversi come abbiamo bisogno. Il primo attributo è il campo visivo. Il secondo è il rapporto aspetto. Puoi anche definire i piani quasi e lontani del clipping nel terzo e il quarto attributo. Ultimo, aggiungi il rendering, che maneggia il disegno della scena alla tela.

Nel tag dello script aggiungere il seguente codice.

 // crea fotocamera
var camera = nuovo tre.perspectivecamera
(65, finestra.innerwidth / window.innerheight,
0,1, 1000);
fotocamera.Position.set.set (0,0,0,0);
// crea una scena
var scene = nuovo tre.scene ();

// crea il rendering
var renderer = nuovo tre.webglrenderer (
{Antialias: True});
renderer.sesize (window.innerwidth, finestra.
innerheight);
document.body.appendchild (rendering.domelement.
);

04. Aggiungi un riflettore

Quindi, è necessario aggiungere una luce alla scena. Three.js viene fornito con una varietà di luci tra cui punto, direzionale, ambiente e faretti. Utilizzare un riflettore per questo. Ti darà posizione e proprietà direzionali e ti permetterà di lanciare ombre se desideri in seguito.

Aggiungi il seguente codice Avanti per aggiungere i riflettori.

 // Crea una luce spot
luce = nuovo tre.spotlight (0xccddff, .8);
light.position.set.set (0,0,5);
scena.add (luce); 

05. Aggiungi un ciclo di animazione

Un ciclo di animazione, a volte chiamato "rendering loop", è chiamato idealmente 60 volte al secondo. Film funziona a 24 fotogrammi al secondo (FPS) e questo è abbastanza veloce da ingannare l'occhio nel vedere il movimento costante senza interruzione. Nell'animazione del computer, miriamo ad almeno 30 fps, ma idealmente 60 fps. Ciò garantisce prestazioni visive molto fluide anche se i fotogrammi vengono rilasciati periodicamente.

Legiamo questo ciclo di animazione alla funzione readyanimationframe, che fa due cose. Innanzitutto, assicura che il browser sia pronto a rendere il frame successivo. Significa anche che le animazioni possono mettere in pausa il rendering quando l'utente non viene più visualizzato quella scheda del browser,

Aggiungi questo codice per rendere la scena in un ciclo di animazione:

 VAR Animate = funzione () {
richiesta di requestanimationframe (animato);
renderer.Render (scena, fotocamera);
};;

// avviare loop di animazione
animato (); 

06. Carica una trama a terra

Successivamente, creerai un terreno per la scena. Per iniziare, è necessario caricare un'immagine da utilizzare. Le trame per cose come le superfici del terreno e delle pareti possono essere create prendendo le tue foto e accuratamente ritagliando i bordi di regolazione in Photoshop cc. . Assicurati che possano piastrellando bene. Per iniziare rapidamente, ci sono anche grandi biblioteche online, vedi il nostro meglio Texture gratuite .

Puoi scegliere tutto ciò che ti piastrerà. Ciò significa che i bordi si fondono perfettamente se li si è posizionati fianco a fianco. Puoi selezionare qualcosa come piastrelle o pietra per questo. Si noti che si utilizzano le opzioni Wrap Texture per ripetere l'avvolgimento per questo. Questo esempio utilizza la ripetizione 12x12. Regola questo per soddisfare la tua immagine una volta alla prova la scena.

 // carica una trama a terra
VAR Texture = nuovo tre.Textureloader ().
caricare ("attività / stone.jpg");
Texture.wraps = texture.wript = tre.
Ripetizione;
texture.repeat.set (12,12);

07. Creare un materiale a terra

Tre.js include una varietà di tipi di materiali da utilizzare. I materiali sono pensati come la pelle che copre un oggetto 3D. È possibile utilizzare materiali di base che non reagiscono ai materiali luminosi o di Phong o Lambert Shader che fanno. È possibile utilizzare anche i tuoi materiali di shader personalizzati. Per questo terreno, utilizzare un materiale fisico. Ha un aspetto molto realistico, reagendo alla luce molto bene. Utilizzare la trama caricata come mappa diffusa e anche come BumpMap se non hai una trama specifica per questo.

 // Crea materiale a terra
materiale = nuovo tre.meshphysicalmateriale ({mappa: Texture, BumpMap: Texture}); 

08. Creare una maglia a terra

Quando combiniamo il materiale (pelle) con la geometria che definisce la forma dell'oggetto 3D, creiamo una maglia. Per terra, hai bisogno di un piano semplice. Il materiale shader e texture creerà l'illusione di complessi dettagli superficiali.

Aggiungere il seguente codice per creare la rete a terra, ruotare su un angolo carino e posizionarlo sotto la fotocamera. Assicurati di eseguire il tuo codice dopo questo per vedere come appare. Regola qualsiasi codice è necessario averlizzato.

 // Crea rete a terra
var geometry = nuovo tre.plancuffergeometry
(100,100);
var ground = nuovo tre.mesh (geometria,
Materiale );
terra.rotazione.z = math.pi / 180 * -45;
terra.rotazione.x = math.pi / 180 * -90;
terra.position.y = -2.0;
scena.add (terra); 

09. Carica un obiettivo

Successivamente, aggiungerai un oggetto 3D centrale per interesse focale. Questa è la stella della tua scena, quindi scegli una texture che ti piace coprirla. Nota: renderà questo oggetto altamente riflessivo, quindi la trama che carichi qui è un aspetto più sottile del terreno.

 // Carica la trama dell'oggetto
VAR Texture = nuovo tre.Textureloader ().
caricare ("asset / rock_01_diffusion.jpg"); 

10. Creare una mappa Ambiente

Quindi, crea un ambiente attorno al tuo oggetto che si rifletterà sulla sua superficie. Puoi anche aggiungere questo alla scena come la proprietà della scena.background se lo desideri. Per caricare un ambiente, si utilizza un cubéxtureloader. Le immagini che usi dovrebbero essere sei immagini che la pelle all'interno del tuo cubo per formare un'immagine senza soluzione di continuità, chiamate mappe cubane.

 VAR Envmap = new tre.CubeTextureLoader ()
.setpath ('asset /')
.load (['px.jpg', 'nx.jpg', 'py.jpg', 'ny.
jpg ',' pz.jpg ',' nz.jpg ']); 

11. Aggiungi tetraedon.

Three.js viene fornito con molte geometrie predefinite che puoi usare per le tue scene. Uno dei più freddi è il tetraedro. Ci vuole un raggio e un parametro "dettaglio" per definire il numero di volti dell'oggetto.

Aggiungi uno alla tua scena, con il seguente codice.

 // crea tetraedro
var geometry = nuovi tre.
Tetraedronbuffergeometry (2,0);
Materiale VAR = nuovo tre.MeshphysicalMaterial
({Mappa: Texture, Envmap: Envmap,
Metalness: 1.0, rugosità: 0,0});
t = nuovo tre.mesh (geometria, materiale);
t.rotazione.x = math.pi / 180 * -10;
scena.add (t);

12. Aggiungi target di rotazione e fotocamera

Per assicurarsi che la fotocamera stia sempre guardando il tuo oggetto principale, si utilizza la funzione Camera.Lookat. Puoi anche aggiungere una rotazione ambientale anche al tuo oggetto.

Aggiorna il tuo codice funzione animato per assomigliare a questo.

 RichiestaNationframe (animato);
t.rotazione.y - = 0,005;
fotocamera.lookat (t.position);
rendering.render (scena, fotocamera); 

13. Aggiungi loop particelle

Quindi, aggiungi alcune particelle ambientali alla scena. Questi si fondono bene con il loop video in primo piano aggiungere più tardi, oltre ad essere interattivo. Aggiungi un semplice 'per' loop per tenere il codice che utilizzerai per creare più particelle.

 per (i = 0; i & lt; = num; i ++) {
// il codice delle particelle andrà qui
} 

14. Crea maglie di particelle

La prima cosa da fare è creare l'oggetto particella. Potresti farlo con sfere, sprite o qualsiasi oggetto che desideri. Per ora, prova a renderli semplici sfere.

All'interno del tuo loop aggiungi il seguente codice.

 // Crea una nuova maglia
var geometry = nuovo tre.spherebuffergeometry (.1,6,6);
var materiale = nuovo tre.MeshphysicalMaterial ({Envmap: Envmap, Metalness: 1.0});
Var particle = nuovo tre.mesh (geometria, materiale);

15. Impostare la posizione e la distanza casuali

Le particelle orbiteranno l'oggetto centrale e dovrebbero essere posizionate casualmente in modo da riempire bene lo spazio e hanno un aspetto organico. Aggiungere il seguente codice per impostare una posizione irregolare e quindi assegnare una distanza costante per ogni particella.

 // imposta la posizione casuale
particelle.position.set (matematica.random () * 100.0 -
50.0,0.0, matematica.random () * - 10.0);
// Calc Distnace come costante e assegna
obiettare
var a = nuovo tre.Vector3 (0, 0, 0);
var b = particelle.position;
var d = a.distanceto (B);
particelle.distance = D;

16. Configurare gli angoli per orbite

Per rendere l'animazione delle orbite più velocemente, aggiungere le costanti dell'angolo per le orbite e conservarle come una proprietà della particella. Aggiungi il seguente codice per definire questi angoli di contenuto casuali.

 // Definisce 2 angoli casuali ma costanti
in Radians.
Particle.radians = math.random () * 360 * Math.
PI / 180; // Angolo iniziale
Particle.RADIANS2 = Math.random () * 360 * Matematica.
PI / 180; // Angolo iniziale

17. Aggiungi particella a scena e collezione

Infine, aggiungi la particella alla scena e per l'array di oggetti che hai definito in precedenza. Questo renderà intestazione tutte le particelle facilmente in seguito.

 // Aggiungi oggetto alla scena
scena.add (particella);
// aggiungere alla collezione
oggetti.push (particella);

18. Aggiungi animazione alle particelle

Successivamente, è necessario aggiornare la posizione e la rotazione degli oggetti particelle. Queste orbita a una distanza costante dal centro scena. Aggiungi il seguente codice alla tua funzione di animazione.

 per (i = 0; i & lt; = num; i ++) {
var o = oggetti [i];
o.rotazione.y + =. 01;
se (I% 2 == 0) {
o.radians + =. 005; o.RADIANS2 + =. 005;
} altro {
o.radians - =. 005; o.radians2 - =. 005;
}
o.position.x = (math.cos (o.radians) *
o.Distanzia);
o.position.z = (math.sin (o.radians) *
o.Distanzia);
o.position.y = (math.sin (o.radians2) *
o.Distance * .5);
}

19. Aggiungi un titolo

Quindi, aggiungi un titolo al centro dello schermo: un nome per presentare il tuo marchio. Lettera-spaziatura per i titoli danno un grande aspetto cinematografico. Usa qualsiasi carattere / stile che ti piace, ma guarda i riferimenti del titolo del film per l'ispirazione. Guarda il nostro elenco di Font gratuiti Per un elenco dei nostri font scaricabili preferiti.

Per prima cosa aggiungi l'elemento DOM per il tuo titolo. Aggiungi questo dopo i tag dello script prima del tag del corpo di chiusura.

 & lt; h1 & gt; relativi studiosi & lt; / h1 & gt;

Aggiungi i seguenti stili per il tuo titolo ai tuoi tag di stile nella parte superiore del tuo file.

 H1 {Colore: bianco; Posizione: assoluto; Top: 50%;
z-index: 100; Larghezza: 100%; Text-Align: Center;
Trasforma: Traduci (0, -100%); famiglia di font:
'Raleway', sans-serif; Peso dei fonti: 100;
Lettera-spaziatura: 40 px; Trasformazione del testo:
maiuscolo; dimensione del carattere: 16 px; }

20. Aggiungi un loop video

Un bel trucco per creare profondità al tuo atterraggio è aggiungere un piccolo giro video. Puoi usare fumo, polvere o particelle. Questi sono ampiamente disponibili online, o parte di un ampio numero di pacchetti video e cinematografici. Aggiungi il seguente tag video dopo il tag H1. Si noti che si desidera impostarlo su 'MUDED' e AUTOPLAY. Questo consentirà anche al video di riprodurre i dispositivi mobili anche online.

 ​​& lt; video id = "VideoBacker" Loop SRC = "Asset /
snow.mp4 "AutoPlay Muded & GT; & Lt; / Video & GT;

Per style up il video, aggiungi il seguente CSS ai tuoi stili alla testa della tua pagina.

 ​​#VideoBacker {Sfondo-Dimensione: copertina;
Object-fit: copertura; z-index: 9; opacità: .3;
Posizione: assoluto; Top: 0px; a sinistra: 0 px;
Larghezza: 100VW; Altezza: 100VH; Transizione: 1s.
opacità facilità-in-out;

21. Aggiungi la lettera-boxe

Per dare davvero la tua pagina di destinazione uno stile cinematografico, aggiungi alcune scatole di lettere alla pagina.

Inizia aggiungendo gli elementi div per questo.

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

Quindi aggiorna i tuoi stili per aggiungere stili per queste due barre nere. È possibile regolare anche questi stili al tuo gusto e ai tuoi bisogni.

 ​​.bar-top {sfondo-colore: nero;
Altezza: 100px; Posizione: assoluto; Top: 0;
a sinistra: 0; z-index: 100; larghezza: 100vw;}
.bar-bottom {sfondo-colore: nero;
Altezza: 100px; Posizione: assoluto; Fondo: 0;
a sinistra: 0; z-index: 100; larghezza: 100vw;} 

Questo articolo è originariamente apparso in emissione 287 del web designer. Comprare il problema 287. o Iscriviti qui .

Per saperne di più:

• Componenti Web: la guida definitiva
• Come creare un effetto parallasse a strati
• Come aggiungere animazione a svg tramite css