Lag interaktive 3D-visuelle med tre.js

Denne WebGl-opplæringen demonstrerer hvordan man lager en 3D-miljøsimulering som viser hva som skjer med verden som CO2-nivåene endres. (Du kan se mer Webgl-eksperimenter her.)

Brukeren styrer nivåene ved hjelp av et HTML-inngangsområde-glidebryter. Siden brukeren legger til mer CO2, vises mer smog i scenen, vannnivåene vil stige som temperaturøkningen smelter flere polare iskapsler, deretter vil trær forsvinne når de blir nedsenket i vann.

Elementene er animert inn og ut med et mellombibliotek og dra glidebryteren i motsatt retning vil reversere effektene. Hvis bare det var så lett i virkeligheten!

01. Vis elementer

For å starte prosjektet, åpne mappen "Start" i koden din. Åpne opp index.html. Og du vil se at det er en grunnleggende side stillas der med noen kode allerede. I kroppsseksjonen, legg til skjermelementene her som vil bli brukt som grensesnittet til 3D-innholdet.

 & lt; div id = "header" & gt;
  & lt; img src = "img / co2.png" id = "badge" & gt;
  & lt; / div & gt;
  & lt; div id = "indre" & gt;
  & lt; input class = "Slide" type = "rekkevidde" Min = "0" max = "7" Step = "1" value = "0" Oninput = "ShowVal (This.Value)" & gt;
  & lt; p & gt; Dra glidebryteren for å endre nivået på CO2 og LT; / P & GT;
  & lt; / div & gt; 

02. Koble opp bibliotekene

3D-innholdet vises gjennom tre.js, som er inkludert her. En Collada-modell vil bli lagt til scenen senere. Det ekstra biblioteket for å laste dette er inkludert, sammen med et grunnleggende mellombibliotek. De neste linjene kobler alle sammen til postbehandlingseffekter som vil legge til sluttpolen.

 & 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 / effektComposer.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. Postbehandlingshærer

Etter at scenen har gjengitt hver ramme, vil en rekke postprosesseffekter bli lagt til. Dette er bibliotekene som styrker filmkorneteffekten, en tiltskift-uskarphet øverst og nederst på skjermen, og deretter til slutt en vignette for å falme ut til kantene på skjermen.

04. Legge til variablene

Noen av koden er fullført for deg. Du vil se en kommentar der du skal legge til resten av opplæringenes kode. En rekke variabler brukes i denne 3D-scenen, som ser etter skjermoppløsning, ulike 3D-modeller og postbehandling. To viktige variabler er vannht. for vannhøyden og Lastval , som husker den siste posisjonen til glidebryteren.

 Var Screen_width = window.Innerwidth, screen_height = window.innerHeight,
 mosex = 0, mousey = 0, windowhalfx = window.Innerwidth / 2, windowhalfy = window.InnerHeight / 2, kamera, scene, gjengivelse, vann, vann = 1;
var tekstureloader = ny tre.textureloader ();
VAR Composer, ShaderTime = 0, Filmpass, Renderpass, CopyPass, EffectVignte, Group, Lastval = 0; 

05. Initialiserer scenen

Init-funksjonen er en stor del av koden, slik at scenen er satt opp med det rette tittet i begynnelsen. En beholder er lagt til på siden, og dette er hvor 3D-scenen vil bli vist. Et kamera er lagt til og litt bakgrunn tåke for å falme ut avstanden.

 Funksjonsinit () {
  VAR-beholder = Dokument.createmement ('div');
  Dokument.body.appendchild (container);
  kamera = ny tre.perepectivecamera (75, screen_width / screen_height, 1, 10000);
  camera.position.Set (2000, 100, 0);
  scene = ny tre.scene ();
  scene.fog = ny tre.fogexp2 (0xb6d9e6, 0.0025);
  Renderer = Ny tre.WebGlrenderer ({
  Antialias: TRUE
  }); 

06. Stille inn gjengivelsen

Renderen er gitt en bakgrunnsfarge og oppløsningen er satt til samme størrelse som pikselforholdet på skjermen. Skygger er aktivert i scenen, og den er plassert på siden i beholderelementet. Et halvkule lys blir tilsatt, som har en himmel og jordfarge.

Renderer.SetClearColor (0xadc9d4);
Renderer.SetPixelRatio (window.devicepixelratio);
Genderer.Setze (Screen_Width, Screen_Height);
Renderer.shadowMap.Enabled = sant;
renderer.shadowmap.type = tre.pcfsoftshadowmap;
container.appendchild (Renderer.DomElement);
varlys = ny tre.hemispherelight (0xa1e2f5, 0x6f4d25, 0.5);
scene.add (lys); 

07. Skyggervariabler

Variablene som vil kontrollere skyggen Post Process Effects er gitt sine verdier her. Disse variablene vil bli brukt senere for å legge til verdier som vil kontrollere utseendet. Hvis du ser i Params-funksjonen, vil du se dette allerede fullført for deg.

 Renderpass = ny tre.Renderpass (scene, kamera);
hblur = ny tre.Shaderpass (Three.horizontaltiltShiftsShader);
vblur = ny tre.Shaderpass (tre.VerticleTiltShiftShader);
filmpass = ny tre.Shaderpass (tre.filmshader);
effektvignette = ny tre.Shaderpass (tre.VIGNETTETSESHADER);
CopyPass = New Three.Shaderpass (Three.Copysyser); 

08. Komponere effektene

Effektene må stables opp i noe som kalles en effekter komponist. Dette tar hver effekt og bruker stylingen til den. Så vises alt som en endelig scene på skjermen, som du vil se når den gjengitte funksjonen er lagt til senere.

09. Laster ut skybildet

De Params. Funksjonen kalles, og dette setter de enkelte parametrene for posteffekter. En ny gruppe er opprettet, og dette vil holde hele sceneninnholdet i det, for å gjøre det enkelt å rotere gruppen av objekter. Et gjennomsiktig PNG-bilde er lastet som et skymateriale som skal brukes som sprite i scenen.

 Params ();
  gruppe = ny tre.group ();
  scene.add (gruppe);
  var Cloud = Textureloader.Load ("img / cloud.png");
  Materiale = Nytt tre.spritematerial ({
  Kart: Cloud, Opacity: 0.6, Farge: 0x888888, Tåkt: True
}); 

10. Dobbel for Loop

Åtte grupper er opprettet i den første til Løkke. Disse åtte gruppene får alle 35 skyer lagt til dem i den andre for sløyfe. Hver sky er plassert i et tilfeldig sted over scenen. Gruppene vil bli slått på og av med glidebryteren av brukeren for å vise smog tilsettes og fjernes i visualiseringen.

 for (j = 0; j <8; j ++) {
  var g = ny tre.group ();
  for (i = 0; i ++) {
  var x = 400 * Math.Random () - 200;
  var y = 60 * Math.Random () + 60;
  VAR Z = 400 * MATH.RANDOM () - 200;
  sprite = ny tre.sprite (materiale);
  sprite.position.Set (x, y, z); 

11. Skalere skyen

Skyen er skalert opp til en størrelse som gjør det mulig å være synlig i scenen. Hver gruppe skyer etter at den første gruppen er nedskalert slik at de er nesten usynlige for renderen. Slik vil de bli gjort synlige senere ved å skalere dem tilbake til full størrelse, da dette vil gi en god tweening effekt.

12. Laster inn modellen

Nå er Collada Loader satt til å laste inn scene.dae. modell. Når den er ferdig med lasting, blir modellen skannet og ethvert objekt som skjer for å være et maske, er laget for å kaste skygger og motta skygger for å gi litt ekstra dybde til scenen.

 VAR Loader = Ny tre.Colladaloader ();
loader.options.convertupaxis = sant;
loader.load ('scene.dae', funksjon (Collada) {
  var dae = collada.scene;
  dae.traverse (funksjon (barn) {
  hvis (barn forekomst av tre.mesh) {
  barn.castshadow = sant;
  barn.receiveshadow = sant;
  }
}); 

13. Finne spesifikasjoner i scenen

Siden modellen er nå klar for visning, er den satt til riktig størrelse for å passe på scenen. Koden må spesifikt kontrollere høyden på vannet, slik at vannmodellen finnes i scenen og sendes inn i den globale variabelen. På samme måte må hovedlyset bli funnet slik at det kan settes til prosjektskygger.

 dae.scale.x = dae.scale.y = dae.scale.z = 0.5;
dae.updatematrix ();
GROUP.ADD (DAE);
vann = scene.getObjectbyname ("vann", sant);
Vann = vann. Barn 
;
Light = scene.getObjectbyname ("speithly", sant);
Lett = lys. Barn 
; 

14. Lysinnstillinger

Nå som spotlighten er funnet spesifikasjonene som gjør det kastet skygger inn i scenen, er satt opp. Fading av lyset på kantene på stedet er også satt her. Til slutt, som modellen er det største elementet som skal lastes inn, vil resten av scenen bli satt opp før denne koden kjøres, derfor kan den gjengitte funksjonen kalles hver ramme.

 light.target.position.Set (0, 0, 0);
  Light.castshadow = sant;
   lys.Shadow = ny tre.Lightshadow (ny tre.perspectivecamera (90, 1, 90, 5000));
  lys.Shadow.bias = 0.0008;
  lys.Shadow.mapsize.width = 1024;
  lys.Shadow.mapsize.Height = 1024;
  Light.penumbra = 1;
  Light.decay = 5;
  gjengi ();
}); 

15. Siste innledende kode

Den endelige delen av init-funksjonen setter ulike mus og berører innganger som vil flytte kameraet basert på deres posisjon. En hendelse er også registrert for å lytte etter om skjermen er endret, og dette vil oppdatere den gjengitte skjermen.

 Document.AddeventListener ('mousemove', ondocumentmousemove, false);
  Document.AddeventListener ('TouchStart', OndocumentTouchStart, False);
  document.addeventlistener ('Touchmove', ondocumenttouchMove, False);
  window.addeventlistener ('resize', onwindowresize, false);
} 

16. Gjengivelse av hver ramme

Render-funksjonen er satt til å bli kalt så nær 60 bilder per sekund som nettleseren kan administrere. Gruppen, som inneholder alle modellene, er satt til å rotere med en liten mengde hver ramme. Kameraets posisjon oppdateres fra musen eller berøringsinngangen, og den fortsetter å se på midten av scenen.

17. Oppdatering av skjermen

Skyggen tiden er en variabel som bare går opp med 0,1 hver ramme, og dette blir sendt inn i Filmpass Slik at det noisey filmkornet kan oppdateres. Effektkomponisten er oppdatert og gjengitt til skjermen. Endelig er Tween-motoren oppdatert også.

 SHACKERTIME + = 0,1;
  filmpass.uniforms ['tid']. Verdi = SHACKERTIME;
  komponist.Render (0.1);
  Tween.Update ();
} 

18. Få brukerinngang

Inngangsområdet glidebryter, lagt til i trinn 1, samtaler showval. funksjon, som er definert her. Når brukeren klikker på dette, kontrollerer det bare at glidebryteren er flyttet. Hvis det er flyttet opp, blir den neste skygruppen oppskalert med en mellom 0,8 sekunder. Vannhøyden er oppdatert, og dette er også tweened opp til den nye høyden.

 Funksjons showval (Val) {
  Hvis (Val! = Lastval) {
  Hvis (Val & GT; Lastval) {
  Ny tween.tween (group.children [val] .scale). til ({x: 1, y: 1, z: 1}, 800)?
  vannht + = 0,07;
  ny tween. mellom (vann.Scale) .To ({y: waterht}, 800) .easing (tween.easing.quadratisk
  

   19. Ta tak i trærne
  
  

   TEMP-variabelen finner den nåværende gruppen av trær det bør eliminere fra scenen, og her skal det bare ned med en tween på Y-aksen. En elastisk lettelse brukes slik at dette springer ut av syn på skjermen for en behagelig effekt. Etter hvert som mer vann og skyer er i scenen, forsvinner trærne.
  
  

   20. motsatt inngang
  
  

   Det første innholdet sjekket om glidebryteren ble glid oppover, eller til høyre. Nå registrerer koden brukeren som glir til venstre. Skyene er nedskalert med en tween, og så er vannstanden for å vise en kjøleeffekt på jorden.
  
  
 Ny tween.tween (group.children [Lastval] .Scale) );
vannht - = 0,07;
ny tween. mellom (vann.Scale) .To ({y: waterht}, 800) .easing (tween.easing.quadratisk
  

   21. Etterbehandling
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   Det siste trinnet er å bringe trærne tilbake, slik at de skaleres tilbake til sin opprinnelige størrelse med en elastisk tween. Lagre scenen og se nettsiden fra en server enten vert lokalt på din egen datamaskin eller på en webserver. Du vil kunne samhandle med musbevegelsen og glidebryteren for å endre scenen.
  
  

   Denne artikkelen opprinnelig dukket opp i
   
   
    
     Webdesigner
    
   
   
    utgave 265. Kjøp det
   
   
    
     her
    
   
   
    .
   
  
  

   Relaterte artikler:
  
  

   

    
     Hvordan kode en forstørret virkelighetsmarkør
    
   
   

    
     20 fantastiske eksempler på webgl i aksjon
    
   
   

    
     9 Brilliant bruk av 3D i webdesign