, skabe en revolverende atom i papervision3d,,,,, andel,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, som det fremgår af titlen, kommer vi til at simulere et atom med skaller af elektroner kredser en kerne, ved hjælp af papervision 3d. lad os komme af sted...,,, dette projekt blev oprettet udelukkende med actionscript 3,0 med flashdevelop.hvis du vil gøre det på samme måde, flashdevelop kan downloades her.(efter konfigurationen instruktioner her. ellers kan du bruge flash cs3 eller derover.,, endelige resultat forpremiere, lad os tage et kig på det endelige resultat, vi arbejder hen imod:, flyt den mus og kameraet vil kredsløb atomet frit.få atom i en situation, du kan lide, og klik på musen på scenen, vil dette få atom på en fast "z" holdning tillader dig at skifte kamera på x & y - akse.klik på scenen igen at frigive det kamera er "z" kredsløb.,, trin 1: oprettelse af et nyt projekt, åben flashdevelop og klik projekt > nye projekt, trin 2: nedsat, vælge actionscript 3 > as3project.for projektets navn på "atomer".for placering, klik og navigere den mappe, du ønsker at redde det.- "skabe adresseregister for projektet" afkrydsningsfelt udvalgte og klik okay.,, hvis du ønsker at bruge flash cs3 /cs4, skabe en ny flash fil og fastsætte bredde og højde for 600x500.sæt den baggrund farve, sort.hedder det "atomer. blp" og redde dig, hvorhen du vil.,, trin 3: papervision 3d - anlæg, flash, kopi eller trække "eller" og "nochump" mapper fra kilden download i mappen, hvor du har gemt den atoms.fla fil. for flashdevelop, gå videre og kopi eller trække papervision3d_2.1.932.swc fra kilden filer (kan downloades ovenfor) i den forbindelse mappe til dette projekt.for yderligere oplysninger om pv3d, kan du besøge webstedet her.,, trin 4: tildele eksterne bibliotek i flashdevelop, klik på > projektleder.klik på "+" - skilt til venstre for lib mappe til at udvide det.nu right-click papervision3d_2.1.932.swc og udvælge tilføje til biblioteket.,, trin 6: det dokument, klasse, for flashdevelop, åbne projektlederen igen (se punkt 4), udvide src - mappe, og double-click main.as, under import og lige over klasse definition, tilføje følgende metadata - at oprette det tidspunkt egenskaber. [stg (bredde = 600, højde = 500, framerate = 30, backgroundcolor = 0)], i lokalitet () metode efter bemærkningen "indførsel", tilføjes følgende linjer kode, stage.addeventlistener (event.resize, createbackground); _background = nye sprite. addchild (_background); createbackground (). var helium3: helium3atom = nye helium3atom; addchild (helium3), lad os skabe en enkel gradient background.der tilføjes følgende linjer kode efter lokalitet () metode:, privat funktion createbackground e: begivenhed = null): ugyldig (var - g: grafik = _background.graphics; g.clear (), var filltype: string = gradienttype.radial; var farver: array = [0x0000ff, 0x000000] var alphaer: array = [1, 1] var nøgletal: array = [0x00, 0xff] var matr: matrix = nye matrix(); matr. creategradientbox (stage.stagewidth, stage.stageheight, 0 0, 0), var spreadmethod: string = spreadmethod.pad; g.begingradientfill (filltype, farver, alfa nøgletal, matr, spreadmethod); g.drawrect (0, 0, stage.stagewidth, fase. stageheight)}, er det for det vigtigste dokument, klasse, hvis du bruger flashdevelop. for flash, skabe en ny main.as klasse i den samme mappe som -dit projekt.sørg for, main.as klasse er i den samme mappe, som atoms.fla "eller" & "nochump" mapper. tilsættes følgende linjer:, pakke (import flash.display.gradienttype; import flash.display.graphics; import flash.display.spreadmethod; import flash.display.sprite; import flash.events.event; import flash.geom.matrix; offentlige klasse vigtigste udvider sprite (private var _background: sprite. offentlig funktion main(): ugyldig (hvis (tidspunkt) init(); andre addeventlistener (event.added_to_stage, lokalitet)} privat funktion lokalitet (e: begivenhed = null): ugyldig (removeeventlistener (event.added_to_stage, lokalitet); stage.addeventlistener (event.resize, createbackground); _background = nye addchi sprite.id (_background); createbackground (), var helium3: helium3atom = nye helium3atom; addchild (helium3)} privat funktion createbackground e: begivenhed = null): ugyldig (var - g: grafik = _background.graphics; g.clear (), var filltype: string = gradienttype.radial; var farver: array = [0x0000ff, 0x000000] alpha, var: array = [1, 1] var nøgletal: array = [0x00, 0xff] var matr: matrix = nye matrix(); matr. creategradientbox (stage.stagewidth, stage.stageheight, 0 0, 0), var spreadmethod: string = spreadmethod.pad; g.begingradientfill (filltype, farver, alfa nøgletal, matr, spreadmethod); g.drawrect (0, 0, stage.stagewidth, fase. stageheight)}}}, åben vis enog tildele "primære" som det dokument, klasse.(se den hurtig introduktion til dokument klasser, hvis du ikke er sikker på hvad vi laver.), hvis du prøver at stikke af nu, får du en fejl, da vi ikke har skabt helium3atom klasse endnu.så sørg for at redde den fil, og overlade det til nu.,, trin 7: skabe helium3atom klasse, fra flashdevelop, klik på > projektleder, right-click src - mappe og vælge tilføje > nye klasse.,, trin 8: oprettelse af den klasse, klasse helium3atom navn, klik de kigger på basen klasse og gå videre. papervision3d. betragtning. basicview ".- okay at færdiggøre.,, trin 9: import, der kræves i klasser (stadig i flashdevelop) tilføje alle de nødvendige import pakken parentes lige over "import org. papervision3d. betragtning. basicview;" og redde den fil., import flash.events.event; import flash.events.mouseevent; import org.papervision3d.lights.pointlight3d; import org.papervision3d.materials.colormaterial; import org.papervision3d.materials.shadematerials.gouraudmaterial; import org.papervision3d.materials.wireframematerial org.papervision3d.objects.displayobject3d, import, import - org.papervision3d.objects.primitives.cylinder; import, org. papervision3d. objekter. primitive. område, flash, skabe en ny actionscript fil, hedder det helium3atom og gem det til den samme alvorligectory, du har brugt.det burde være lige ved siden af atoms.fla fil "eller" & "nochump" mapper, og main.as klasse.der tilføjes følgende kode:, pakke (import flash.events.event; import flash.events.mouseevent; import org.papervision3d.lights.pointlight3d; import org.papervision3d.materials.colormaterial; import org.papervision3d.materials.shadematerials.gouraudmaterial; import org.papervision3d.materials.wireframematerial; import org.papervision3d.objects.displayobject3d; import org.papervision3d.objects.primitives.cylinder; import org.papervision3d.objects.primitives.sphere; import org.papervision3d.view.basicview; offentlige klasse helium3atom udvider basicview {offentlige funktion helium3atom () {}}}, gå 10: f.eks. variabler, i klasse beslag, lige før den pågældende metode, tilføjes følgendelinier: private var _do3darray: system; //vil holde alle henvisninger til alle de eletrons og deres ringe privat var _easeout: antal = 3; //og styrke, når de flytter kameraet private var _reachx: antal = 1; //den lavere denne er, jo længere den nå det er x - aksen private var _reachy: antal = 1; //samme som reachx, men finder anvendelse på y - aksen private var _reachz: antal =. 5; //anvendes sammen med - mousey, jo tættere mousey er på scenen center, tættere på kameraet bevæger sig i retning af atomet.private var _rotx: antal = 0, 5; //den værdi, der anvendes til kameraet rotation på x - aksen private var _roty: antal = 0, 5; //samme som _rotx, men gælder for kameraet er y - aksen private var _campitch: antal = 0; //kredsløb på x - aksen beregnes på fly ind i den onrendertick () metode private var _camyaw: antal = 0; //kredsløb på y - aksen beregnet på at flyve ind i onrendertick () metode private var _zdist: antal = 4; //kontrol styrken af zoomer kameraet og private var _colorarray: array = [0xcc490b, 0x26d965, 0xcc490b]; //farver for neutroner og protoner i kernen private var _freeorbit: boolean = sandt; //sporskifter kredsløb tilstand af kameraet, trin 11: konstruktøren, tilføje følgende linjer i than konstruktøren metode.hvis (tidspunkt) lokalitet (); andre addeventlistener (event.added_to_stage, lokalitet); startrendering (), den første to linjer til den lokalitet () metode.(hvis fase endnu ikke er til rådighed, og tilføjer en til at lytte til, når de f.eks. lægges til den scene, og så kalder lokalitet () metode.), startrendering () metode er så ringede bagefter.denne metode er fra basicview er super klasse "abstractview".hvad denne metode gør, er at tilføje en enter_frame lytter, der udløser onrendertick () metode.vi bliver nødt til at omgå denne beskyttede metode senere animere atomet, og flyt kameraet.,, trin 12: f.eks initialization i lokalitet () metode kaldet af konstruktøren, vi først fjerne tilfælde til at lytte til, at f.eks. den fase, og så ring til createatom (metoden), tilføjes følgende linjer kode under konstruktøren () metode:, privat funktion lokalitet (e: begivenhed = null): ugyldig (removeeventlistener (event.added_to_stage, lokalitet); createatom ()), trin 13: atom elementer (1. halvår), lad os bare gå igennem, hvad der sker i createatom () metode.det er _do3darray instantierede, har vi brug for at få henvisninger til alle de displayobject3d, der har ringene og elektroner i dette system, så vi kan få adgang til dem senere for informationstiltag.en lokal variabel, der hedder "light", er tillagt en pointlight3d objekt instans og placeres på øverste højre side af scenen. en lokal variabel, der hedder "atom" tildeles en displayobject3d instans og indsættes i stedet.dette vil være den forælder, displayobject3d for alle de øvrige elementer. den "kerne", også displayobject3d er så instantierede.det drejes 90 grader på x - aksen for at gøre det mod kameraet og derefter lægges ind i "atom" displayobject3d f.eks. den "område" variabel, også lokalt variabel, er tildelt et område genstand.et område er en indbygget primitive af pv3d. med denne sag, vi tildeler "død", for det er væsentlig parameter, "25" for dens radius parameter, og "1", både for segmentsw og segmentsh parametre. tilsættes følgende linjer kode efter deres lokalitet () metode:, privat funktion createatom (): ugyldig (_do3darray = [] var lys: pointlight3d = nye pointlight3d; lys. x = 300 og lys. y = 700 og lys. z = 0, scene.addchild (lys) var atom: displayobject3d = nye displayobject3d; scene.addchild (") var kerne: displayobject3d = nye displayobject3d; nucleus.rotationx = 90; atom.addchild (kerne) var område: område = nye område (null, 25, 1, 1); scene.addchild (område)), punkt 14: kontrol af område, værsgo.og ramte ctrl + træde på dig tastatur.den kugle, ligner mere en polygon med 5 hjørner.det er, fordi vi har tildelt 1 for både segmentsw & segmentsh.det har i alt 5 toppunkter.,, efter afprøvning, fjerne addchild metode."område" skal ikke lægges til den scene, det vil i stedet bruges som vejledning til holdning neutroner og protoner, som du vil se.tilføje kode nedenfor i createatom () metode efter "område" erklæring, hvor man fjernede addchild metode. for (var - jeg: uint = 1; jeg < sphere.geometry.vertices.length-1; jeg + +) (var - np: område = nye område (nyt gouraudmaterial (lys, _colorarray [- 1] 0, 0), 23, 12, 9) np. x = område. geometri. toppunkter [i]. x np. y = område. geometri. toppunkter [i]. y. np. z = område. geometri. toppunkter [i]. z, nucleus.addchild (np)} hvad dette loop er iterate fra 1 til 4 og over 0, 5.en lokal variable belejligt, der hedder "np" (neutroner & protoner) er oprettet i hver sløjfe og tildeles en kugle primitive.hver "np" område tildeles en gouraudmaterial med pointlight3d protesterer vi skabte tidligere for dens lys og colorarray [- 1] til lightcolor parameter."np" område er andet parameter tildeles en radius af "23", og de sidste to parametre for segmentsw & segmentsh, som har fået tildelt "12" & "9".vi har råd til større mængder af segmenter, idet der er kun tre kugler ind i kernen.resultatet er en mere alsidig område... hver "np" område, tilsættes derefter ind i kernen med koordinaterne ud fra den nuværende udgave er toppunkt i "område" område.,, trin 15: atom elementer (2. halvår), fra her, vi iterate to gange for at skabe elektroner og tilsvarende ringe.vi instantiate en displayobject3d og overdrager det til "do3d".det displayobject3d bliver både elektron og sin ring. et område så primitive er skabt og overdrages til "af".det er off - white farvede elektroner, at kredsløb kernen.de parametre, som vi skaber hver electron er som følger - en colormaterial til en værdi af 0xefecca med fuld opacitet, kuglens radius til en værdi af 7.de sidste to fakultative parametre, vi glemte misligholdte med værdier på 8 & 6. en flaske primitive er skabt til at gøre det.her har vi brug for en wireframematerial hvid farve, en alpha. 05, tykkelse 2, en radius på 300, højde på 1, segmentsw 48 for at gøre det rigtig rundt og segmentsh 1 siden højden er også 1.den topradius værdi er tilbage med - 1, der er en standardværdi, og vi har begge topface og bottomface "falske", da vi ikke har brug for dem her. de er anbragt på 303 elektron så ringen er lige i midten af en elektron. vi så det doublesided ejendom i ringen er materiale til "ægte" for at få ringen vise både indre og ydre skal. efter det, do3d er localrotationz er beregnet ved at dividere 360 med to gange det antal ringe, ganges med det, og at 45 grader til resultatet.når den er oprettet, det ligger fladt som bunden af en kop.vi mangedoble antallet af ringe med 2 at skifte sin "z" akse fra 0 til 90, og der tilsættes 45 grader til at lave en god "x" formation for 2 ringe.vi må sætte do3d "y" rotation til en tilfældig holdning i en cirkel - elektroner vil alle have en anden holdning, når de kredsløb kernen., ringe og elektronerne suppleres i do3d, så en henvisning indsættes i _do3darray. endelig den do3d indsættes i atom displayobject3d. indsættes følgende linjer kode, lige under den sidste kategori af den første løkke: for (i = 0. jeg < 2. i + +) (var - do3d: displayobject3d = nye displayobject3d; var ring: cylinder; var elektron: område: = nye område (nyt colormaterial (0xefecca, 1), 7), ring = ny flaske (nye wireframematerial (0xffffff,. 05, 2) 300 1, 48, 1 - 1, falske, urigtige); electron. x = 303; //add halvdelen af ring.mater størrelse:ial.doublesided = sandt. do3d.localrotationz = 360 /4 * + 45 do3d.localrotationy = 360 * math.random (); do3d.addchild (ring); do3d.addchild (:); _do3darray.push (do3d); atom.addchild (do3d)}, trin 16: kontrol af vores fremskridt, lad os prøve det og se, om det virkede.hvis alt gik godt, bør de have et billede, som nedenfor:,, vi er næsten færdige, vi skal lige tilføje animation.,, skridt 17: kamera kredsløb tilstand i lokalitet () metode (jf. trin 12), før den "createatom ()" metode, tilføjes følgende linje kode:, stage.addeventlistener (mouseevent.click, onstageclick), vil det udløse en ændring i kameraet er mode i kredsløb.der tilføjes følgende kode under lokalitet () metode nærmer sig støt:, privat funktion onstageclick e: mouseevent): ugyldig (_freeorbit =!_freeorbit;}, det er greb _freeorbit mellem sandt eller falsk.,, gå 18: i kredsløb om atom, onrendertick () metode er udløst via en event.enter_frame fra basicview er superclass - abstractview. i dette super.onrendertick (tilfælde), er at gøre den scene.den displayobject3d, der har ringene og elektroner i _do3darray er anvendt en kursafvigelse på 10.anvendelse af en displayobject3d giringsudsving er den samme som do3d.localrotationy + = 10.det er det, der gør ringene og elektroner kredser kernen., xdist og ydist kun beregne, hvor langt mousex &. mousey er fra midten af scenen. så har vi de betinget af, at kontrollen med de nuværende _freeorbit.hvis _freeorbit er sandt, kameraet frit bevæger sig på dens tre akser.flytter mus til venstre for kameraet til at lette mod venstre, samtidig med at den mus til højre vil gøre det modsatte.det samme gælder for kameraet er y - akse (bevæger sig op og ned).når kameraet er tættest på center, en zoom virkning, anvendes.på den anden side, hvis _freeorbit er falske, kameraet i stedet, kan kun sende frit på det er x - og y - akse og har et fast z holdning.det er virkningen af kameraet rundt ".det er lettere at forstå, hvis du spiller med værdierne i egenskaber.90 grader, anvendes til at _campitch, således at atom er fuldt ud i midten af det tidspunkt, hvor musen er midt på scenen, hvis de ikke anvendes, atomet vil være på venstre side, når musen er midt på scenen. det er den samme grund 270 grader, anvendes til at _camyaw; hvis ikke tilsat, atomet vil være på sin bedste side, når musen er midt på scenen.vi er også begrænse kredsløb af kameraet, når du flytter mus op og ned på scenen.hvis du fjerner den _campitch begrænsninger, er der et punkt, hvor kameraet bliver vendt på hovedet, og vil løse sig selv.det er en bivirkning.når holdet er afsluttet i de næste skridt, forsøge at fjerne grænserne for at se, hvad der sker. at tilføje følgende linjer kode efter createatom () metode. tilsidesætte beskyttede funktion onrendertick (ref.: begivenhed = null): ugyldig (super.onrendertick (tilfælde) til (var - jeg: uint = 0; og det _do3darray.length; jeg + +) (_do3darray [i]. i italien (10)} var xdist: antal = mousex - stage.stagewidth *. 5, var ydist: antal = mousey - stage.stageheight *. 5; hvis (_freeorbit) (kamera. x + = (xdist - kamera. x * _reachx) * _easeout; kamera. y + = (ydist - kamera. y * _reachy) * _easeout; kamera. z + = (- mousey * _zdist - kamera. z) * _reachz;} andre (_campitch + = ((- ydist * _rotx) - _campitch + 90) * _easeout; _camyaw + = ((xdist *_roty) - _camyaw + 270) * _easeout; hvis (_campitch < 5) _campitch = 5; hvis (_campitch > 175) _campitch = 175; camera.orbit (_campitch, _camyaw)}}, skridt 19: afprøvning af afsluttet klasse, det er alt for helium3atom klasse.klassen skal se ud nøjagtig som følgende:, pakke (import flash.events.event; import flash.events.mouseevent; import org.papervision3d.lights.pointlight3d; import org.papervision3d.materials.colormaterial; import org.papervision3d.materials.shadematerials.gouraudmaterial; import org.papervision3d.materials.wireframematerial; import org.papervision3d.objects.displayobject3d; import org.papervision3d.objects.primitives.cylinder; import org.papervision3d.objects.primitives.sphere; import org.papervision3d.view.basicview; offentlige klasse helium3atom udvider basicview (private var _do3darray: system; private var _easeout: antal = 3; private. var _reachx: antal = 1; private var _reachy: antal =. 1; private var _reachz: antal =. 5; private var _rotx: antal = 0, 5; private var _roty: antal = 0, 5; private var _campitch: antal = 0, private var _camyaw: antal = 0, private var _zdist: antal = 4; private var _colorarray: array = [0xcc490b, 0x26d965, 0xcc490b] private var _freeorbit: boolean = sandt; offentlig funktion helium3atom () (hvis (tidspunkt) lokalitet (); andre addeventlistener (event.added_to_stage, lokalitet); startrendering ();} privat funktion lokalitet (e: begivenhed = null): ugyldig (removeeventlistener (event.added_to_stage, lokalitet); stage.addeventlistener (mouseevent.click, onstageclick); createatom ();} privat funktion onstageclick e: mouseevent): ugyldig (_freeorbit =!_freeorbit;} privat funktion createatom (): ugyldig (_do3darray = [] var lys: pointlight3d = nye pointlight3d; lys. x = 300 og lys. y = 700 og lys. z = 0, scene.addchild (lys) var atom: displayobject3d = nye displayobject3d; scene.addchild (") var kerne: displayobject3d = nye displayobject3d; nucleus.rotationx = 90; atom.addchild (kerne) var område: område = nye område (null, 25, 1, 1); //usynlige guide for (var - jeg: uint = 1; jeg < sphere.geometry.vertices.length-1; jeg + +) (var - np: område = nye område (nyt gouraudmaterial (lys, _colorarray [- 1] 0, 0), 23, 12, 9) np. x = område. geometri. toppunkter [i]. x np. y = område. geometri. toppunkter [i]. y. np).= område. geometri. toppunkter [i]. z, nucleus.addchild (np)} (i = 0. jeg < 2. i + +) (var - do3d: displayobject3d = nye displayobject3d; var ring: cylinder; var elektron: område: = nye område (nyt colormaterial (0xefecca.), 7), ring = ny flaske (nye wireframematerial (0xffffff,. 05, 2) 300 1, 48, 1 - 1, falske, urigtige); electron. x = 303; //add halv størrelse af elektron ring.material.doublesided = sandt. do3d.localrotationz = 360 /4 * + 45. do3d.localrotationy = 360 * math.random (); do3d.addchild (ring); do3d.addchild (:); _do3darray.push (do3d); atom.addchild (do3d)}} tilsidesætte beskyttede funktion onrendertick (ref.: begivenhed = null): ugyldig (super.onrendertick (tilfælde) til (var - jeg: uint = 0. jeg < _do3darray.length; jeg + +) (_do3darray [i]. i italien (10)} var xdist: antal = mousex - stage.stagewidth *. 5, var ydist: antal = mousey - stage.stageheight *. 5; hvis (_freeorbit) (kamera. x + = (xdist - kamera. x * _reachx) * _easeout; kamera. y + = (ydist - kamera. y * _reachy) * _easeout; kamera. z + = (- mousey * _zdist - kamera. z) * _reachz;} andre (_campitch + = ((- ydist * _rotx) - _campitch + 90) * _easeout; _camyaw + = ((xdist * _roty) - _camyaw + 270) * _easeout; hvis (_campitch < 5) _campitch = 5; hvis (_campitch > 175) _campitch = 175; camera.orbit (_campitch, _camyaw)}}}}, tryk ctrl + træder ind, og du bør få noget som du se under:,, gå 20: kulstofatom, okay, lad os nu skabe en lidt mere komplekse atom.skabe en ny klasse (hvis du bruger flashdevelop, henviser til trin 7 & 8).den eneste forskel er det navn, det skal være carbonatom ".det er stort set den samme kode, med nogle få ændringer, så gå videre og kopi hele indholdet i helium3atom, udvælge hele indholdet i den carbonatom og erstatte det med koden ud fra helium3atom., lad os begynde at ændre tingene fra toppen.i klasse erklæring, hvor vi har _colorsarray, fjerne de tildelte system, der har 3 farver.næste, gå ind i lokalitet () metode.tilføje kode under før createatom () metode til:, randomizecolorarray (), gå under onstageclick (metode og tilføje denne nye metode:, privat funktion randomizecolorarray (): ugyldig (_colorarray = [...], var temparray: array = []; (var - jeg: uint = 0; og lt; 12 - + +) (hvis (< 6) var farve: uint = 0x004080; //blå farve, anden farve = 0xa40000; //rød nuance temparray.push (farve)}, mens (temparray.length > 6) (_colorarray.push (temparray.splice (uint (math.random (*) temparray. længde). 1)} _colorarray = _colorarray.concat (temparray)), og denne metode randomizes position 2 farver, der er oplagret i _colorarray.det er 6 lige store dele af røde & blå vilkårligt placeret inden i _colorarray. næste, gå ind i createatom () en metode, hvor "kerne" er instantierede og fjerne "nucleus.rotationx = 90" opgave. kør ned til 2 linjer og ændre område instantiation parametre, »var område: område = nye område (nul, 60, 4, 4); ".vi har brug for et større område med mere toppunkter at holde alle 12 protoner og neutroner. nu gå ind i den første løkke, hvor "np" område er instantierede og fjerne de sidste 2 parametre for 12 & 9.dette skaber segmentsw & segmentsh deres misligholdelser, 8 & 6) og reducerer ramt på præstationen. dernæst i anden løkke, ændre størrelsen af loops fra 2 til 6.Go right below the electron instantiation and replace the following code:, ring = new Cylinder (new WireframeMaterial (0xFFFFFF, .05, 2), 300, 1, 48, 1, -1, false, false); electron.x = 303;,with:, if (i == 1