Maak interactieve 3D-visuals met three.js

Deze WebGL-tutorial demonstreert hoe een 3D-milieu-simulatie te creëren die laat zien wat er met de wereld gebeurt als CO2-niveaus veranderen. (Je kunt meer zien WebGL-experimenten hier.)

De gebruiker bestuurt de niveaus met behulp van een schuifregelaar HTML-invoerbereik. Zoals de gebruiker meer CO2 toevoegt, verschijnt er meer smog in de scène, de waterniveaus zullen stijgen, omdat de temperatuurstijging meer polaire ijskappen smelt, dan zullen bomen verdwijnen terwijl ze worden ondergedompeld in water.

De elementen zijn geanimeerd in en uit met behulp van een tween-bibliotheek en het slepen van de schuifregelaar in de tegenovergestelde richting zal de effecten omkeren. Als het alleen was, was het in het echte leven!

01. Display-elementen

Open de map 'Start' in uw code IDE om het project te starten. Openen index.html En u zult zien dat er daar al een basispagina-scaffold is met enige code. Voeg in het gedeelte Body de display-elementen hier toe die worden gebruikt als de interface naar de 3D-inhoud.

 & LT; DIV ID = "Header" & GT;
  & LT; IMG SRC = "IMG / CO2.PNG" ID = "BADGE" & GT;
  & LT; / DIV & GT;
  & LT; DIV ID = "INNER" & GT;
  & LT; INPUT CLASS = "SLIDE" Type = "Range" min = "0" max = "7" STAP = "1" VALUE = "0" ONINPUT = "Showval (this.value)" & GT;
  & LT; P & GT; Sleep de schuifregelaar om het niveau van CO2 & LT; / P & GT te veranderen;
  & lt; / div & gt; 

02. De bibliotheken koppelen

De 3D-inhoud wordt weergegeven via drie.js, die hier is opgenomen. Een Collada-model wordt later aan de scène toegevoegd. De extra bibliotheek om dit te laden is inbegrepen, samen met een Basic Tween-bibliotheek. De volgende regels koppelen allemaal om de bewerkingseffecten te plaatsen die de finishing-polish zullen toevoegen.

 & 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 / renderingpass.js' & gt; & lt; / script & gt;
& LT; Script SRC = 'JS / Postprocessing / ShaderPass.js' & GT; & LT; / Script & GT;
& lt; script SRC = 'JS / postprocessing / maskass.js' & GT; & LT; / Script & GT; 

03. Postverwerking Shaders

Nadat de scène elk frame heeft gemaakt, worden er een aantal postproces-effecten toegevoegd. Dit zijn de bibliotheken die het filmkorrelseffect vermelden, een kantelverschuiving vervaagt aan de boven- en onderkant van het scherm, dan eindelijk een vignet om aan de randen van het scherm te vervagen.

04. De variabelen toevoegen

Sommige code is voor u voltooid. U ziet een opmerking waar u de rest van de code van de tutorial kunt toevoegen. Een aantal variabelen worden gebruikt in deze 3D-scène, die voor schermresolutie, verschillende 3D-modellen en postverwerking uitzien. Twee belangrijke variabelen zijn de waterht Voor de waterhoogte en de lastval , dat de laatste positie van de schuifregelaar onthoudt.

 Var Screen_Widdh = Window.innerwidth, Screen_Height = window.innerHeight,
 Mousex = 0, muisy = 0, vensterhalfx = venster.innerwedding / 2, vensterhalfy = venster.innerHeight / 2, camera, scène, renderer, water, waterht = 1;
Var Textureloader = nieuwe Three.textureloader ();
Var Composer, Shaderertime = 0, Filmpass, RenderPass, Copypass, Effectvignette, Groep, LastVal = 0; 

05. Initialiseren van de scène

De init-functie is een groot deel van de code, zodat de scène is ingesteld met het juiste blik aan het begin. Een container wordt toegevoegd aan de pagina en dit is waar de 3D-scène wordt weergegeven. Een camera is toegevoegd en wat achtergrondmist om de afstand te vervagen.

 Functie init () {
  var container = document.createeLement ('div');
  document.body.appdchild (container);
  Camera = Nieuwe Three.PerspectiveCamera (75, Screen_Widdh / Screen_Height, 1, 10000);
  camera.position.set (2000, 100, 0);
  scène = nieuwe three.scene ();
  scène.fog = nieuwe drie.fogexp2 (0xb6d9e6, 0,0025);
  renderer = nieuwe three.webglssenderer ({
  Antialias: TRUE
  }); 

06. De renderer instellen

De renderer krijgt een achtergrondkleur en de resolutie is ingesteld op dezelfde grootte als de pixelverhouding van het scherm. Schaduwen zijn in de scène ingeschakeld en het wordt op de pagina in het containerelement geplaatst. Er wordt een halfrondlampje toegevoegd, met een lucht- en grondkleur.

renderer.setclearcolor (0xadc9d4);
renderer.setpixelratio (venster.devicepixelratio);
renderer.setsize (scherm_width, screen_height);
renderer.shadowmap.enabled = true;
renderer.shadowmap.type = three.pcfsoftshadowmap;
container.Antchild (renderer.domelement);
Var Light = NIEUWE DRIE DRIEHEMISPHERLIGHT (0xA1E2F5, 0X6F4D25, 0.5);
scène.ADD (licht); 

07. Shader-variabelen

De variabelen die de troostseffecten van de Shader-postproces bepalen, krijgen hier hun waarden. Deze variabelen worden later gebruikt om waarden toe te voegen die het uiterlijk besturen. Als u in de Params-functie kijkt, ziet u dit al voor u voltooid.

 renderpass = nieuwe drie.Renderpass (scène, camera);
HBLUR = Nieuwe Three.Shaderpass (Three.horizontitalTiltshiftshader);
vblur = nieuwe three.shaderpass (three.verticaltiltshiftshader);
Filmpass = Nieuwe Three.Shaderpass (Three.FilmShader);
Effectvignette = Nieuwe Three.Shaderpass (Three.vignetteShader);
COPYPASS = NIEUWE DRIE DRIE .SHADERPASS (DRIECOPYSHADER); 

08. Samenstellen van de effecten

De effecten moeten worden gestapeld in iets dat een effectencomponist wordt genoemd. Dit neemt elk effect en past de styling toe. Dan wordt het allemaal weergegeven als een laatste scène op het scherm, die u zult zien wanneer de renderfunctie later wordt toegevoegd.

09. De cloudafbeelding laden

De paramets Functie wordt genoemd en dit stelt de individuele parameters in voor de post-effecten. Er wordt een nieuwe groep gecreëerd en dit houdt alle scène-inhoud erin vast, om het gemakkelijk te maken om de groep objecten te draaien. Een transparant PNG-beeld wordt geladen als een cloudmateriaal dat wordt gebruikt als een sprite binnen de scène.

 Params ();
  groep = nieuwe drie.groep ();
  scène.add (groep);
  Var Cloud = Textureloader.load ("IMG / Cloud.png");
  Materiaal = Nieuwe Three.Spritematerial ({
  Kaart: Cloud, Dekking: 0.6, Kleur: 0x888888, Mist: TRUE
}); 

10. Dubbel voor lus

Acht groepen worden in de eerste gemaakt voor lus. Deze acht groepen krijgen allemaal 35 wolken toegevoegd in de tweede voor lus. Elke cloud wordt op een willekeurige locatie boven de scène geplaatst. De groepen worden in- en uitgeschakeld met de schuifregelaar door de gebruiker om de smog te tonen die wordt toegevoegd en in de visualisatie worden verwijderd.

 voor (J = 0; J & LT; 8; J ++) {
  var g = nieuwe drie.groep ();
  voor (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 = Nieuwe Three.Sprite (Materiaal);
  Sprite.position.set (x, y, z); 

11. Schalen van de cloud

De cloud wordt verkleind tot een maat waarmee het zichtbaar is in de scène. Elke groep wolken nadat de eerste groep wordt geschaald, zodat ze vrijwel onzichtbaar zijn voor de renderer. Dit is hoe ze later zichtbaar worden gemaakt door ze terug te schalen tot hun volledige grootte, omdat dit een goed tweening-effect geeft.

12. Het model laden

Nu is de Collada-loader ingesteld om de scène.dae model. Wanneer het is voltooid, wordt het model gescand en elk object dat toevallig een gaas is, is gemaakt om schaduwen te werpen en schaduwen te ontvangen om wat extra diepte te geven aan de scène.

 Var loader = nieuwe drie.colladaloader ();
loader.options.convertupaxis = true;
loader.load ('scène.dae', functie (Collada) {
  var daE = collada.scene;
  dae.traverse (functie (kind) {
  Als (kindextiviteit van drie.mesh) {
  kind.castshadow = true;
  kind.receiveshadow = true;
  ​
}); 

13. Bijzonderheden vinden in de scène

Naarmate het model nu klaar is voor het weergeven, is het ingesteld op de juiste maat om in de scène te passen. De code moet specifiek de hoogte van het water bedienen, zodat het watermodel in de scène wordt gevonden en doorgegeven in de globale variabele. Evenzo moet het hoofdlicht worden gevonden, zodat het kan worden ingesteld op projectschaduwen.

 DAE.SCALE.X = DAE.SCALE.Y = DAE.SCALE.Z = 0.5;
dae.updateMatrix ();
groep.add (DAE);
water = scène.getObByname ("water", waar);
water = water. Children 
;
Licht = scène.getObjectByName ("Spoorts", TRUE);
licht = licht.children 
; 

14. Lichtinstellingen

Nu, zoals de schijnwerpers wordt gevonden, zijn de details die het in de scène in de scène in de scène in de scène zijn gegoten. De vervaging van het licht aan de randen van de plek is ook ingesteld. Ten slotte, omdat het model het grootste element is om in te laden, wordt de rest van de scène ingesteld voordat deze code wordt uitgevoerd, daarom kan de renderfunctie elk frame worden genoemd.

 licht.target.position.set (0, 0, 0);
  licht.castshadow = true;
   licht.Shadow = nieuwe drie.Lightshadow (NIEUWE DRIE DRIE PERSPECTIVECAMERA (90, 1, 90, 5000));
  licht.Shadow.bias = 0,0008;
  licht.Shadow.mapsize.width = 1024;
  licht.Shadow.mapsize.Height = 1024;
  licht.penumbra = 1;
  licht.decay = 5;
  render ();
}); 

15. Laatste initialisatiecode

Het laatste deel van de init-functie stelt verschillende muis in en touchingangen die de camera op basis van hun positie zullen verplaatsen. Er is ook een evenement geregistreerd om te luisteren als het scherm is verkleind en dit zal het weergegeven display bijwerken.

 DOCUMENT.ADDEVENTLISTENER ('MOUSEEMOVE', ONDOCUMENTMOUSEEMOVE, FALSE);
  Document.AddEventListener ('Touchstart', OndocumentTouchstart, False);
  Document.AddeventListener ('Touchmove', OndocumentTouchmove, False);
  venster.AddeventListener ('grootte', onwindowsize, false);
} 

16. Elk frame weergeven

De renderfunctie is ingesteld als dicht bij 60 frames per seconde als de browser kan beheren. De groep, die alle modellen bevat, is ingesteld om te roteren met een klein bedrag per frame. De positie van de camera wordt bijgewerkt van de muis of tik ingang en het blijft naar het midden van de scène kijken.

17. Het display bijwerken

De Shader Time is een variabele die gewoon oploopt met 0,1 per frame en dit wordt doorgegeven in de filmpass zodat de lawaaierige filmkorrel kan worden bijgewerkt. De effectencomponist wordt bijgewerkt en weergegeven op het scherm. Eindelijk wordt de tween-engine ook bijgewerkt.

 Shaderertime + = 0.1;
  Filmpass.uniforms ['Tijd']. Waarde = Shaderertime;
  Composer.Render (0.1);
  Tween.update ();
} 

18. Gebruikersinvoer krijgen

De schuifregelaar van het ingangsbereik, toegevoegd in stap 1, roept de showval functie, die hier wordt gedefinieerd. Wanneer de gebruiker hierop klikt, controleert het gewoon dat de schuifregelaar is verplaatst. Als het wordt verhuisd, wordt de volgende cloudgroep opgeschaald met een tween gedurende 0,8 seconden. De waterhoogte is bijgewerkt en dit is ook afgesloten tot de nieuwe hoogte.

 Functie Showval (Val) {
  if (val! = lastval) {
  if (val & gt; lastval) {
  Nieuwe Tween.Tween (Group.Children [VAL] .Scale). To ({x: 1, y: 1, z: 1}, 800). Lezing (tween.masing.quadratic.inout) .start ();
  waterht + = 0,07;
  Nieuwe Tween.Tween (Water.Scale) .To ({Y: Waterht}, 800). Lezing (Tween.Mate.Quadratic.inout) .start (); 

19. Grijp de bomen

De Temp-variabele vindt de huidige groep bomen die het van de scène mag elimineren en hier kan het ze schalen met slechts een tween op de y-as. Een elastische versoepeling wordt gebruikt, zodat deze bronnen uit het zicht op het scherm voor een aangenaam effect is. Naarmate meer water en wolken in de scène zijn, verdwijnen de bomen.

20. tegenovergestelde invoer

De eerste inhoud controleerde of de schuifregelaar naar boven is geschoven, of naar rechts. Nu detecteert de code de gebruiker die naar links schuift. De wolken worden geschaald met een tween en zo is het waterniveau om een ​​koeleffect op de aarde te tonen.

 Nieuwe Tween.Tween (Groep.Children [Lastval] .scale). To ({x: 0,001, Y: 0,001, Z: 0,001}, 800). Lezing (tween.easing.quadratic.inout) .start ( );
waterht - = 0,07;
Nieuwe Tween.Tween (Water.Scale) .To ({Y: Waterht}, 800). Lezing (Tween.Mate.Quadratic.inout) .start (); 

21. Afwerking

De laatste stap is om de bomen terug te brengen, dus ze worden teruggeschalft naar hun oorspronkelijke grootte met een elastische tween. Sla de scène op en bekijk de webpagina vanaf een server die lokaal op uw eigen computer of op een webserver wordt gehost. U kunt in staat zijn om te communiceren met muisbeweging en de schuifregelaar om het scène-display te wijzigen.

Dit artikel verscheen oorspronkelijk in Webdesigner uitgave 265. Koop het hier ​

Gerelateerde artikelen:

• Hoe een augmented reality marker code te coderen
• 20 Verbazingwekkende voorbeelden van WebGL in actie
• 9 briljant gebruik van 3D in webdesign