Crea immagini 3D interattive con tre.js

Questo tutorial WebGL dimostra come creare una simulazione ambientale 3D che mostra ciò che accade al mondo come livelli di CO2 cambiano. (Puoi vedere di più Esperimenti WebGL. Qui.)

L'utente controlla i livelli utilizzando un cursore del campo di ingresso HTML. Poiché l'utente aggiunge più CO2, più smog apparirà nella scena, i livelli dell'acqua aumenteranno mentre l'aumento della temperatura scioglie più tappi di ghiaccio polare, gli alberi scompariranno mentre diventano immersi nell'acqua.

Gli elementi sono animati dentro e fuori utilizzando una libreria TWEN e trascinando il cursore nella direzione opposta invertirà gli effetti. Se solo fosse così facile nella vita reale!

01. Visualizza elementi

Per avviare il progetto, aprire la cartella 'Start' nel tuo codice IDE. Aprire index.html. E vedrai che c'è un impalcatura di base di base lì con qualche codice già. Nella sezione del corpo, aggiungere gli elementi di visualizzazione qui che verranno utilizzati come interfaccia al contenuto 3D.

 & lt; div id = "header" & gt;
  & lt; img src = "img / co2.png" id = "badge" e gt;
  & lt; / div & gt;
  & lt; div id = "interner" & gt;
  & lt; Input Class = "Slide" Type = "Range" Min = "0" MAX = "7" Step = "1" Value = "0" onInput = "ShowVal (This.Value)" & GT;
  & lt; P & GT; trascina il cursore per cambiare il livello di CO2 & LT; / P & GT;
  & lt; / div & gt; 

02. Collegamento delle librerie

Il contenuto 3D viene visualizzato attraverso tre.js, che è incluso qui. Un modello Collada verrà aggiunto alla scena più tardi. La biblioteca extra per caricare questo è inclusa, insieme a una biblioteca di base. Le linee successive si collegano ad aumentare gli effetti post-elaborazione che aggiungeranno lo smalto finale.

 & lt; script src = "js / tre.min.js" & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "js / tween.min.js" & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / effectcompositor.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / renderpass.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / shaderpass.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / maskpass.js' & gt; & lt; / script & gt; 

03. Shader post elaborazione

Dopo che la scena ha reso ogni fotogramma, verrà aggiunto un numero di effetti post processo. Queste sono le biblioteche che potenziano l'effetto cereale del film, una sfocatura del turno di inclinazione nella parte superiore e inferiore dello schermo, quindi infine una vignetta per svanire ai bordi dello schermo.

04. Aggiunta delle variabili

Alcuni del codice sono stati completati per te. Vedrai un commento dove aggiungere il resto del codice del tutorial. Un numero di variabili sono utilizzate in questa scena 3D, che si occupano della risoluzione dello schermo, vari modelli 3D e post elaborazione. Due variabili importanti sono il waterht. per l'altezza dell'acqua e il lastval. , che ricorda l'ultima posizione del cursore.

 Var Screen_width = window.innerwidth, screen_height = window.innerheight,
 mousex = 0, mousey = 0, windowhalfx = window.innerwidth / 2, windowhalfy = window.innerheight / 2, fotocamera, scena, rendering, acqua, waterht = 1;
VAR Textureloader = nuovo tre.Textureloader ();
Var Composer, Shadortime = 0, FilmPass, Renderpass, Copypass, EffectVelette, Group, Lastval = 0; 

05. Inizializzazione della scena

La funzione Init è una parte importante del codice, assicurando che la scena sia configurata con l'aspetto giusto all'inizio. Un contenitore viene aggiunto alla pagina, ed è qui che verrà visualizzata la scena 3D. Viene aggiunta una fotocamera e qualche nebbia di sfondo per dissolvere la distanza.

 Funzione init () {
  contenitore var = document.createelement ('div');
  document.body.appendchild (contenitore);
  fotocamera = nuova tre.perspectivecamera (75, screen_width / screen_height, 1, 10000);
  fotocamera.position.set.set (2000, 100, 0);
  scena = nuovo tre.scene ();
  scena.fog = new tre.fogexp2 (0xb6d9e6, 0,0025);
  rendering = nuovo tre.webglrendar ({
  Antialias: True.
  }); 

06. Impostazione del rendering

Il rendering viene dato un colore di sfondo e la risoluzione è impostata sulla stessa dimensione del rapporto pixel dello schermo. Le ombre sono abilitate nella scena, ed è posizionata sulla pagina nell'elemento contenitore. Viene aggiunta una luce dell'emisfero, che ha un cielo e un colore di terra.

renderer.setClearColor (0xADC9D4);
rendering.setpixelratio (finestra.devicepixelratio);
rendering.sesize (screen_width, screen_height);
renderer.Shadowmap.Enabled = true;
rendering.shadowmap.type = tre.pcfsoftshadowmap;
contenitore.appendchild (rendering.domelement);
VAR LIGHT = NUOVO TRE.HemispoLLight (0xA1E2F5, 0x6F4D25, 0.5);
scena.add (luce); 

07. Variabili di shader.

Le variabili che controlleranno gli effetti del processo post shader vengono dati i loro valori qui. Queste variabili saranno utilizzate in seguito per aggiungere valori che controlleranno il look. Se guardi nella funzione Params vedrai questo già completato per te.

 Renderpass = nuovo tre.Renderpass (scena, fotocamera);
hblur = nuovo tre.shaderpass (tre.horizontaltltshiftshader);
vblur = nuovo tre.Shaderpass (tre.verticaltiltshiftsHader);
Filmpass = nuovo tre.Shaderpass (tre.Filmshader);
EFFECTINES = nuovo tre.SHaderPass (tre.VeneseShader);
Copypass = nuovo tre.Shaderpass (tre.Copyshader); 

08. Comporre gli effetti

Gli effetti devono essere impilati in qualcosa chiamato composito di effetti. Questo prende ogni effetto e applica lo stile ad esso. Quindi è tutto visualizzato come scena finale sullo schermo, che vedrai quando la funzione di rendering viene aggiunta in seguito.

09. Caricamento dell'immagine cloud

Il parametri La funzione è chiamata e questo imposta i singoli parametri per gli effetti post. Viene creato un nuovo gruppo e questo manterrà tutto il contenuto di scena al suo interno, per facilitare il rotazione del gruppo di oggetti. Un'immagine PNG trasparente viene caricata come materiale cloud da utilizzare come sprite all'interno della scena.

 params ();
  gruppo = nuovo tre.group ();
  scena.add (gruppo);
  var cloud = textureloader.load ("img / cloud.png");
  materiale = nuovo tre.spritemateriale ({
  Mappa: Cloud, Opacità: 0.6, Colore: 0x888888, Nebbia: TRUE
}); 

10. Doppia per loop

Otto gruppi sono creati all'interno del primo per ciclo continuo. Questi otto gruppi ottengono tutti 35 nuvole aggiunte loro nel secondo per loop. Ogni cloud è posizionato in una posizione casuale sopra la scena. I gruppi verranno attivati ​​e spenti con il cursore da parte dell'utente per mostrare lo smog aggiunto e rimosso nella visualizzazione.

 per (j = 0; j & lt; 8; j ++) {
  var g = nuovo tre.group ();
  per (i = 0; i & lt; 35; i ++) {
  var x = 400 * math.random () - 200;
  var y = 60 * math.random () + 60;
  var z = 400 * math.random () - 200;
  sprite = nuovo tre.sprite (materiale);
  sprite.position.set (x, y, z); 

11. Scalare il cloud

La nuvola è ridimensionata fino a una dimensione che consente di essere visibile nella scena. Ogni gruppo di nuvole dopo il primo gruppo viene ridimensionato in modo da essere praticamente invisibili al renderer. Questo è il modo in cui saranno resi visibili in seguito ridimensionandoli fino alle loro dimensioni complete, poiché questo darà un buon effetto cinguente.

12. Caricamento del modello

Ora il caricatore della collada è impostato per caricare il scena.dae. modello. Quando termina il caricamento, il modello viene scansionato e qualsiasi oggetto che accade essere una rete è fatta per lanciare ombre e ricevere ombre per dare qualche profondità in più per la scena.

 Caricatore VAR = nuovo tre.colladaloader ();
caricatore.options.convertupaxis = true;
caricatore.load ('scene.dae', funzione (Collada) {
  var dae = collada.scene;
  dae.traversa (funzione (figlio) {
  IF (Bambino Istanceof Three.Mesh) {
  bambino.castshadow = true;
  Child.ReceiveShadow = True;
  }
}); 

13. Trovare specifiche nella scena

Poiché il modello è ora pronto per il display è impostato sulla dimensione giusta per adattarsi alla scena. Il codice deve controllare specificamente l'altezza dell'acqua in modo che il modello dell'acqua sia trovato nella scena e passata nella variabile globale. Allo stesso modo la luce principale deve essere trovata in modo che possa essere impostata per progettare ombre.

 dae.scale.x = dae.scale.y = dae.scale.z = 0.5;
dae.updatematrix ();
gruppo.add (DAE);
acqua = scena.getobjectbyname ("acqua", vero);
acqua = acqua.children 
;
luce = scena.getobjectbyname ("spleight", true);
luce = light.children 
; 

14. Impostazioni luminose

Ora poiché i riflettori si trovano le specifiche che rendono installate le ombre in scena. Anche la sbiadimento della luce ai bordi del punto è anche impostato qui. Infine, poiché il modello è il più grande elemento da caricare, il resto della scena verrà impostato prima che questo codice sia eseguito, quindi la funzione di rendering può essere chiamata ogni fotogramma.

 light.target.position.set (0, 0, 0);
  luce.castshadow = true;
   light.shadow = nuovo tre.lightshadow (nuovo tre.perspectivecamera (90, 1, 90, 5000));
  luce.shadow.bias = 0,0008;
  luce.shadow.mapsize.width = 1024;
  luce.Shadow.mapsize.Height = 1024;
  light.penumbra = 1;
  light.decay = 5;
  rendere ();
}); 

15. Ultimo codice inizializzato

La parte finale della funzione Init imposta vari ingressi del mouse e toccare che sposterà la fotocamera in base alla loro posizione. Un evento è anche registrato per ascoltare se lo schermo viene ridimensionato e questo aggiornerà il display rendering.

 Document.AdDeventListenner ('MouseMove', OnDocumentMouseMove, False);
  document.addeventlantener ('touchstart', ondocumenttouchstart, false);
  document.addeventListener ('touchmove', ondocumenteuchmove, falso);
  finestra.AddeventListener ('ridimensiona', onwindowresize, false);
} 

16. Rendering di ogni fotogramma

La funzione di rendering è impostata per essere chiamata come vicino a 60 fotogrammi al secondo mentre il browser può gestire. Il gruppo, che contiene tutti i modelli, è impostato per ruotare da una piccola quantità ogni fotogramma. La posizione della fotocamera viene aggiornata dal mouse o dall'ingresso del tocco e continua a guardare al centro della scena.

17. Aggiornamento del display

Il tempo di shader è una variabile che sale solo da 0,1 ogni fotogramma e questo è passato nel Filmpass. In modo che il film rumoroso può essere aggiornato. Il compositore degli effetti viene aggiornato e reso allo schermo. Finalmente il motore Tween viene aggiornato anche.

 Shadertime + = 0.1;
  Filmpass.uniforms ['tempo']. Valore = shadertime;
  compositore.Render (0.1);
  Tween.update ();
} 

18. Ottenere l'input dell'utente

Il cursore della gamma di ingresso, aggiunta al punto 1, chiama il ShowVal. funzione, che è definita qui. Quando l'utente scatta su questo, controlla solo che il cursore è stato spostato. Se viene spostato, il prossimo gruppo cloud è ridimensionato con un tween oltre 0,8 secondi. L'altezza dell'acqua viene aggiornata e questo è anche superata fino alla nuova altezza.

 Funzione ShowVal (VAL) {
  IF (VAL! = LASTVAL) {
  IF (VAL & GT; LASTVAL) {
  Nuovo Tween.tween (Gruppo.Children [Val] .Scale) .to ({x: 1, y: 1, z: 1}, 800) .ailing (Tween.ax.quadratic.inout). Start ();
  waterht + = 0,07;
  New Tween.tween (water.scale) .to ({y: waterht}, 800) .ailing (tween.axing.quadratic.inout) .start (); 

19. Afferrare gli alberi

La variabile TEMP trova l'attuale gruppo di alberi, dovrebbe eliminare dalla scena e qui lo scala con un solo su un asse Y solo. Si utilizza un allentamento elastico in modo che questo sorga fuori dalla vista sullo schermo per un effetto piacevole. Mentre più acqua e nuvole sono sulla scena, gli alberi scompaiono.

20. Input opposto

Il primo contenuto controllato se il cursore è stato scivolato verso l'alto o verso destra. Ora il codice rileva l'utente scorrevole a sinistra. Le nuvole sono ridimensionate con un trampolino e lo sono il livello dell'acqua per mostrare un effetto di raffreddamento sulla terra.

 New Tween.tween (Group.Children [Lastval] .Scale) .to ({x: 0.001, Y: 0,001, z: 0.001}, 800).. (Tween.ease.quadratic.inout). );
waterht - = 0,07;
New Tween.tween (water.scale) .to ({y: waterht}, 800) .ailing (tween.axing.quadratic.inout) .start (); 

21. Finitura up

Il passo finale è quello di riportare gli alberi, quindi sono ridotti indietro alle loro dimensioni originali con un elastico. Salvare la scena e visualizza la pagina Web da un server ospitato localmente sul proprio computer o su un server Web. Sarai in grado di interagire con il movimento del mouse e il cursore per cambiare il display della scena.

Questo articolo è originariamente apparso in Web designer Numero 265. Compralo Qui .

Articoli Correlati:

• Come codificare un marker di realtà aumentato
• 20 incredibili esempi di WebGL in azione
• 9 usi brillanti del 3D nel web design