Share
Inntil nylig var Augmented Reality en av de "futuristiske" ideene som ble skildret i science-fiction utopier. Men tiden er kommet når man bygger en AR-app, har blitt en realitet, og du kan ha en i lommen.
I denne opplæringen lærer du hvordan du tar Mars, den nærmeste planet til jorden, inn i ditt eget rom.
Før du begynner, sørg for at du har den nyeste versjonen av Xcode installert på Mac-en din. Dette er veldig viktig fordi ARKit bare vil være tilgjengelig på Xcode 9 eller nyere. Du kan sjekke din versjon ved å åpne Xcode og gå til Xcode > Om Xcode i den øverste verktøylinjen.
Hvis din versjon av Xcode er eldre enn Xcode 9, kan du gå til Mac App Store og oppdatere den gratis. Hvis du ikke allerede har Xcode, kan du også laste ned og installere den gratis.
Når du har sørget for at du har riktig versjon av Xcode, må du lage et nytt Xcode-prosjekt.
Gå videre og åpne Xcode og klikk Opprett et nytt Xcode-prosjekt.
Du kan være vant til å lage en Enkeltvisningsprogram, men for denne opplæringen må du velge en Augmented Reality App og klikk deretter neste.
Du kan navngi prosjektet ditt noe du vil, men jeg vil navngi min ARPlanets. Du vil også legge merke til at det er et alternativ nederst der du kan velge mellom SceneKit, SpriteKit og Metal.
Dette er alle Apples spillrammer, og for formålet med opplæringen vil vi bruke SceneKit fordi vi skal bruke 3D-objekter.
Gå videre og velg SceneKit hvis den ikke allerede er valgt. Skjermen din bør se slik ut:
Siden Xcode Simulator ikke har et kamera, må du plugge inn iPhone. Dessverre, hvis du ikke har en iPhone, må du låne en for å kunne følge med denne opplæringen (og for andre kamerarelaterte apps). Hvis du allerede har en iPhone koblet til Xcode, kan du hoppe videre til neste trinn.
En nydelig ny funksjon i Xcode 9 er at du kan feilsøke appen din på en enhet på en trådløs måte, så la oss ta deg tid til å sette opp det nå:
Velg øverst på menylinjen Vindu > Enheter og simulatorer. Kontroller at i vinduet som vises enheter er valgt øverst.
Nå, koble til enheten din med en lynledning. Dette bør gjøre at enheten din vises i venstre rute i Enheter og simulatorer vindu. Bare klikk på enheten, og merk av Koble via nettverk eske.
Du vil nå kunne feilsøke på denne iPhone på alle fremtidige apps.
Nå er oppsettet ditt fullført. Du bør ha en fungerende ARKit app, og du kan teste den på iPhone som du nettopp har koblet til. Øverst til venstre i Xcode, ved siden av Løpe og Stoppe knapper, velg din enhet fra simulator-rullegardinmenyen.
Jeg har valgt Vardhans iPhone, men du må velge din spesifikke enhet.
Nå er du ferdig med å lage startbildeprosjektet ditt, og du bør se et virtuelt romskip vises i din verden når du klikker Løpe. Slik ser det ut:
Ok, vi er endelig klare til å dykke dypere og faktisk skrive noen kode. Du har allerede en fungerende ARKit app, så la oss bygge på det og gjøre noe kul.
Hvis du ser på mappen som heter art.scnassets, du vil legge merke til at den inneholder to ting allerede: romskipet noden og dens tekstur. I dette eksemplet har Apple opprettet et tomt romskipobjekt og i utgangspunktet brukt et bildeoverlegg for å danne farger og former.
På samme måte vil vi skape vår egen sfære og legge et bilde av overflaten av Mars for å skape en nøyaktig representasjon av Mars.
ARKit-malen i Xcode kommer med en gjeng med forhåndskrevet kode for å få romskipet til å vises, så la oss ta litt tid til å utforske hva alt betyr og hvorfor det fungerer.
Øverst på filen ser du følgende:
importere UIKit import SceneKit import ARKit
På toppen, UIKit blir importert, og vi trenger det fordi hovedvisningen vil være a UIViewController. Husk når du valgte SceneKit i prosjektoppsettet? Det blir importert rett sammen med ARKit nedenfor. Dette er alle bibliotekene som denne filen bruker.
Under dette vil du se en klassedeklarasjon og følgende linje av kode:
@IBOutlet var sceneView: ARSCNView!
Vi trenger ikke å gå for mye i dybden her, men dette er en Augmented Reality SceneKit-visning som er koblet via en @IBOutlet til storyboardet. Dette er hovedvisningen for alt vi skal plassere i denne opplæringen.
Går ned litt lenger viewDidLoad () metoden skal se slik ut:
overstyr func viewDidLoad () super.viewDidLoad () // 1 sceneView.delegate = self // 2 sceneView.showsStatistics = true // 3 la scene = SCNScene (oppkalt: "art.scnassets / ship.scn")! // 4 sceneView.scene = scene
Her er hva denne koden gjør:
Accentsconagua
sceneView det var knyttet til storyboardet? Vi tilordner sin delegat til vår ViewController fordi den er i samsvar med ARSCNViewDelegate protokollen.ship.scn fil (3D-rendering) i mappen som heter art.scnassets. I denne linjen, en SCNScene, som er et hierarki av noder (i dette tilfellet romskipet og dets kamera) blir opprettet.sceneView, som er koblet til storyboardet med en @IBOutlet.Vi dekker ikke hver eneste linje i ViewController.swift fil, men det vi dekker, er viktig for deg å vite for å følge med opplæringen og bygge dine egne ARKit apps i fremtiden.
Siden vi skal lage en planet i stedet for et romskip i vår ARKit-app, må du fjerne den.
Fjern først følgende to filer fra art.scnassets mappe: ship.scn og texture.png. Vi vil ikke trenge disse lenger.
Deretter går du tilbake til din ViewController.swift fil og finn følgende linje av kode:
// Opprett en ny scene la scenen = SCNScene (oppkalt: "art.scnassets / ship.scn")!
Siden vi ikke lenger har ship.scn fil, vil denne koden føre til at vår app krasjer, spesielt fordi utropstegnet på slutten av denne linjen tvinger det. Siden vi ikke skal bruke en .SCN fil for vårt skip, det er ikke nødvendig å initialisere SCNScene med en streng.
Bare erstatt denne koden med følgende:
// Opprett en ny scene la scene = SCNScene ()
Hvis du kjører appen din, ser du virkeligheten, men den blir ikke utvidet. Med andre ord vil romskipet være borte.
Litt under viewDidLoad (), opprett en funksjonsdeklarasjon som følger:
// Oppretter planet Mars-funksjonen createMars () // Gjør ting
Virker det ikke noe meningsløst å skape noe og ikke returnere det? I funksjonen må vi returnere en SCNNode. Mens vi er i det, la oss også ta inn en parameter for planetenes plassering.
Når du har gjort disse endringene, må metoden din se slik ut:
// Skaper planet Mars funksjon createMars (på posisjon: SCNVector3) -> SCNNode // Gjør ting
Siden Mars er sfærisk, la oss lage en sfære for å være den grunnleggende formen til Mars. Du kan velge å gjøre dette direkte i viewDidLoad () metode, men vi bruker funksjonen vi erklærte over.
Inne i funksjonen din, sett inn følgende kode:
// 1 la sfære = SCNSphere (radius: 0.4) // 2 la node = SCNNode (geometri: sfære) // 3 node.position = posisjon // 4 returknutepunkt
Her er hva denne koden gjør:
SCNSphere med en radius av 0.4. SCNNode som kan returneres til funksjonsanropssiden.createMars () funksjon, bruker vi parameteren her til å angi posisjonen til SCNNode som vi opprettet på forrige linje.SCNNode til funksjonen.Så langt har vi laget en sfære, men for å få det til å virke i det hele tatt, må vi legge det til vår nåværende scene. For å gjøre dette, legg til disse tre kodelinjene til din viewDidLoad () metode:
// 1 la posisjon = SCNVector3 (0, 0, -3) // 2 la mars = createMars (på: posisjon) // 3 scene.rootNode.addChildNode (mars)
Dette er hva koden gjør:
SCNVector3 (som er en tredimensjonal representasjon av et punkt i rommet) som skal sendes inn i createMars () funksjon som vi opprettet tidligere.createMars () og passerer i posisjonen fra forrige variabel. Deretter tilordner vi noden som denne funksjonen returnerer til en variabel som kalles mars.mars til scenen som ble levert i prøveprosjektet fra Apple.Wow! Vi har allerede gjort ganske mye fremgang. Hvis du kjører appen din nå, bør du kunne se at det er en hvit kule et sted i din verden. Hvis du prøver å se på det fra andre vinkler, vil det bare se ut som en sirkel, men det er fordi vi ikke har noen teksturer eller skygger ennå. Slik ser det ut:
Nå som vi har en kule på plass, må vi legge til en tekstur slik at den ser ut som den faktiske planeten, Mars. Jeg søkte bare på et bilde av Mars overflate, og jeg vil bruke det, men du kan bruke et hvilket som helst bilde du vil ha (hvis du vil blande opp ting, kan du til og med bruke teksturer av andre planeter).
For å bruke bildet du nettopp fikk, må du plassere det i to mapper: art.xcassets og art.scnassets. En annen ting å merke seg: Hvis du vil kunne kopiere og lime inn denne koden i prosjektet ditt, må du nevne bildet ditt mars_texture.png, og det må være en PNGfil.
Legg til følgende kode før komme tilbake linje i funksjonen createMars ():
la material = SCNMaterial () material.diffuse.contents = #imageLiteral (ressursnavn: "mars_texture.png") sphere.firstMaterial = materiale
Først oppretter vi en SCNMaterial den SceneKit kan senere bruke til å vikle rundt sfæren, og vi tilordner den til en konstant navngitt materiale. Da partikler vi det valgte bildet og fordeler det til innholdet i standardinnstillingen SCNMaterial. Med andre ord, materiale konstant nå inneholder dette bildet som skal brukes som en SCNMaterial. Endelig bryter vi sfæren med SCNMaterial som vi laget tidligere.
Du er nå ferdig, og hvis du kjører appen din, kan du se Mars på rommet ditt! Du kan til og med gå rundt den og se den fra forskjellige vinkler. Slik ser det ut:
Nå kan du se hvor lett det er å implementere Augmented Reality i appen din. Du kan få fantasien til å bli vill med det og til og med lage fullspill. Hvis du har mer tekniske tredimensjonale gjengivelsesferdigheter, kan du også integrere dette med dine ferdigheter.
Jeg håper denne opplæringen var informativ og du likte det!
