Luo vuorovaikutteisia 3D-visuaaleja kolmella.js

Tämä WebGL-opetusohjelma osoittaa, miten luodaan 3D-ympäristö simulointi, joka osoittaa, mitä tapahtuu maailmalle, koska hiilidioksidipitoisuus muuttuu. (Näet lisää WebGL-kokeilut tässä.)

Käyttäjä ohjaa tasot HTML-tuloliitännän liukusäätimen avulla. Koska käyttäjä lisää enemmän hiilidioksidia, näyttämössä näkyvät enemmän smog, vesipitoisuus nousee, kun lämpötilan nousu sulaa enemmän polaarisia jääpeittejä, sitten puut häviävät, kun ne upotetaan veteen.

Elementit ovat animoituja sisään ja ulos käyttämällä Tween-kirjastoa ja vetämällä liukusäädintä vastakkaiseen suuntaan päinvastoin. Jos vain se oli niin helppoa todellisessa elämässä!

01. Näytä elementit

Aloita projekti avaamalla koodi IDE: n "START" -kansio. Avata index.html Ja näet, että siellä on jo jonkin verran koodi. Lisää kehon osiossa näyttöelementit, joita käytetään liitäntä 3D-sisältöön.

 & lt; div id = "otsikko" & gt;
  & lt; img src = "img / co2.png" id = "badge" & gt;
  & lt; / div & gt;
  & lt; div id = "sisäinen" & gt;
  & lt; input class = "slide" tyyppi = "alue" min = "0" max = "7" step = "1" arvo = "0" Oninput = "showval (this.value)" & gt;
  & lt; p & gt; Vedä liukusäädintä vaihtaaksesi hiilidioksidin ja lt; / p & gt;
  & lt; / div & gt; 

02. Kirjastojen yhdistäminen

3D-sisältöä näytetään three.js, joka sisältyy tähän. Kollda-malli lisätään myöhemmin paikalle. Ylimääräinen kirjasto ladata tämä on mukana sekä peruskirjasto. Seuraavat rivit kaikki linkittävät jälkikäsittelyvaikutukset, jotka lisäävät viimeistelyn.

 & lt; script src = "js / three.min.js" & gt; & lt; / script & gt;
& lt; script src = "js / cOLLADALoader.js" & gt; & lt; / script & gt;
& lt; skripti src = "js / tween.min.js" & gt; & lt; / script & gt;
& lt; Script SRC = 'JS / PostProcessing / EffectComposer.js' & GT; & lt; / script & gt;
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. Post Prociding Shaders

Kun kohtaus on tehnyt jokaisen kehyksen, lisätään useita jälkikäsittelyvaikutuksia. Nämä ovat kirjastoja, jotka vahvistavat kalvonjyvän vaikutuksen, kallistusvaihtohäiriö näytön ylä- ja alaosassa, lopulta vigetti häivyttää näytön reunoja.

04. Muuttujien lisääminen

Jotkut koodista on valmis sinulle. Näet kommentin, johon lisätään loput opetusohjelman koodin. Tässä 3D-näytössä käytetään useita muuttujia, jotka huolehtivat näytön tarkkuudesta, erilaisista 3D-malleista ja jälkikäsittelystä. Kaksi tärkeää muuttujaa ovat vesistö vedenkorkeudesta ja viimeinen , joka muistaa liukusäätimen viimeisen sijainnin.

 var screen_width = window.innerwidth, screen_height = window.innerheight,
 Mousex = 0, Mousey = 0, Windowhalfx = Window.innerWidth / 2, WindowHalfy = Window.innerHeight / 2, kamera, kohtaus, renderöinti, vesi, vesijohto = 1;
var Textureloader = uusi kolme.textureloader ();
Var Composer, ShaderTime = 0, Filmpass, RenderPass, CopyPassi, ForfyVignette, Ryhmä, LastVal = 0; 

05. Alustuksen kohtaus

Init-toiminto on suuri osa koodista, varmistaen, että kohtaus on perustettu oikealla tarkastuvalla alusta. Säiliö lisätään sivulle, ja tämä on silloin, kun 3D-kohtaus tulee näkyviin. Kamera lisätään ja jotkin tausta-sumua häivyttää etäisyyden.

 Toiminto init () {
  var Container = document.createelement ('div');
  document.body.oppendchild (kontti);
  Kamera = uusi kolme.PerversiveCamera (75, Screen_Width / Screen_height, 1, 10000);
  kamera.position.set (2000, 100, 0);
  Scene = uusi kolme.Scene ();
  scene.fog = uusi kolme.fogexp2 (0xB6d9e6, 0,0025);
  renderer = uusi kolme.webglrenderer ({
  Antialias: totta
  }); 

06. Renderin asettaminen

Renderer annetaan taustaväri ja resoluutio on sama koko kuin näytön pikselisuhde. Shadows on käytössä paikalla, ja se on sijoitettu pakkauselementtiin sivulle. Pafisphere-valo lisätään, jolla on taivas ja maadoitus.

renderer.setclearcolor (0xadc9d4);
renderer.setpixelratio (window.devicepixelratio);
Renderer.Setsaze (Screen_Width, Screen_height);
renderer.shadowMap.Enabled = tosi;
renderer.shadowmap.type = three.pcfsoftShadowMap;
kontti.Appendchild (Renderer.Domelement);
var light = uusi kolme.hemispherelight (0xa1e2f5, 0x6f4d25, 0.5);
Scene.Add (valo); 

07. Shader muuttujat

Muuttujat, jotka ohjaavat Shader Post prosessivaikutuksia, annetaan niiden arvot täältä. Näitä muuttujia käytetään myöhemmin lisäämällä arvoja, jotka hallitsevat ulkoasua. Jos katsot params-toiminnon, näet tämän jo valmiiksi sinulle.

 RENDERPASS = uusi kolme.Renderpass (kohtaus, kamera);
hblur = uusi kolme.Shaderpass (three.HorizontaltiltiltshiftShader);
vblur = uusi kolme.Shaderpass (three.verticaltiltshiftshader);
Filmpass = uusi kolme.ShaderPass (three.filmshader);
forfecvignetti = uusi kolme.Shaderpass (Three.Vigntteshader);
COPYPASS = uusi kolme.Shaderpass (three.copyshader); 

08. Vaikutusten säveltäminen

Vaikutukset on pinottava jotain, jota kutsutaan vaikutukseksi säveltäjiksi. Tämä kestää jokaisen vaikutuksen ja soveltaa muotoilua siihen. Sitten kaikki näytetään lopullisena kohtauksena näytöllä, jonka näet, kun render-toimintoa lisätään myöhemmin.

09. Cloud-kuvan lataaminen

The paramps Toimintoa kutsutaan ja tämä asettaa yksittäiset parametrit post-tehosteille. Uusi ryhmä luodaan ja tämä pitää koko sivusisällön, jotta esineiden ryhmä pyörii. Läpinäkyvä PNG-kuva ladataan pilvimateriaaliksi, jota käytetään spriteinä kohtauksen sisällä.

 params ();
  Ryhmä = uusi kolme.group ();
  Scene.Add (ryhmä);
  var cloud = Textureloader.load ("img / cloud.png");
  materiaali = uusi kolme.spriteematerial ({
  Kartta: pilvi, opasiteetti: 0.6, väri: 0x888888, sumu: totta
}); 

10. Double loop

Ensimmäisen ryhmän luodaan kahdeksan ryhmää varten silmukka. Nämä kahdeksan ryhmää kaikki saavat 35 pilviä, jotka ovat lisänneet niihin toisessa silmukassa. Jokainen pilvi sijoitetaan satunnaiseen paikkaan kohtauksen yläpuolella. Ryhmät kytkeytyvät päälle ja pois päältä käyttäjän liukusäädintä näyttämään SMOG lisätä ja poistetaan visualisoinnissa.

 (J = 0, J & Lt; 8, J ++) {
  var g = uusi kolme.group ();
  (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 = uusi kolme.sprite (materiaali);
  sprite.position.set (x, y, z); 

11. pilven skaalaaminen

Pilvi skaalataan koon mukaan, jonka avulla se voi näkyä paikalla. Jokainen pilvien ryhmä ensimmäisen ryhmän jälkeen skaalataan niin, että ne ovat käytännöllisesti katsoen näkymättömiä renderöörille. Näin ne tulevat näkyviin myöhemmin skaalaamalla heidät takaisin täysikokoonsa, koska tämä antaa hyvän Tweening-vaikutuksen.

12. Mallin lataaminen

Nyt COLLADA-kuormain asetetaan lataamaan Scene.dae malli. Kun se viimeistelee lataamisen, malli skannataan ja kaikki esineet, jotka saattavat olla verkko, on valmistettu varjoille ja vastaanottaa varjoja, jotta saat ylimääräistä syvyyttä kohtaukseen.

 var Loader = uusi kolme.colladaloader ();
loader.options.convertupaxis = tosi;
Loader.load ('scene.dae', toiminto (compada) {
  var dae = compada.scene;
  dae.traverse (funktio (lapsi) {
  Jos (lapsi esimerkki kolme.mesh) {
  child.castShadow = tosi;
  child.recomesHadow = tosi;
  }
}); 

13. Tarkemmat yksityiskohdat

Koska malli on nyt valmis näyttämään, se asetetaan oikeaan kokoon sopivaksi. Koodin on säädettävä erityisesti veden korkeutta, jotta vesimalli löytyy kohtauksesta ja siirretään maailmanlaajuiseen muuttujaan. Samoin tärkein valo on löydettävä niin, että se voidaan asettaa projektin varjoiksi.

 dae.scale.x = dae.scale.y = dae.scale.z = 0,5;
dae.updateematrix ();
Ryhmä.Add (DAE);
vesi = kohtaus.getObjectbynimi ("vesi", totta);
vesi = vesi. Lildit 
;
Light = scene.getObjectbynimi ("SPLIGHT", TOSI);
Light = Light.Fildren 
; 

14. Valoasetukset

Nyt, kun valokeilaa löytyy erityispiirteitä, jotka tekevät siitä valettu varjot kohtaukseen. Valon häipyminen paikan reunoissa on myös asetettu. Lopuksi, kun malli on suurin elementti, joka lataa, loput kohtaus asetetaan ennen kuin tämä koodi suoritetaan, joten renderfunktiota voidaan kutsua kutakin kehystä.

 Light.Target.Position.set (0, 0, 0);
  light.casthadow = tosi;
   Light.Shadow = uusi kolme.lightShadow (uusi kolme.perspectiveCamera (90, 1, 90, 5000));
  light.shadow.bias = 0,0008;
  Light.Shadow.Mapsze.Width = 1024;
  light.Shadow.Mapsze.height = 1024;
  Light.Penumbra = 1;
  Light.decay = 5;
  render ();
}); 

15. Viimeinen alustuskoodi

Init-toiminnon lopullinen osa asettaa eri hiiren ja kosketustulot, jotka liikuttavat kameran sijainnin perusteella. Tapahtuma on myös rekisteröity kuunnella, jos näyttö on muokattu ja tämä päivittää renderoidun näytön.

 Asiakirja.AddeventListener ("Mousemove", OndocumentMousMove, False);
  document.addeventListener ('Touchstart', OndocumentTouchStart, False);
  document.addeventListener ('TouchMove', OndocumentTouchmove, False);
  window.addeventlistener ("Muuta", Onwindowresize, False);
} 

16. Jokaisen kehyksen tekeminen

Render-toiminto on asetettu nimiksi lähes 60 kuvaa sekunnissa, kun selain voi hallita. Ryhmä, joka sisältää kaikki mallit, asetetaan pyörittämään pienellä määrällä kukin kehys. Kameran sijainti päivitetään hiirestä tai kosketustulosta ja se katsoo edelleen kohtauksen keskustaan.

17. Näytön päivittäminen

Shader-aika on muuttuja, joka vain nousee 0,1 kullakin kehyksellä ja tämä siirretään kalvopass Joten meluinen kalvoraja voidaan päivittää. Vaikutuksen säveltäjä päivitetään ja renderoidaan näytölle. Lopuksi Tween-moottori päivitetään myös.

 ShagerTime + = 0,1;
  filpass.Uniforms ['aika']. Value = ShaderTIME;
  säveltäjä.Render (0,1);
  Tween.Update ();
} 

18. Käyttäjän syöttö

Syöttöalue liukusäädin, joka lisätään vaiheeseen 1, kutsuu showval Täällä määriteltyy toiminto. Kun käyttäjä napsauttaa tätä, se vain tarkistaa, että liukusäädin on siirretty. Jos se on siirretty ylös, seuraava pilvi-ryhmä skaalataan yli 0,8 sekunnin ajan. Vedenkorkeus päivitetään ja tämä on myös uuteen korkeuteen.

 Toiminto Showval (Val) {
  jos (Val! = Lastval) {
  jos (Val & gt; lastval) {
  Uusi Tween.tween (ryhmä) .scale) .To ({X: 1, Y: 1, Z: 1}, 800). Singing (Tween.ecast.quadratic.inout) .Start ();
  Waterht + = 0,07;
  Uusi Tween.tween (Water.Scale) .to ({Y: Waterht}, 800). Singing (Tween.ecast.quadratic.inout) .Start (); 

19. Tartu puihin

TEMP-muuttuja löytää nykyisen puiden ryhmän, jonka pitäisi poistaa kohtaus ja täällä se laskee ne vain Y-akselin Tweenilla. Elastinen helpointia käytetään niin, että tämä jouset näkyviin näytöllä miellyttävään vaikutukseen. Kun enemmän vettä ja pilviä on paikalla, puut katoavat.

20. Vastakkainen syöttö

Ensimmäinen sisältö tarkistetaan, onko liukusäädin liukui ylöspäin tai oikealle. Nyt koodi havaitsee vasemmalle liukuvan käyttäjän. Pilvet skaalataan alas Tween ja niin on vesitaso osoittaa jäähdytysvaikutus maan päällä.

 Uusi Tween.tween (ryhmä. );
waterht - = 0,07;
Uusi Tween.tween (Water.Scale) .to ({Y: Waterht}, 800). Singing (Tween.ecast.quadratic.inout) .Start (); 

21. Viimeistely

Lopullinen askel on tuoda puita takaisin, joten ne skaalataan takaisin alkuperäiseen kokoonsa elastisella Tweenilla. Tallenna kohtaus ja katsele Web-sivua palvelimelta joko paikallisesti omalla tietokoneellasi tai verkkopalvelimella. Voit olla vuorovaikutuksessa hiiren liikkeen ja liukusäätimen muuttamiseksi kohtauksen näytön muuttamiseksi.

Tämä artikkeli oli alun perin ilmestynyt Nettisivujen suunnittelija Julkaisu 265. Osta se tässä .

Aiheeseen liittyvät artikkelit:

• Kuinka koodata lisätty todellisuusmerkki
• 20 hämmästyttävää esimerkkejä webglistä toiminnassa
• 9 loistava käyttö 3D: n web-suunnittelussa