Skapa interaktiva 3D-bilder med tre.js

Denna WebGL-handledning visar hur man skapar en 3D-miljösimulering som visar vad som händer med världen som CO2-nivåer ändras. (Du kan se mer WebGL-experiment här.)

Användaren styr nivån med ett HTML-ingångsreglage. Eftersom användaren lägger till mer CO2, kommer mer smog att visas i scenen, vattennivån kommer att stiga när temperaturökningen smälter mer polära islock, då kommer träd att försvinna när de blir nedsänkt i vatten.

Elementen är animerade in och ut med ett Tween-bibliotek och dra glidaren i motsatt riktning kommer att vända effekterna. Om det bara var så lätt i det verkliga livet!

01. Visa element

För att starta projektet, öppna "Start" -mappen i din kod IDE. Öppna index.html Och du kommer att se att det finns en grundläggande sidläggningsställ där med någon kod redan. I kroppsdelen lägger du in visningselementen här som kommer att användas som gränssnitt till 3D-innehållet.

 & lt; div id = "header" & gt;
  & lt; img src = "img / co2.png" id = "emblem" & gt;
  & lt; / div & gt;
  & lt; div id = "inre" & gt;
  & LT; Ingångsklass = "Slide" Typ = "Range" min = "0" Max = "7" Steg = "1" VALUE = "0" ONInput = "Showval (This.Value)" & GT;
  & lt; P & GT; Dra glider för att ändra nivån på CO2 & LT; / P & GT;
  & lt; / div & gt; 

02. Länkar upp biblioteken

3D-innehållet visas via tre.js, som ingår här. En Collada-modell kommer att läggas till scenen senare. Det extra biblioteket som laddas så ingår, tillsammans med ett grundläggande tween-bibliotek. Nästa rader länkar alla upp till efterbehandlingseffekter som kommer att lägga till efterbehandlingspolen.

 & lt; script src = "js / three.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 / effectcomposer.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. Postbehandling Shaders

Efter att scenen har gjort varje ram kommer ett antal efterbehandlingseffekter att läggas till. Det här är de bibliotek som bemyndigar filmkornseffekten, en lutningsskiftslur på toppen och botten av skärmen, än äntligen en vignett för att blekna ut till skärmens kanter.

04. Lägga till variablerna

En del av koden har slutförts för dig. Du kommer att se en kommentar där du vill lägga till resten av handledningens kod. Ett antal variabler används i denna 3D-scen, som ser efter skärmupplösning, olika 3D-modeller och efterbehandling. Två viktiga variabler är vattenht för vattenhöjden och lastval , som kommer ihåg den sista läget för skjutreglaget.

 var screen_width = window.innerwidth, screen_height = window.innerheight,
 mouseex = 0, mousey = 0, windowhalfx = window.innerwidth / 2, windowhalfy = window.innerheight / 2, kamera, scen, renderare, vatten, vattenht = 1;
Var TextureLoader = Ny tre.textureloader ();
Var Kompositör, ShaderTime = 0, Filmpass, Renderpass, CopyPass, EffectVignette, Group, LastVal = 0; 

05. Initialiserar scenen

Init-funktionen är en stor del av koden och säkerställer att scenen är inställd med rätt utseende i början. En behållare läggs till på sidan, och det är där 3D-scenen kommer att visas. En kamera läggs till och någon bakgrund dimma för att blekna ut avståndet.

 Funktion init () {
  var container = document.createelement ('div');
  document.body.appendchild (container);
  Kamera = Ny tre.PerspectiveCamera (75, Screen_Width / Screen_Height, 1, 10000);
  kamera.position.Set (2000, 100, 0);
  scen = ny tre.scene ();
  scen.fog = ny tre.fogexp2 (0xb6d9e6, 0,0025);
  renderer = ny tre.webglrenderer ({
  Antialkias: sant
  }); 

06. Ställa in renderaren

Renderer ges en bakgrundsfärg och upplösningen är inställd på samma storlek som pixelförhållandet på skärmen. Skuggor är aktiverade i scenen, och den är placerad på sidan i behållarelementet. Ett halvklotsljus läggs till, som har en himmel och markfärg.

renders.setclearcolor (0xadc9d4);
renderer.setpixelratio (window.devicepixelratio);
renderer.setsize (Screen_Width, Screen_Height);
renders.shadowmap.enabled = true;
renderer.shadowmap.type = tre.pcfsoftshadowmap;
container.appendchild (renderer.domelement);
Var lätt = ny tre.hemisfärell (0xa1e2f5, 0x6f4d25, 0,5);
scene.add (ljus); 

07. Shader Variables

De variabler som kommer att styra shader efter processeffekter ges sina värden här. Dessa variabler kommer att användas senare för att lägga till värden som kommer att styra utseendet. Om du tittar i den params-funktionen ser du det här redan färdigt för dig.

 renderpass = ny tre.Renderpass (scen, kamera);
hblur = ny tre.shaderpass (tre.horizontaltilshiftshader);
vblur = New Three.ShaderPass (Three.VerticalTiltShiftShader);
Filmpass = New Three.ShaderPass (Three.Filmshader);
EffectVignette = New Three.ShaderPass (Three.Vignetteshader);
Copypass = New Three.ShaderPass (tre.copyshader); 

08. Komponera effekterna

Effekterna måste staplas upp i något som kallas en effektkompositör. Detta tar varje effekt och tillämpar styling till den. Då visas det som en sista scen på skärmen, som du ser när renderfunktionen läggs till senare.

09. Laddar molnbilden

De parametrar Funktionen heter och detta sätter de enskilda parametrarna för posteffekterna. En ny grupp skapas och detta kommer att hålla hela sceninnehållet i det, för att göra det enkelt att rotera gruppen av objekt. En genomskinlig PNG-bild är laddad som ett molnmaterial som ska användas som en sprite inom scenen.

 Paramals ();
  grupp = ny tre.grupp ();
  scene.add (grupp);
  Var cloud = TextureLoader.Load ("IMG / cloud.png");
  material = ny tre.Spritematerial ({
  Karta: Moln, opacitet: 0,6, färg: 0x888888, dimma: sant
}); 

10. Dubbel för loop

Åtta grupper skapas inuti den första för slinga. Dessa åtta grupper får alla 35 moln till dem i den andra för loop. Varje moln är placerat i ett slumpmässigt läge ovanför scenen. Grupperna slås på och av med reglaget av användaren för att visa att smog läggs till och tas bort i visualiseringen.

 för (J = 0; J & LT; 8; J ++) {
  var g = ny tre.group ();
  för (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 = Ny tre.Sprite (material);
  Sprite.Position.Set (x, y, z); 

11. Skalning av molnet

Molnet är uppskalat upp till en storlek som gör det möjligt att vara synlig i scenen. Varje grupp av moln efter den första gruppen är nedskalad så att de är nästan osynliga för renderaren. Så här kommer de att bli synliga senare genom att skala dem tillbaka till sin fulla storlek, eftersom det kommer att ge en bra tweening-effekt.

12. Laddar modellen

Nu är Collada Loader inställd att ladda scen.Dae modell. När det slutar laddas, skannas modellen och något objekt som råkar vara ett nät är gjord för att kasta skuggor och ta emot skuggor för att ge lite djupgående djup till scenen.

 var lastare = ny tre.colladaloader ();
loader.options.convertuptaxis = true;
loader.Load ('scen.dae', funktion (Collada) {
  Var dae = collada.Scene;
  dae.traverse (funktion (barn) {
  om (barn instansof tre.mesh) {
  barn.castshadow = sant;
  barn.Receiveshadow = sant;
  }
}); 

13. Hitta specifika detaljer i scenen

Eftersom modellen är klar för visning är den inställd på rätt storlek för att passa scenen. Koden behöver specifikt styra höjden på vattnet så att vattenmodellen finns i scenen och passerade in i den globala variabeln. På samma sätt måste huvudljuset hittas så att det kan ställas in på projektskuggor.

 dae.scale.x = dae.scale.y = dae.scale.z = 0,5;
dae.updateMatrix ();
grupp.add (dae);
vatten = scen.getObjectbyname ("vatten", sant);
vatten = vatten. Barn 
;
ljus = scen.getObjectbyname ("Splight", sant);
ljus = ljus. Barn 
; 

14. Ljusinställningar

Nu när strålkastaren hittas de specifika som gör det gjorda skuggor i scenen är inställda. Ljusets blekning vid kanterna på platsen är också inställd här. Slutligen, som modellen är det största elementet att ladda in, kommer resten av scenen att ställas in innan den här koden körs, därför kan renderfunktionen kallas varje ram.

 light.target.position.set (0, 0, 0);
  light.castshadow = sant;
   light.shadow = ny tre.lightshadow (New Three.PerspectiveCamera (90, 1, 90, 5000));
  light.shadow.bias = 0.0008;
  light.shadow.mapsize.width = 1024;
  light.shadow.mapsize.height = 1024;
  light.penumbra = 1;
  ljus.decay = 5;
  framställa();
}); 

15. Senaste initialiseringskoden

Den sista delen av INIT-funktionen ställer in olika mus och trycker på ingångar som flyttar kameran baserat på deras position. En händelse är också registrerad för att lyssna på om skärmen är ändrad och det uppdateras den gjorda displayen.

 dokument.Addeventlistener ('Musmove', ondocumentmousemove, false);
  dokument.Addeventlistener ('Touchstart', ondocumentTouchstart, false);
  document.addeventlistener ('touchmove', ondocumentTouchmove, false);
  Window.Addeventlistener ('Ändra storlek', OnWindowresisize, False);
} 

16. Rendering varje ram

Renderfunktionen är inställd att kallas så nära 60 bilder per sekund när webbläsaren kan hantera. Gruppen, som innehåller alla modeller, är inställd att rotera med en liten mängd varje ram. Kamerans position är uppdaterad från musen eller touch-ingången och fortsätter att titta på mitten av scenen.

17. Uppdatering av displayen

Shader-tiden är en variabel som bara går upp med 0,1 varje ram och detta passeras in i filmpass så att den noisey filmkornet kan uppdateras. Effekternas kompositör är uppdaterad och gjord till skärmen. Slutligen uppdateras Tween-motorn också.

 ShaderTime + = 0,1;
  Filmpass.Uniforms ['Time']. Värde = ShaderTime;
  kompositör.Render (0,1);
  Tween.update ();
} 

18. Få användarinmatning

Inmatningsintervallet, tillagt i steg 1, kallar skylig funktion, som definieras här. När användaren klickar på det här kontrollerar det bara att skjutreglaget har flyttats. Om det flyttas upp, skalas nästa molngrupp med en tween över 0,8 sekunder. Vattenhöjden uppdateras och detta är också tweened upp till den nya höjden.

 Funktion Showval (Val) {
  Om (Val! = Lastval) {
  om (val & gt; lastval) {
  New Tween.Tween (Group.Children [Val] .Scale) .to ({x: 1, y: 1, z: 1}, 800) .Elösning (tween.easing.quadratic.inout) .Start ();
  Vattenht + = 0,07;
  New Tween.Tween (Water.Scale) .To ({Y: Waterht}, 800) .Elösning (tween.easing.quadratic.inout) .Start (); 

19. Ta tag i träden

Temp-variabeln finner den nuvarande gruppen av träd det bör eliminera från scenen och här skalar det ner med en tween på Y-axeln. En elastisk lättnad används så att denna fjädrar ut ur sikte på skärmen för en behaglig effekt. När mer vatten och moln är i scenen försvinner träden.

20. Motsatt inmatning

Det första innehållet kontrolleras om skjutreglaget glidde uppåt, eller till höger. Nu upptäcker koden användaren glider till vänster. Molnen är nedskalad med en tween och så är vattennivån för att visa en kylningseffekt på jorden.

 New Tween.Tween (Group.Children [Lastval] .Scale) .to ({x: 0.001, y: 0.001, z: 0.001}, 800). );
Waterht - = 0,07;
New Tween.Tween (Water.Scale) .To ({Y: Waterht}, 800) .Elösning (tween.easing.quadratic.inout) .Start (); 

21. Avsluta upp

Det sista steget är att ta tillbaka träden, så de är skalade tillbaka till sin ursprungliga storlek med en elastisk tween. Spara scenen och visa webbsidan från en server antingen värd lokalt på din egen dator eller på en webbserver. Du kommer att kunna interagera med musrörelsen och skjutreglaget för att ändra scenskärmen.

Denna artikel uppträdde ursprungligen i Webbdesigner Utgåva 265. Köp det här .

Relaterade artiklar:

• Hur man kodar en förstärkt verklighetsmarkör
• 20 fantastiska exempel på webgl i aktion
• 9 Brilliant Användning av 3D i webbdesign