Lag en Revolving Atom i Papervision3D

Create en Revolving Atom i Papervision3D
Del
Del
Del
Del
Dette Cyber ​​mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.

Akkurat som tittelen antyder, vi kommer til å simulere en Atom med skall av elektroner i bane rundt en kjerne, bruker Papervision 3D. La oss komme i gang ..


Dette prosjektet ble opprettet utelukkende med Actionscript 3.0 bruker FlashDevelop. Hvis du ønsker å gjøre det på samme måte, kan FlashDevelop lastes ned her. (Følg instruksjonene for konfigurering her.) Ellers kan du bruke Flash CS3 eller nyere



Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige resultatet vi skal jobbe mot.:

Beveg musen rundt og kameraet vil bane rundt Atom fritt. Få Atom i en posisjon du liker og klikk med musen på scenen, vil dette sette Atom på en fast "z" posisjon slik at du kan rotere kameraet på sin x & y-aksen. Klikk på scenen igjen for å frigjøre kameraets 'z' bane



Trinn 1:. Opprett et nytt prosjekt

Åpne FlashDevelop og klikk Prosjekt > Nytt prosjekt



Trinn 2: Sette opp

Velg Actionscript 3 > AS3Project. For navnet på prosjektet satt i "Atoms". For plassering, klikk og naviger til mappen du ønsker å lagre den i. La "lage katalog for prosjektet" boksen valgt, og klikk OK.

Hvis du vil bruke Flash CS3 /CS4, opprette en ny flash-fil og angi bredden og høyden til 600x500. Sett bakgrunnsfargen til svart. Name it "atoms.fla" og lagre den hvor du vil



Trinn 3:. Papervision 3D Installasjon

For Flash, kopiere eller dra "org" og "nochump "mapper fra kilden nedlastingen i mappen der du har lagret atoms.fla fil.

For FlashDevelop, gå videre og kopiere eller dra Papervision3D_2.1.932.swc fra kildefilene (nedlastbare ovenfor) inn i lib . mappe for dette prosjektet vil ha mer informasjon om PV3D, kan du besøke nettsiden her



Trinn 4: Tilordne Ekstern Library

I FlashDevelop, klikker du på Vis > prosjektleder.. . Klikk på "+" tegnet til venstre for lib mappen for å utvide det nå høyreklikk Papervision3D_2.1.932.swc og velg Legg til i bibliotek



Trinn 6:. Dokument Class Anmeldelser

For FlashDevelop, åpner prosjektleder igjen (se trinn 4), utvide src mappen og dobbeltklikk Main.as
Under importen og rett ovenfor klassen definisjon, legge til følgende metadata tag å sette opp scenen egenskaper. product: [SWF (width = 600, height = 500, framerate = 30, bakgrunnsfarge = 0)]

Innenfor init () -metoden etter kommentaren "entry point", legge til følgende linjer med kode .
stage.addEventListener (Event.RESIZE, createBackground); _ bakgrunn = new Sprite, addChild (_backGround); createBackground (); Var helium3: Helium3Atom = new Helium3Atom; addChild (helium3);

Neste, la oss lage en enkel gradient bakgrunn. Legg til følgende linjer med kode etter init () -metoden:
privat funksjon createBackground (e: Hendelses = null): void {var g: Grafikk = _backGround.graphics; g.clear (); Var fillType: String = GradientType.RADIAL; Var farger: Array = [0x0000FF, 0x000000]; Var alfaer: Array = [1, 1]; Var Skjermstørrelse: Array = [0x00, 0xFF]; Var MATR: Matrix = new Matrix (); matr.createGradientBox (stage.stageWidth, stage.stageHeight, 0, 0, 0); Var spreadMethod: String = SpreadMethod.PAD; g.beginGradientFill (fillType, farger, Alpha, prosenter, matrise, spreadMethod); g.drawRect (0, 0, stage.stageWidth, stage.stageHeight);}

Det er det for hoveddokumentet klasse, hvis du bruker FlashDevelop

For Flash, opprette en ny Main.. som klasse i samme mappe som prosjektet. Kontroller at Main.as klassen er i samme mappe som atoms.fla, "org" & "nochump" mapper

Legg til 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; public class Hoved strekker Sprite {private Var _backGround: Sprite; offentlig funksjon main (): void {if (scene) init (); annet addEventListener (Event.ADDED_TO_STAGE, init); } Private funksjon init (e: Hendelses = null): void {removeEventListener (Event.ADDED_TO_STAGE, init); stage.addEventListener (Event.RESIZE, createBackground); _backGround = new Sprite; addChild (_backGround); createBackground (); Var helium3: Helium3Atom = new Helium3Atom; addChild (helium3); } Private funksjon createBackground (e: Hendelses = null): void {var g: Grafikk = _backGround.graphics; g.clear (); Var fillType: String = GradientType.RADIAL; Var farger: Array = [0x0000FF, 0x000000]; Var alfaer: Array = [1, 1]; Var Skjermstørrelse: Array = [0x00, 0xFF]; Var MATR: Matrix = new Matrix (); matr.createGradientBox (stage.stageWidth, stage.stageHeight, 0, 0, 0); Var spreadMethod: String = SpreadMethod.PAD; g.beginGradientFill (fillType, farger, Alpha, prosenter, matrise, spreadMethod); g.drawRect (0, 0, stage.stageWidth, stage.stageHeight); }}}

Åpne Flash og tildele "Main" som Document klassen. (Sjekk ut denne rask innføring dokumentere klasser hvis du ikke er sikker på hva vi holder på med.)

Hvis du prøver å kjøre dette nå, vil du få en feilmelding, siden vi ikke har opprettet Helium3Atom klasse ennå. Så bare sørg for å lagre filen og la det for nå



Trinn 7:. Opprett Helium3Atom Class

Fra FlashDevelop, klikker du på Vis > Prosjektleder, høyreklikker du på src mappen og velg Legg til > New Class



Trinn 8:. Sette opp Class

navn klassen Helium3Atom, klikker du på søkeknappen for base klassen og skriv "org.papervision3d.view.BasicView". Hit OK for å full



Trinn 9:. Importe Obligatoriske Classes

(Fortsatt i FlashDevelop) Legg alle nødvendige import inne i pakken parentes rett ovenfor "import org.papervision3d.view. BasicView; " og lagre filen
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;

For Flash, opprette en ny Actionscript-fil, name it Helium3Atom og lagre den i samme katalog du har brukt. Det bør være rett ved siden av atoms.fla fil, "org" & "nochump" mapper og Main.as klassen. Legg til 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; public class Helium3Atom strekker BasicView {offentlig funksjon Helium3Atom () {}}}



Trinn 10: instansvariabler

Inne i klassen braketten, rett før konstruktøren metoden, legge til følgende linjer med kode:
private Var _do3DArray: Array; //vil holde alle referanser til alle eletrons og deres ringsprivate Var _easeOut: Number = 0,3; //lettelser styrke når du flytter cameraprivate Var _reachX: Number = 0,1; //den redusere denne er satt, jo lenger rekkevidde mot det er x axisprivate Var _reachY: Number = 0,1; //samme som reachX, men gjelder på y axisprivate Var _reachZ: Number = 0,5; //brukes på sammen med -mouseY er jo nærmere mousey til scenen sentrum, nærmere kamera beveger seg mot atom.private Var _rotX: Number = 0,5; //verdien som brukes for kameraet rotasjon på x axisprivate Var _rotY: Number = 0,5; //samme som _rotX, men gjelder for kameraets y axisprivate Var _camPitch: Antall = 0; //bane på x-aksen beregnet på fly inne i onRenderTick () methodprivate Var _camYaw: Antall = 0; //bane på y-aksen beregnes på sparket inni onRenderTick () methodprivate Var _zDist: Number = 4; //styrer styrken zoomer kameraet inn og outprivate Var _colorArray: Array = [0xCC490B, 0x26D965, 0xCC490B]; //farger for nøytroner og protoner inne den nucleusprivate Var _freeOrbit: Boolean = true; //bytter bane modus på kameraet



Trinn 11: Constructor

Legg til følgende linjer inne i Constructor metoden.
if (scene) init (); annet addEventListener (Event.ADDED_TO_STAGE, init); startRendering ();

De to første linjene kaller init () -metoden. (Hvis scenen er ikke tilgjengelig ennå, legger det en lytter for når forekomsten blir lagt til scenen, og deretter kaller init () -metoden.)

startRendering () metoden kalles da etterpå. Denne metoden er fra BasicView super klasse, "AbstractView". Hva denne metoden gjør er å legge en ENTER_FRAME lytteren som utløser onRenderTick () -metoden. Vi trenger å overstyre dette beskyttede metoden senere for å animere atom og farten kameraet



Trinn 12:. Instance initialisering

Inne i init () metoden kalles av konstruktøren, vi først fjerne arrangementet lytteren for å legge forekomsten av scenen og deretter ringe createAtom () -metoden

Legg til følgende linjer med kode under konstruktør () metode:
privat funksjon init (e: Hendelses = null): void {removeEventListener (Event.ADDED_TO_STAGE, init); createAtom ();}



Trinn 13: Atom Elements (første halvdel)

La oss bare gå gjennom hva som skjer i createAtom () -metoden. Den _do3DArray er instansiert, vi trenger å sette referanser av all DisplayObject3D som holder ringene og elektroner inn i denne matrisen, slik at vi kan få tilgang til dem senere for animasjon.

En lokal variabel kalt "light" er tildelt en PointLight3D objekt forekomst og plassert på øverste høyre side av scenen.

En annen lokal variabel kalt "atom" er tildelt en DisplayObject3D forekomst og legges inn i scenen. Dette vil være den overordnede DisplayObject3D for alle de andre elementene.

"kjernen", også en DisplayObject3D deretter startes. Det er rotert 90 grader på sin x-aksen for å gjøre det møter kamera og deretter lagt inn i "atom" DisplayObject3D eksempel.

"kule" variable, også en lokal variabel, blir deretter tildelt en Sphere objekt. En Sphere er en innebygd primitive av PV3D. Med dette tilfellet, vi tildele "null" for det er materialet parameter, "25" for sin radius parameter, og "1" for både segmentsW og segmentsH parametere.

Legg til følgende linjer med kode etter deres init ( ) metode:
privat funksjon createAtom (): void {_do3DArray = []; Var lys: PointLight3D = new PointLight3D; light.x = 300; light.y = 700; light.z = 0; scene.addChild (lys) Var atom: DisplayObject3D = new DisplayObject3D; scene.addChild (atom); Var kjerne: DisplayObject3D = new DisplayObject3D; nucleus.rotationX = 90; atom.addChild (nucleus); Var sfære: Sphere = new Sphere (null, 25, 1, 1); scene.addChild (sfære);}



Trinn 14: Kontroll av Sphere

Gå videre og traff CTRL + Enter på deg tastaturet. Sfæren ser mer ut som et polygon med 5 hjørner. Dette er fordi vi tildelt en for både segmentsW & segmentsH. Den har totalt 5 ekser.

Etter testing, fjerne addChild metoden. Den "kule" ikke vil bli lagt til åstedet, i stedet, vil det bli brukt som guide for å posisjonere nøytroner og protoner som du vil se neste. Legg inn koden under inni createAtom () -metoden etter "sfære" erklæring der du fjernet addChild metode
for (var i: uint = 1; i < sphere.geometry.vertices.length-en, jeg ++). {var np: Sphere = new Sphere (ny GouraudMaterial (lys, _colorArray [i - 1], 0, 0), 23, 12, 9); np.x = sphere.geometry.vertices [i] .x; np.y = sphere.geometry.vertices [i] .Y; np.z = sphere.geometry.vertices [i] .z; nucleus.addChild (np);}

Denne sløyfen gjør er iterere fra 1 til 4 og hopper 0 og 5. En lokal variabel beleilig heter "np" (nøytroner & protoner) opprettes i løpet av hver sløyfe og tildelt en Sphere primitiv. Hver "np" Sphere er tildelt en GouraudMaterial med PointLight3D objektet vi opprettet tidligere for sin lette og colorArray [i - 1] for lightColor parameter. Den "np" Sphere sin andre parameteren er tilordnet en radius på "23", og de siste 2 parametrene for segmentsW &Co. segmentsH som er tildelt "12" & "9" hhv. Vi har råd til høyere mengder av segmenter ettersom det bare er tre kuler inne i kjernen. Resultatet er en mer avrundet Sphere ..

Hver "np" Sphere blir deretter lagt inne i kjernen med koordinatene basert fra den aktuelle iterasjonen er toppunktet inne i "kula" Sphere.



Trinn 15: Atom Elements (2. omgang)

Herfra vi iterere to ganger for å skape elektroner og tilhørende ringer.

Vi først bruke et DisplayObject3D og tilordne den til "do3d". Dette DisplayObject3D vil huse både elektronet og sin ring.

En Sphere primitive deretter opprettet og tildelt "elektron". Dette gjør off-white farget elektroner som går i bane rundt kjernen. Parametrene vi tilordnet for å lage hver elektron er som følger: - en ColorMaterial med en verdi på 0xEFECCA med full tetthet, radien av sfæren med en verdi på 7. De to siste valgfrie parametere vi utelatt defaulted med verdier av 8 &Co. 6.

En Cylinder primitive deretter opprettet for å gjøre ringene. Her har vi bare bruke en WireframeMaterial hvit farge, en alfa på 0,05, en tykkelse på 2, en radius på 300, høyde på 1, segmentsW for 48 å gjøre det virkelig rund og segmentsH av en ettersom høyden er også 1. Den topRadius verdi sitter igjen med -1 som er standardverdien, og vi satt både topFace og bottomFace til "false" "siden vi ikke trenger dem her.

Elektronet blir deretter plassert på 303 så ringen er rett i midten av elektronet.

Vi setter To-egenskapen av ringen materiale til "true" for å gjøre ringen viser både sin indre og ytre skall.

Etter det, do3d sin localRotationZ blir så beregnet ved å dividere 360 ​​med dobbelt så mange ringer, multiplisere med i, og legge til 45 grader til resultatet. Når ringen er opprettet, er det å ligge flatt ut i bunnen av en kopp. Vi multiplisere antall ring med 2 for å rotere sin "z" aksen 0-90 og legge 45 grader for å lage en fin "X" formasjon for de 2 ringene. Vi setter do3d er "y" rotasjon til en tilfeldig posisjon av en full sirkel slik at elektronene vil alle ha en annen stilling når de går i bane rundt kjernen.

De ringer og elektroner blir deretter lagt inne do3d, deretter en referanse legges inn i _do3dArray.

Til slutt do3d legges inne atomet DisplayObject3D

Legg til følgende linjer med kode rett under den avsluttende brakett av den første sløyfen:
for (i = 0;. i < 2; i ++) {var do3d: DisplayObject3D = new DisplayObject3D; Var ring: Cylinder; Var elektron: Sphere; elektron = new Sphere (ny ColorMaterial (0xEFECCA, 1), 7); ring = new Cylinder (ny WireframeMaterial (0xFFFFFF, 0,05, 2), 300, 1, 48, 1, -1, false, false); electron.x = 303; //legge halve størrelsen av elektron ring.material.doubleSided = true; do3d.localRotationZ = 360/4 * i + 45; do3d.localRotationY = 360 * Math.random (); do3d.addChild (ring); do3d.addChild (elektron); _do3DArray.push (do3d); atom.addChild (do3d);}



Trinn 16: Kontrollere Vår Progress

La oss teste den og se om det fungerte. Hvis alt gikk bra, bør du ha et bilde som nedenfor:

Vi er nesten ferdig, vi trenger bare å legge til animasjon nå



Trinn 17:. Kamera Orbit Mode

Inne i init () metode (se trinn 12), før "createAtom ()" metoden samtale, legge til følgende linje med kode:
stage.addEventListener (MouseEvent.CLICK, onStageClick);

Dette vil utløse endring i kameraets modus for bane. Legg til følgende kode under init () -metoden slutt brace:
privat funksjon onStageClick (e: MouseEvent): void {_freeOrbit =! _freeOrbit;}

Alt dette gjør er å veksle _freeOrbit mellom sant eller usant



Trinn 18: bane rundt Atom

onRenderTick () metoden trigges via en Event.ENTER_FRAME. fra BasicView er super -. AbstractView

Inne i dette, super.onRenderTick (hendelse)
er kalt til å gjengi scenen.

DisplayObject3D som holder ringene og elektroner inne _do3dArray blir deretter påført et yaw på 10. Anvendelse yaw til en DisplayObject3D er det samme som do3d.localRotationY + = 10;. Dette er hva som gjør ringene og elektroner i bane rundt kjernen

xDist og yDist bare beregne hvor langt mouseX &.; mousey er fra midten av scenen.

Så har vi den betingede som sjekker den nåværende tilstand av _freeOrbit. Hvis _freeOrbit er sant, beveger kameraet fritt på sine 3 akser. Bevege musen til venstre vil føre til at kameraet letthet mot sin venstre, mens bevege musen til høyre vil gjøre det motsatte. Det samme gjelder for kameraets y-aksen (flytte opp og ned). Når kameraet er nærmest sentrum, er en zoom effekt brukt.

På den annen side, hvis _freeOrbit er falsk, kamera i stedet, går i bane bare fritt på det x og y-aksen og z har en fast stilling. Dette har den virkning at kameraet beveger seg rundt atomet. Ligningen er lettere å forstå hvis du spiller med verdiene av eiendommene. 90 grader påføres _camPitch slik at atomet er helt vendt mot midten av scenen når musen er i midten av scenen; hvis ikke søkt, vil atomet være på sin venstre side når musen er sentrert på scenen

Dette er den samme grunnen til 270 grader påføres _camYaw.; hvis ikke, blir den atom være på sin overside når musen er i midten av scenen. Også, begrenser vi banen til kameraet når du beveger musen opp og ned på scenen. Hvis du fjerner _camPitch grenser, er det et punkt der kameraet blir opp ned, og vil rette seg selv. Dette har en uønsket effekt. Når klassen er ferdig i neste trinn, kan du prøve å fjerne grensene for å se hva som skjer

Legg til følgende linjer med kode etter createAtom () -metoden
styre beskyttet funksjon onRenderTick (event.:. Hendelses = null): void {super.onRenderTick (event); for (var i: uint = 0; i < _do3DArray.length; i ++) {_do3DArray [i] .yaw (10); } Var xDist: Number = mouseX - stage.stageWidth * 0,5; Var yDist: Number = mousey - stage.stageHeight * 0,5; if (_freeOrbit) {camera.x + = (xDist - camera.x * _reachX) * _easeOut; camera.y + = (yDist - camera.y * _reachY) * _easeOut; camera.z + = (-mouseY * _zDist - camera.z) * _reachZ; } Else {_camPitch + = ((-yDist * _rotX) - _camPitch + 90) * _easeOut; _camYaw + = ((xDist * _rotY) - _camYaw + 270) * _easeOut; if (_camPitch < 5) _camPitch = 5; if (_camPitch > 175) _camPitch = 175; camera.orbit (_camPitch, _camYaw); }}



Trinn 19: Teste Fullført Class

Det burde være alt for Helium3Atom klassen. Klassen din skal se ut akkurat 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; public class Helium3Atom strekker BasicView {private Var _do3DArray: Array; private Var _easeOut: Number = 0,3; private Var _reachX: Number = 0,1; private Var _reachY: Number = 0,1; private Var _reachZ: Number = 0,5; private Var _rotX: Number = 0,5; private Var _rotY: Number = 0,5; private Var _camPitch: Antall = 0; private Var _camYaw: Antall = 0; private Var _zDist: Number = 4; private Var _colorArray: Array = [0xCC490B, 0x26D965, 0xCC490B]; private Var _freeOrbit: Boolean = true; offentlig funksjon Helium3Atom () {if (scene) init (); annet addEventListener (Event.ADDED_TO_STAGE, init); startRendering (); } Private funksjon init (e: Hendelses = null): void {removeEventListener (Event.ADDED_TO_STAGE, init); stage.addEventListener (MouseEvent.CLICK, onStageClick); createAtom (); } Private funksjon onStageClick (e: MouseEvent): void {_freeOrbit =! _freeOrbit; } Private funksjon createAtom (): void {_do3DArray = []; Var lys: PointLight3D = new PointLight3D; light.x = 300; light.y = 700; light.z = 0; scene.addChild (lys) Var atom: DisplayObject3D = new DisplayObject3D; scene.addChild (atom); Var kjerne: DisplayObject3D = new DisplayObject3D; nucleus.rotationX = 90; atom.addChild (nucleus); Var sfære: Sphere = new Sphere (null, 25, 1, 1); //usynlig guide for (var i: uint = 1; i < sphere.geometry.vertices.length-1; i ++) {var np: Sphere = new Sphere (ny GouraudMaterial (lys, _colorArray [i - 1], 0, 0), 23, 12, 9); np.x = sphere.geometry.vertices [i] .x; np.y = sphere.geometry.vertices [i] .Y; np.z = sphere.geometry.vertices [i] .z; nucleus.addChild (np); } For (i = 0; i < 2; i ++) {var do3d: DisplayObject3D = new DisplayObject3D; Var ring: Cylinder; Var elektron: Sphere; elektron = new Sphere (ny ColorMaterial (0xEFECCA, 1), 7); ring = new Cylinder (ny WireframeMaterial (0xFFFFFF, 0,05, 2), 300, 1, 48, 1, -1, false, false); electron.x = 303; //legge halve størrelsen av elektron ring.material.doubleSided = true; do3d.localRotationZ = 360/4 * i + 45; do3d.localRotationY = 360 * Math.random (); do3d.addChild (ring); do3d.addChild (elektron); _do3DArray.push (do3d); atom.addChild (do3d); }} Ride beskyttet funksjon onRenderTick (hendelse: Hendelse = null): void {super.onRenderTick (event); for (var i: uint = 0; i < _do3DArray.length; i ++) {_do3DArray [i] .yaw (10); } Var xDist: Number = mouseX - stage.stageWidth * 0,5; Var yDist: Number = mousey - stage.stageHeight * 0,5; if (_freeOrbit) {camera.x + = (xDist - camera.x * _reachX) * _easeOut; camera.y + = (yDist - camera.y * _reachY) * _easeOut; camera.z + = (-mouseY * _zDist - camera.z) * _reachZ; } Else {_camPitch + = ((-yDist * _rotX) - _camPitch + 90) * _easeOut; _camYaw + = ((xDist * _rotY) - _camYaw + 270) * _easeOut; if (_camPitch < 5) _camPitch = 5; if (_camPitch > 175) _camPitch = 175; camera.orbit (_camPitch, _camYaw); }}}}

Hit CTRL + Enter, og du bør få noe som du ser under:



Trinn 20: The Carbon Atom

Ok, la oss nå lage en litt mer komplekse atom. Opprett en ny klasse (hvis du bruker FlashDevelop, se trinn 7 & 8). Den eneste forskjellen skulle være navn, skal det være "CarbonAtom". Den har ganske mye den samme koden, med noen endringer så gå videre og kopiere alt innholdet i Helium3Atom velger alt innholdet inni CarbonAtom og erstatte den med koden kopiert fra Helium3Atom.

La oss begynne å modifisere ting fra toppen. Inne i klassen erklæring der vi har _colorsArray, fjerne den tilordnede array som holder 3 farger.

Deretter gå inn i init () -metoden. Legg inn koden under før createAtom () -metoden samtale:
randomizeColorArray ();

Gå under onStageClick () -metoden og legge denne nye metoden:
privat funksjon randomizeColorArray (): void {_colorArray = []; Var tempArray: Array = []; for (var i: uint = 0; i < 12; i ++) {if (i < 6) Var farge: uint = 0x004080; //blåfargen annet color = 0xA40000; //nyanse av rødt tempArray.push (farge); } While (tempArray.length > 6) {_colorArray.push (tempArray.splice (uint (Math.random () * tempArray.length), 1)); } _colorArray = _colorArray.concat (TempArray);}

Denne metoden randomiserer posisjon 2 farger som er lagret i _colorArray. Dette gjør 6 like deler av rødt & blå tilfeldig plassert inne _colorArray.

Deretter gå inn i createAtom () -metoden akkurat der "kjernen" er instansiert og fjerne "nucleus.rotationX = 90" oppdrag.

Gå ned 2 linjer og endre sfære forekomst parametere for å "var sfære: Sphere = new Sphere (null, 60, 4, 4);". Vi trenger en større Sphere med flere topp-punkt for å holde alle 12 protoner og nøytroner

Nå går inni den første sløyfen der "np" Sphere er instansiert og fjerne de siste 2 parametere av 12 &.; 9. Dette setter segmentsW & segmentsH til standardverdiene, 8 & . 6, henholdsvis, og reduserer hit på ytelsen

Neste, i den andre loop, endre mengden av sløyfer fra 2 til 6. Gå rett under elektron oppretting og erstatte følgende kode:
ring = new Cylinder (ny WireframeMaterial (0xFFFFFF, 0,05, 2), 300, 1, 48, 1, -1, false, false); electron.x = 303;

med:
hvis (i == 1 || jeg == 5) {ring = new Cylinder (ny WireframeMaterial (0xFFFFFF, 0,05, 2), 450, 1, 48, 1, -1, false, false); electron.x = 453;} else {ring = new Cylinder (ny WireframeMaterial (0xFFFFFF, 0,05, 2), 610, 1, 48, 1, -1, false, false); electron.x = 613;}

Det er her de to skallene (ringer) er opprettet for CarbonAtom

Nå går under der du ser "ring.material.doubleSided = true" oppdrag og erstatte. koden:
do3d.localRotationZ = 360/4 * i + 45;

med:
do3d.localRotationZ = 360/12 * i + 180;

Dette gir de 6 elektroner riktig plassering for fullt dekker kjernen. Det er alt. Lagre filen før testing



Trinn 21: Teste CarbonAtom

CarbonAtom klasse skal se ut akkurat slik ut:.
Pakke {import flash.display.StageQuality; 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; public class CarbonAtom strekker BasicView {private Var _do3DArray: Array; private Var _easeOut: Number = 0,3; private Var _reachX: Number = 0,1; private Var _reachY: Number = 0,1; private Var _reachZ: Number = 0,5; private Var _rotX: Number = 0,5; private Var _rotY: Number = 0,5; private Var _camPitch: Antall = 0; private Var _camYaw: Antall = 0; private Var _zDist: Number = 4; private Var _colorArray: Array; private Var _freeOrbit: Boolean = true; offentlig funksjon CarbonAtom () {if (scene) init (); annet addEventListener (Event.ADDED_TO_STAGE, init); startRendering (); } Private funksjon init (e: Hendelses = null): void {removeEventListener (Event.ADDED_TO_STAGE, init); stage.addEventListener (MouseEvent.CLICK, onStageClick); randomizeColorArray (); createAtom (); } Private funksjon onStageClick (e: MouseEvent): void {_freeOrbit =! _freeOrbit; } Private funksjon randomizeColorArray (): void {_colorArray = []; Var tempArray: Array = []; for (var i: uint = 0; i < 12; i ++) {if (i < 6) Var farge: uint = 0x004080; annet color = 0xA40000; tempArray.push (farge); } While (tempArray.length > 6) {_colorArray.push (tempArray.splice (uint (Math.random () * tempArray.length), 1)); } _colorArray = _colorArray.concat (TempArray); } Private funksjon createAtom (): void {_do3DArray = []; Var lys: PointLight3D = new PointLight3D; light.x = 300; light.y = 700; light.z = 0; scene.addChild (lys) Var atom: DisplayObject3D = new DisplayObject3D; scene.addChild (atom); Var kjerne: DisplayObject3D = new DisplayObject3D; atom.addChild (nucleus); Var sfære: Sphere = new Sphere (null, 60, 4, 4); for (var i: uint = 1; i < sphere.geometry.vertices.length-1; i ++) {var np: Sphere = new Sphere (ny GouraudMaterial (lys, _colorArray [i - 1], 0, 0), 23); np.x = sphere.geometry.vertices [i] .x; np.y = sphere.geometry.vertices [i] .Y; np.z = sphere.geometry.vertices [i] .z; nucleus.addChild (np); } For (i = 0; i < 6; i ++) {var do3d: DisplayObject3D = new DisplayObject3D; Var ring: Cylinder; Var elektron: Sphere; elektron = new Sphere (ny ColorMaterial (0xEFECCA, 1), 7); if (i == 1 || jeg == 5) {ring = new Cylinder (ny WireframeMaterial (0xFFFFFF, 0,05, 2), 450, 1, 48, 1, -1, false, false); electron.x = 453; } Else {ring = new Cylinder (ny WireframeMaterial (0xFFFFFF, 0,05, 2), 610, 1, 48, 1, -1, false, false); electron.x = 613; } Ring.material.doubleSided = true; do3d.localRotationZ = 360/12 * i + 180; do3d.localRotationY = 360 * Math.random (); do3d.addChild (ring); do3d.addChild (elektron); _do3DArray.push (do3d); atom.addChild (do3d); }} Ride beskyttet funksjon onRenderTick (hendelse: Hendelse = null): void {super.onRenderTick (event); for (var i: uint = 0; i < _do3DArray.length; i ++) {_do3DArray [i] .yaw (10); } Var xDist: Number = mouseX - stage.stageWidth * 0,5; Var yDist: Number = mousey - stage.stageHeight * 0,5; if (_freeOrbit) {camera.x + = (xDist - camera.x * _reachX) * _easeOut; camera.y + = (yDist - camera.y * _reachY) * _easeOut; camera.z + = (-mouseY * _zDist - camera.z) * _reachZ; } Else {_camPitch + = ((-yDist * _rotX) - _camPitch + 90) * _easeOut; _camYaw + = ((xDist * _rotY) - _camYaw + 270) * _easeOut; if (_camPitch < 5) _camPitch = 5; if (_camPitch > 175) _camPitch = 175; camera.orbit (_camPitch, _camYaw); }}}

Åpne hoveddokumentet klasse og erstatte koden:
Var helium3: Helium3Atom = new Helium3Atom; addChild (helium3);

med:
Var karbon: CarbonAtom = new CarbonAtom; addChild ( ny CarbonAtom);

Du burde se noe som forhåndsvisningen når du tester filmen



Konklusjon

Papervision er en veldig rett frem og kraftig verktøy.. Eksperimentere med det, og du vil komme opp med alle slags kule 3D-effekter som spenner fra enkle simuleringer til avanserte grensesnitt.

Også har jeg laget en annen versjon av karbonatomet heter CarbonAtom2 som også er inkludert med kilde nedlasting. At man har en mer realistisk elektron atferd, sjekk den ut! =)

Som alltid, for noen kommentarer, forslag eller kommentarer, legg igjen en kommentar i kommentarfeltet. Takk for lesing!