Denne WebGL-tutorial demonstrerer, hvordan man opretter en 3D-miljøsimulering, der viser, hvad der sker med verden som CO2-niveauer, ændres. (Du kan se mere
Webgl eksperimenter
her.)
Brugeren styrer niveauerne ved hjælp af en HTML-indgangsområde skyder. Da brugeren tilføjer mere CO2, vises mere smog i scenen, vandniveauet vil stige, da stigningen i temperaturen smelter mere polære iskapper, så træer forsvinder, da de bliver nedsænket i vand.
Elementerne er animeret ind og ud ved hjælp af et tween bibliotek og trækker skyderen i den modsatte retning vil vende virkningerne. Hvis det kun var så nemt i det virkelige liv!
01. Displayelementer
Sidenes grundlæggende layout vises her, før 3D-scenen er blevet tilføjet. Billedet er en gennemsigtig PNG øverst på skærmen, og der er en rækkevidde i bunden
For at starte projektet skal du åbne mappen 'Start' i din kode IDE. Åben op
index.html.
Og du vil se, der er en grundlæggende side stillads der allerede med nogle kode. I lyset af kroppen skal du tilføje displayelementerne her, der vil blive brugt som grænseflade til 3D-indholdet.
& 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 = "dias" type = "rækkevidde" min = "0" max = "7" trin = "1" værdi = "0" oninput = "showval (this.Value)" & gt;
& lt; P & GT; Træk skyderen for at ændre niveauet af CO2 & LT; / P & GT;
& lt; / div & gt;
02. Sammenkobling af bibliotekerne
3D-indholdet vises via tre.js, som er inkluderet her. En COLLADA-model vil blive tilføjet til scenen senere. Det ekstra bibliotek til at indlæse dette er inkluderet sammen med et grundlæggende tween bibliotek. De næste linjer alle sammenkæber op for at sende behandlingseffekter, der vil tilføje den afsluttende polske.
Efter at scenen har gjort hver ramme, vil der blive tilføjet en række postprocesvirkninger. Disse er bibliotekerne, der styrker filmkornseffekten, en vippeskift sløret på toppen og bunden af skærmen, og endelig en vignette for at falme ud til skærmens kanter.
04. Tilføjelse af variablerne
Nogle af koden er afsluttet for dig. Du vil se en kommentar, hvor du skal tilføje resten af vejledningens kode. En række variabler anvendes i denne 3D-scene, som ser efter skærmopløsning, forskellige 3D-modeller og efterbehandling. To vigtige variabler er de
Waterht.
Til vandhøjden og
LASTEVAL.
, som husker skyderens sidste position.
Init-funktionen er en stor del af koden, hvilket sikrer, at scenen er oprettet med det rigtige udseende i begyndelsen. En container tilføjes til siden, og det er her, hvor 3D-scenen vil blive vist. Et kamera er tilføjet, og nogle baggrunds tåge for at falme ud af afstanden.
Funktion init () {
Var Container = Document.creationleelement ('Div');
dokument.body.appendchild (beholder);
kamera = ny tre.perspectivecamera (75, screen_width / screen_height, 1, 10000);
kamera.position.set (2000, 100, 0);
scene = ny tre.Scene ();
scene.fog = ny tre.fogexp2 (0xB6D9E6, 0,0025);
renderer = ny tre.webgrenderer ({
Antialias: TRUE.
});
06. Indstilling af renderer
Rendereren får en baggrundsfarve, og opløsningen er indstillet til samme størrelse som pixelforholdet på skærmen. Skygger er aktiveret i scenen, og det er placeret på siden i beholderelementet. Et halvkugle lys tilsættes, som har en himmel og jordfarve.
De variabler, der vil styre de shaders efter processeffekter, gives deres værdier her. Disse variabler vil blive brugt senere for at tilføje værdier, der vil styre udseendet. Hvis du ser i Params-funktionen, vil du se dette allerede afsluttet for dig.
Renderpass = New Three.Renderpass (Scene, Camera);
hblur = new tre.shaderpass (tre.horizontaltiltiltshiftshader);
vblur = ny tre.shaderpass (tre.verticalTiltshiftshader);
Filmpass = New Three.Shaderpass (Three.Filmshader);
EffectVignette = New Three.Shaderpass (Three.VignetShader);
copypass = ny tre.shaderpass (tre.copyshader);
08. Komponere virkningerne
Virkningerne skal stables op i noget, der hedder en effektkomponist. Dette tager hver effekt og anvender stylingen til den. Derefter vises det alle som en endelig scene på skærmen, som du vil se, når renderfunktionen tilføjes senere.
09. Indlæser skyebilledet
Params () -funktionen kaldes i trin 9, som sætter parametrene til efterbehandling vignette og filmkornseffekt
Det
params.
Funktionen kaldes, og dette indstiller de enkelte parametre for de stillingsvirkninger. En ny gruppe er oprettet, og dette vil holde alt scenens indhold inden for det, for at gøre det nemt at rotere gruppen af objekter. Et gennemsigtigt PNG-billede er indlæst som et skysmateriale, der skal bruges som sprite inden for scenen.
Params ();
gruppe = ny tre.group ();
scene.add (gruppe);
var cloud = textureloader.load ("img / cloud.png");
Materiale = Ny tre.Spritematerial ({
Kort: Cloud, Opacity: 0.6, Farve: 0x888888, Fog: True
});
10. Dobbelt til loop
Otte grupper er skabt inden for den første
til
loop. Disse otte grupper får alle 35 skyer tilføjet dem i den anden for loop. Hver sky er placeret i en tilfældig beliggenhed over scenen. Grupperne vil blive tændt og slukket med skyderen af brugeren for at vise SMOG at blive tilføjet og fjernet i visualiseringen.
For (J = 0; J & LT; 8; J ++) {
Var G = ny tre.group ();
for (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.Sprit (materiale);
sprite.position.set (x, y, z);
11. Skylning af skyen
Den første gruppe af skyer kan ses i scenen. De andre er skjult og vil være synlige, når de kontrolleres fra skyderen af brugeren
Skyen skaleres op til en størrelse, der gør det muligt at være synlig i scenen. Hver gruppe af skyer efter den første gruppe er nedskaleret, så de næsten er usynlige for rendereren. Sådan bliver de synlige senere ved at skalere dem tilbage til deres fulde størrelse, da dette vil give en god tweening effekt.
12. Indlæser modellen
Nu er Collada Loader indstillet til at indlæse
scene.dae.
model. Når det er færdig med loading, scannes modellen, og ethvert objekt, der sker for at være et net, er lavet til at kaste skygger og modtage skygger for at give lidt ekstra dybde til scenen.
VAR LOADER = NEW TREE.COLLADAYODER ();
loader.options.convertupaxis = true;
loader.load ('scene.dae', funktion (collada) {
Var DAE = Collada.Scene;
dae.traverse (funktion (barn) {
hvis (barn instansof tre.mesh) {
barn.casthadow = sandt;
Child.ReceivesHadow = TRUE;
}
});
13. At finde specifikationer i scenen
Da modellen nu er klar til at vise, er den indstillet til den rigtige størrelse for at passe til scenen. Koden skal specifikt styre vandets højde, så vandmodellen findes i scenen og passeret ind i den globale variabel. Ligeledes skal hovedlyset findes, så det kan indstilles til projektskygger.
Modellen er blevet tilføjet med hovedlyset for at udsende skygger på scenen. Der er noget væsentligt at se på i scenen, så vippeskiftet blureffekt kan ses på forsiden og bagsiden af scenen
Nu da spotlighten er fundet de specifikationer, der gør det kastet skygger i scenen, oprettes. Fading af lyset ved stedet på stedet er også indstillet her. Endelig, da modellen er det største element at indlæse, vil resten af scenen blive oprettet, før denne kode kører, derfor kan renderfunktionen kaldes hver ramme.
Med musen og røre begivenheder oprettet bliver scenen reaktiv over for musens bevægelse, zoomer ind og ud, mens du er i stand til at vippe scenen op og ned
Den sidste del af INIT-funktionen sætter forskellige mus og rører indgange, der vil flytte kameraet baseret på deres position. En begivenhed er også registreret for at lytte til, hvis skærmen er ændret, og dette vil opdatere det gengivne display.
Renderfunktionen er indstillet til at blive kaldt som tæt på 60 billeder pr. Sekund, da browseren kan klare. Gruppen, som indeholder alle modellerne, er indstillet til at rotere med en lille mængde, hver ramme. Kameraets position opdateres fra musen eller røre ved input, og det fortsætter med at se på midten af scenen.
17. Opdatering af displayet
Shadertiden er en variabel, der bare går op med 0,1 hver ramme, og dette føres ind i
Filmpass.
således at den noisey film korn kan opdateres. Effektkomponisten opdateres og udføres til skærmen. Endelig opdateres tween-motoren også.
Input-range-skyderen, tilføjet i trin 1, kalder
showval.
funktion, som er defineret her. Når brugeren klikker på dette, kontrollerer den bare, at skyderen er flyttet. Hvis det er flyttet op, bliver den næste skygruppe opskaleret med en tween over 0,8 sekunder. Vandhøjden er opdateret, og dette er også tweenet op til den nye højde.
Funktion Showval (Val) {
hvis (val! = laste) {
hvis (Val & gt; laste) {
New Tween.Tween (Group.Children [Val] .scale) .to ({x: 1, y: 1, z: 1}, 800).
vandht + = 0,07;
New Tween.Tween (Water.scale) .TO ({Y: Waterht}, 800)..
19. Gribning af træerne
Temp Variablen finder den nuværende gruppe af træer, det skal eliminere fra scenen, og her skal det kun nedskales med en tween på Y-aksen. En elastisk lempelse bruges således, at denne fjedre ud af syne på skærmen for en behagelig virkning. Da mere vand og skyer er i scenen, forsvinder træerne.
20. Modsat input.
Det første indhold kontrolleres, hvis skyderen blev glidet opad, eller til højre. Nu registrerer koden brugeren glider til venstre. Skyerne skaleres ned med en tween, og det er også vandniveauet for at vise en køleeffekt på jorden.
Med alt, der arbejder, kan du se baggrunden, klart, når du flytter musen, så kameraet får et højere udsigtspunkt på scenen
Det sidste trin er at bringe træerne tilbage, så de skaleres tilbage til deres oprindelige størrelse med en elastisk tween. Gem scenen og se websiden fra en server enten hostet lokalt på din egen computer eller på en webserver. Du vil være i stand til at interagere med musens bevægelse og skyderen for at ændre scenens display.
Denne artikel optrådte oprindeligt i
Webdesigner
Udgave 265. Køb det
her
.
Portrætfotografering er en balanceringslov - der er så mange ting at huske på. Kommunikere med dit emne og sørge for at de føler sig trygge er afgørende. Og fra et teknisk perspektiv, d..
