Innhold
- 01. Visningselementer
- 02. Kobling av bibliotekene
- 03. Etterbehandling av skyggeleggere
- 04. Legge til variablene
- 05. Initialisere scenen
- 06. Stille inn gjengiveren
- 07. Shader-variabler
- 08. Å komponere effektene
- 09. Laster inn skybildet
- 10. Dobbelt for løkke
- 11. Skalering av skyen
- 12. Laster inn modellen
- 13. Finne detaljer i scenen
- 14. Lysinnstillinger
- 15. Siste initialiseringskode
- 16. Gjengivelse av hver ramme
- 17. Oppdatere skjermen
- 18. Få brukerinngang
- 19. Å ta tak i trærne
- 20. Motsatt innspill
- 21. Etterbehandling
Denne WebGL-veiledningen demonstrerer hvordan du lager en 3D-miljøsimulering som viser hva som skjer med verden når CO2-nivåene endres. (Du kan se flere WebGL-eksperimenter her, og lagre inspirasjonen din i skylagring.)
Brukeren kontrollerer nivåene ved hjelp av en glidebryter for HTML-inngangsområde. Etter hvert som brukeren tilfører mer CO2, vil mer smog dukke opp på scenen, vannnivået vil stige når temperaturøkningen smelter mer iskapper, så vil trær forsvinne når de blir nedsenket i vann.
Elementene animeres inn og ut ved hjelp av et tween-bibliotek, og ved å dra glidebryteren i motsatt retning vil effekten reversere. Hvis det bare var så enkelt i det virkelige liv!
Trenger du et nytt nettsted for å være vert for grafikken din? Velg den perfekte nettstedbyggeren, og en topp webhotelltjeneste.
01. Visningselementer
For å starte prosjektet, åpne 'start' -mappen i IDE-koden. Åpne opp index.html og du vil se at det er et grunnleggende side stillas der med litt kode allerede. I hoveddelen legger du til skjermelementene her som skal brukes som grensesnitt for 3D-innholdet.
div id = "header"> img src = "img / co2.png" id = "badge"> / div> div id = "inner"> input type = "range" min = "0" max = "7" step = "1" value = "0" oninput = "showVal (this.value)"> p> DRAG skyveknappen for å endre nivået på CO2 / p> / div>
02. Kobling av bibliotekene
3D-innholdet vises gjennom three.js, som er inkludert her. En Collada-modell vil bli lagt til på scenen senere. Det ekstra biblioteket for å laste dette er inkludert, sammen med et grunnleggende tween-bibliotek. De neste linjene kobles alle sammen til etterbehandlingseffekter som vil legge til etterbehandlingen.
script src = "js / three.min.js"> / script> script src = "js / ColladaLoader.js"> / script> script src = "js / tween.min.js"> / script> script src = ' js / postprocessing / EffectComposer.js '> / script> script src =' js / postprocessing / RenderPass.js '> / script> script src =' js / postprocessing / ShaderPass.js '> / script> script src =' js / postprocessing / MaskPass.js '> / script>
03. Etterbehandling av skyggeleggere
Etter at scenen har gjengitt hver ramme, vil det legges til et antall effekter etter prosessen. Dette er bibliotekene som gir filmkorneffekten, en tilt-skift uskarphet øverst og nederst på skjermen, og til slutt en vignett som falmer ut til kantene på skjermen.
04. Legge til variablene
Noe av koden er fullført for deg. Du vil se en kommentar hvor du skal legge til resten av opplæringens kode. En rekke variabler brukes i denne 3D-scenen, som passer på skjermoppløsningen, forskjellige 3D-modeller og etterbehandling. To viktige variabler er vannHt for vannhøyden og lastVal, som husker glidebryterens siste posisjon.
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, mouseX = 0, mouseY = 0, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHighth / 2, kamera, scene, renderer, vann, vannHt = 1; var textureLoader = ny TRE.TextureLoader (); var composer, shaderTime = 0, filmPass, renderPass, copyPass, effectVignette, group, lastVal = 0;
05. Initialisere scenen
Init-funksjonen er en stor del av koden, og sørger for at scenen er satt opp med riktig blikk i begynnelsen. En container legges til på siden, og det er her 3D-scenen vises. Et kamera er lagt til, og litt tåke i bakgrunnen for å falme ut avstanden.
funksjon init () {var container = document.createElement (’div’); document.body.appendChild (container); kamera = nytt TRE.Perspektivkamera (75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000); camera.position.set (2000, 100, 0); scene = ny TRE.Scene (); scene.fog = ny THREE.FogExp2 (0xb6d9e6, 0.0025); gjengir = ny TRE.WebGLRenderer ({antialias: sant});
06. Stille inn gjengiveren
Gjengiveren får en bakgrunnsfarge og oppløsningen er satt til samme størrelse som pikselforholdet på skjermen. Skygger er aktivert i scenen, og den plasseres på siden i containerelementet. Et halvkulelys tilsettes, som har himmel- og grunnfarge.
renderer.setClearColor (0xadc9d4); renderer.setPixelRatio (window.devicePixelRatio); renderer.setSize (SCREEN_WIDTH, SCREEN_HEIGHT); renderer.shadowMap.enabled = true; renderer.shadowMap.type = TRE.PCFSoftShadowMap; container.appendChild (renderer.domElement); var lys = ny TRE.HemisphereLight (0xa1e2f5, 0x6f4d25, 0.5); scene.add (lys);
07. Shader-variabler
Variablene som vil kontrollere effekten av skyggepostprosessen, får verdiene her. Disse variablene vil bli brukt senere for å legge til verdier som styrer utseendet. Hvis du ser i params-funksjonen, vil du se at dette allerede er fullført for deg.
renderPass = ny TRE.RenderPass (scene, kamera); hblur = ny THREE.ShaderPass (THREE.HorizontalTiltShiftShader); vblur = ny THREE.ShaderPass (THREE.VerticalTiltShiftShader); filmPass = ny THREE.ShaderPass (THREE.FilmShader); effectVignette = ny THREE.ShaderPass (THREE.VignetteShader); copyPass = ny THREE.ShaderPass (THREE.CopyShader);
08. Å komponere effektene
Effektene må stables opp i noe som kalles en effektkomponist. Dette tar hver effekt og bruker stylingen på den. Så vises det hele som en siste scene på skjermen, som du vil se når gjengivelsesfunksjonen blir lagt til senere.
09. Laster inn skybildet
De params funksjon kalles og dette angir de individuelle parametrene for posteffektene. En ny gruppe blir opprettet, og dette vil inneholde alt sceneinnholdet i den, for å gjøre det enkelt å rotere gruppen av objekter. Et gjennomsiktig PNG-bilde lastes inn som et skymateriale som skal brukes som en sprite på scenen.
params (); gruppe = ny TRE.Gruppe (); scene.add (gruppe); var cloud = textureLoader.load (“img / cloud.png"); material = new THREE.SpriteMaterial ({map: cloud, opacity: 0.6, color: 0x888888, fog: true});
10. Dobbelt for løkke
Åtte grupper opprettes inne i den første til Løkke. Disse åtte gruppene får alle 35 skyer lagt til i det andre for loop. Hver sky er plassert på et tilfeldig sted over scenen. Gruppene slås av og på med glidebryteren av brukeren for å vise at smog blir lagt til og fjernet i visualiseringen.
for (j = 0; j 8; j ++) {var g = ny TRE.Gruppe (); for (i = 0; i 35; 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. Skalering av skyen
Skyen er skalert opp til en størrelse som gjør at den kan sees i scenen. Hver gruppe skyer etter den første gruppen skaleres ned slik at de er nesten usynlige for gjengiveren. Slik blir de synlige senere ved å skalere dem opp til full størrelse, da dette vil gi en god mellomtoneeffekt.
12. Laster inn modellen
Nå er Collada Loader satt til å laste scene.dae modell. Når den er ferdig lastet, blir modellen skannet, og ethvert objekt som tilfeldigvis er 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 = true; loader.load ('scene.dae', function (collada) {var dae = collada.scene; dae.traverse (function (child) {if (child instanceof THREE.Mesh) {child.castShadow = true; child.receiveShadow = sant;}});
13. Finne detaljer i scenen
Ettersom modellen nå er klar til visning, er den satt til riktig størrelse for å passe til scenen. Koden må spesifikt kontrollere vannhøyden, slik at vannmodellen blir funnet på scenen og overført til den globale variabelen. Tilsvarende må hovedlyset bli funnet slik at det kan settes til å projisere skygger.
dae.scale.x = dae.scale.y = dae.scale.z = 0.5; dae.updateMatrix (); group.add (dae); vann = scene.getObjectByName (“Vann”, sant); vann = water.children [0]; lys = scene.getObjectByName (“SpLight”, sant); lys = lys.barn [0];
14. Lysinnstillinger
Nå som rampelyset er funnet, blir detaljene som gjør at det kaster skygger inn i scenen satt opp. Fading av lyset ved kantene på stedet er også satt her. Til slutt, da modellen er det største elementet å laste inn, vil resten av scenen settes opp før denne koden kjøres, og derfor kan gjengivelsesfunksjonen kalles hver ramme.
light.target.position.set (0, 0, 0); light.castShadow = sant; light.shadow = ny THREE.LightShadow (ny THREE.PerspectiveCamera (90, 1, 90, 5000)); light.shadow.bias = 0,0008; light.shadow.mapSize.width = 1024; light.shadow.mapSize.height = 1024; light.penumbra = 1; lys. forfall = 5; gjengi (); });
15. Siste initialiseringskode
Den siste delen av init-funksjonen angir forskjellige mus- og berøringsinnganger som vil bevege kameraet basert på deres posisjon. En hendelse er også registrert for å lytte etter hvis 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
Gjengivelsesfunksjonen 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. Oppdatere skjermen
Skyggetiden er en variabel som bare går opp med 0,1 hver ramme, og denne sendes inn i filmPass slik at det støyende filmkornet kan oppdateres. Effektkomponisten oppdateres og gjengis til skjermen. Endelig er tween-motoren også oppdatert.
shaderTime + = 0,1; filmPass.uniforms [’time’]. value = shaderTime; komponist. gjengi (0,1); TWEEN.update (); }
18. Få brukerinngang
Inndataområdet glidebryteren, lagt til i trinn 1, kaller showVal funksjon, som er definert her. Når brukeren klikker på dette, sjekker den bare at glidebryteren er flyttet. Hvis den flyttes opp, blir neste skygruppe oppskalert med en mellomtid på over 0,8 sekunder. Vannhøyden er oppdatert, og dette blir også spennt opp til den nye høyden.
funksjon showVal (val) {if (val! = lastVal) {if (val> lastVal) {new TWEEN.Tween (group.children [val] .scale) .to ({x: 1, y: 1, z: 1 }, 800) .easing (TWEEN.Easing.Quadratic.InOut) .start (); vannHt + = 0,07; new TWEEN.Tween (water.scale) .to ({y: waterHt}, 800) .easing (TWEEN.Easing.Quadratic.InOut) .start ();
19. Å ta tak i trærne
Tempvariabelen finner den nåværende gruppen av trær den skal eliminere fra scenen, og her skalerer den dem bare med en mellomtone på y-aksen. En elastisk lettelse brukes slik at denne springer ut av syne på skjermen for en behagelig effekt. Etter hvert som mer vann og skyer er på scenen, forsvinner trærne.
20. Motsatt innspill
Det første innholdet sjekket om glidebryteren ble skyvet oppover, eller til høyre. Nå oppdager koden brukeren som skyver til venstre. Skyene er nedskalert med et mellomrom, og det samme er vannstanden for å vise en avkjølende effekt på jorden.
new TWEEN.Tween (group.children [lastVal] .scale) .to ({x: 0.001, y: 0.001, z: 0.001}, 800) .easing (TWEEN.Easing.Quadratic.InOut) .start (); vannHt - = 0,07; new TWEEN.Tween (water.scale) .to ({y: waterHt}, 800) .easing (TWEEN.Easing.Quadratic.InOut) .start ();
21. Etterbehandling
Det siste trinnet er å bringe trærne tilbake, slik at de skaleres tilbake til sin opprinnelige størrelse med en elastisk mellomtone. Lagre scenen og se websiden fra en server som er vert lokalt på din egen datamaskin eller på en webserver. Du vil kunne samhandle med musebevegelse og glidebryteren for å endre scenevisningen.
Denne artikkelen dukket opprinnelig opp i Webdesigner utgave 265. Kjøp den her.
Relaterte artikler:
- Hvordan kode en augmented reality-markør
- 20 fantastiske eksempler på WebGL i aksjon
- 9 strålende bruksområder av 3D i webdesign
