Now, in the last lesson, we looked at using Apple's new tool which is USDZ converter in the command 1
line to convert a 3D model into the latest file format which is the USDZ format. 2
And we now have our 3D model of Eevee ready to go and ready to incorporate into ARKit project. 3
We're going to place it under our art.scnassets folder. 4
So in order to do that, we're going to bring up the folder that contains the eevee.usdz file, 5
and then we're just gonna drag and drop it into our art.scnassets folder. And now, it's incorporated 6
in here and it's now ready for use inside our project. 7
What you see on the left here is that there are three nodes that make up this Eevee. And the three of 8
them are variously the eyes, the body, and the mouth. 9
And together, they comprise this entire 3D model. 10
So the first thing that we're going to do is we're going to convert this USDZ file format to a SCN 11
file so that we can use it with our SceneKit framework which we're using to render our object 12
in ARKit. So selecting this file, go to Editor, and click on convert to SceneKits scene file format, and go ahead 13
and click Convert. 14
And now, our Eevee is now available as a scene file, just as we had in the original example project where 15
they had the plane that came with the template project. 16
We now have our Eevee as the same file format. And you can see over here on the left that we've got three 17
nodes: one that represents the eyes and the textures for the eyes, another that is for the body, and the 18
final one which is for the mouth. And we want to combine all three of these into a single node. 19
So we're going to select all three and click Flatten Selection. And now, we only have a single node that 20
is the entirety of the Eevee. 21
So if you click on that node, you can rename it to something that makes a little bit more sense, rather 22
than mesh one or mesh two. And we can rename it simply Eeevee. 23
Now, inside the navigator, you can obviously rotate it around or zoom, and pan, and if you ever lose your 24
Eevee for any reason, just double click on the node and it'll come back to you in the center of the screen. 25
Now, the other thing that we need to do is, at the moment, our Eevee is gigantic. 26
It's about four meters in width, three meters in height, and four meters in depth. 27
So it's a bit too big. 28
So let's scale it down to 0.05 for all three of these dimensions, and double click 29
to bring it into the center. 30
And I've had to play around with the size and the scale of this particular model, and it seems like the 31
0.05 cale brings it to quite a nice size in comparison with our Pokémon card. 32
So, now that we've done everything we need to do with our Eevee model, it's time to head back into the 33
ViewController, and we're going to create our Eevee on top of the card. So as we know, the planeNode 34
is the 3D objects that gets placed on top of the image that's detected, which is the Pokémon card, 35
and it's on top of that plane that we want to place our Eevee 3D model. So at the end of this "if let" statement, 36
let's create a new scene and let's call it pokeScene, 37
and this is going to be a SCNScene which is created by using a file that is named "art.scnassets/ 38
eevee.scn." 39
So this is referring to this scene file here and this is the one that we're going to load up and we're 40
going to present onto our plane here. Now, this again will be a optional because there might not be an 41
eevee.scn file at the art.scnassets folder. 42
Now, because we can see it right here and it definitely exists, 43
you can either choose to force unwrap this, or if you want to play it safe, simply create another "if let" 44
and we can use optional binding to make sure that we definitely get a pokeScene that gets created. 45
Now, inside this "if let," we're going to create a node that is going to represent the Eevee. So we'll call 46
it pokeNode and it's going to be equal to pokeScene.rootNode.childNodes.first. 47
And this is one of the reasons why it makes it easier to merge all three of those nodes into one because 48
the first node is simply the Eevee in its entirety. 49
And this makes it easier to work with it when we're using code. 50
So, again, this might be equal to nil, so therefore, it is an optional because there might not be any 51
childNodes in the rootNode of the pokeScene. 52
But as we know, there is, you can either choose to, again, force unwrap this object and specify and override 53
the safety check, or you can, again, create a "if let" statement, and we're kind of getting into the 54
"if let" pyramid kind of scenario which happens very often when we're using Swift. but nonetheless, it does 55
work quite well. 56
So, now that we've got our pokeNode, and we know that it definitely contains a childNode of some sort, 57
namely, our Eevee model, then we can add this pokeNode to our planeNode which already exists. 58
So we can say planeNode.addChildNode and the node is going to be the pokeNode. So that's all 59
we need to do to add our Pokémon to the planeNode which is attached to the position and size of the 60
image that was detected. 61
So, now we can give this a run and see whether if we manage to render our Eevee onto the position of the 62
card. 63
So here's my app running and when I flip over the image, it gets recognized and my Eevee shows up on screen. 64
Now, because my card's quite shiny and when it has glare, the image is very difficult to see for the camera 65
and it loses the image recognition. 66
So you can see when I try to face this towards the window, you can see that there's a brief moment when 67
the image is not so clear and I lose my model. 68
But if I face it away from the glare, you can see that that image is quite stable. 69
So this is something that you have to take into account when you are designing these apps for use with 70
a particular image. 71
So there is my Eevee. And it's kind of like being bisected by my card which is a bit gruesome. 72
In order for it to be sitting on top of the card, then I have to, again, rotate it in the same way that 73
I wrote it my plane previously. 74
Now, another thing that you notice is that my Pokémon looks a little bit dark. It doesn't look like 75
it's been lit. 76
My model doesn't seem to have a light source. 77
So let's head back into our code and see if we can fix that. 78
Now, adding lighting to the scene in ARKit is incredibly easy. 79
All we need to do is just go up to our viewDidLoad and tap into our sceneView, and toggle the setting 80
for autoenablesDefaultLighting, and this allow SceneKit to automatically adds light to the scene. 81
And if we set that to true, then it will be switched on. 82
And when I run this app again, you can see the difference. So you can see now my Eevee that's being rendered 83
is much brighter and it's more easy to see all of its features. 84
Now, there's just one problem, though. 85
It's kind of sitting in the middle of my card. And what I really wanted to do is to sit on top of my 86
card so that when I have my card flat, it's as if it's standing on the card. Because at the moment, the 87
way that it looks is a bit weird. 88
It's kind of like my Pokémon has fallen over and needs help or something, whereas I kind of want it to 89
be standing up straight. 90
So we've already done this previously when we rotated the plane that we added to the card. 91
So as a challenge, I want you to figure out if you can rotate the 3D model so that its feet are standing 92
flat on the card. 93
So pause the video now and give that a go. 94
All right. 95
So how did that go? 96
So previously, our plane was standing at 90 degrees to the card and we needed to rotate it anticlockwise 97
by 90 degrees on the x-axis, so that it will be flush with the card. 98
Now, we almost have the opposite problem 99
in this case. Our Pokémon is standing as if it's flat with the card. 100
But we need it to stand upright, 101
so we actually need to rotate it clockwise on the x axis by, again, 90 degrees. 102
We just need to mess with this line. So we can use this line of code as a base and we can change our 103
pokeNode, so that it'll be rotated. 104
So let's tap into the pokeNode and let's, again, change the eulerAngles, and we're changing it on the 105
x axis, and we're going to set it equal to positive pi divided by 2. And this will rotate it clockwise 106
by 90 degrees on the x axis. And it should, hopefully, make our Pokémon stand on the card. And there you have 107
it. 108
So our Pokémon is now standing on top of the card and it's got its feet firmly planted on the card. 109
And when I place it onto the ground, you can see that you can move it around, and it looks like as if 110
I've now got a Pokémon that's standing on my card which is pretty neat. 111
Now, we've pretty much achieved all that we need to do. But in the next lesson, we're going to be looking 112
at how we can add another Pokémon, 113
so to be able to simultaneously detect two images and also render two models onto the respective image 114
so that we can have many Pokémons on the scene at once. 115
So for all of that and more, I'll see you on the next lesson.