All right. 1
So in the last episode, we refreshed ourselves on high school math including how to use the Pythagoras 2
theorem in 3D space and we calculated the distance between our starting and endpoints in our real world 3
3D space. 4
So, now the goal of this lesson is to replace this print statement which is pretty boring you know printing 5
out into a place where no user can see. 6
And instead, we're going to be rendering this distance as a 3D text inside the scene. So let's get started. 7
Now, the first thing to do is delete this print statement and, instead, I'm going to call a method called 8
updateText, and I'm going to pass in the text that we want to show up on screen which is, of course, going 9
to be the absolute value of our distance. 10
So, so now we have to go and actually create this function called updateText and it's going to have 11
a single string as a parameter. 12
All right. 13
So inside here, we're going to create a text Geometry. 14
So, so far you've seen us creating box geometries, sphere geometries, 15
and now we're going to create a textGeometry. 16
So let textGeometry = SCNText, and we're going to use the overload that accepts a string and 17
as well as allowing us to specify the extrusion depths, 18
so that's the depth of our 3D text. 19
So the string is easy. 20
That's gonna be the text that we pass in from into this method. And the extrusion depth, 21
I'm going to say, maybe, let's say 1.0. 22
You can always run this and check it out and see if you're happy with the results or not. 23
But from my testing, this works quite well. 24
So, now that we've got our textGeometry, we're going to specify its material. So we can go through the 25
whole process of creating material, then setting the material, diffuse.content, setting the materials 26
off the dotGeometry, et cetera, or if we know that we're only going to have one material for our geometry, 27
we can simply say textGeometry.firstMaterial, and this is simply the first material that's attached 28
to the geometry. And first material.diffuse.contents = UIColor.red. 29
I mean, you can make it whatever color you like, but I'm just going to keep with the red theme for now. 30
And then, we're going to create a textNode from this textGeometry. 31
So let textNode = SC NNode, 32
and the geometry is, of course, textGeometry. And then, we're going to give it a position, so textNode 33
.position = SCNVector 3, 34
and let's scroll down to select the CGFloat one and I'm going to specify its position. 35
So I'm going to say zero, 36
so centered on the horizontal x axis, 0.01, 37
so just a little bit higher up on the y axis. 38
And then, for the z, I'm going to say, maybe about 10 centimeters in front of me. 39
All right. 40
And then, one extra thing that I'm going to change is the scale of the textNode. I want to scale it down 41
a bit because I've noticed that it's actually a bit too big from testing. 42
So we're going to make this only 1 percent of its current size. 43
So we're getting to, again, specify a SVNVector3. And on the x, we're going to say 0.01. 44
y is 0.01. z is 0.01. 45
So this just reduces the size of our 3D text down to 1 percent of its original size in all three dimensions. 46
And last but not least, we're going to add our textNode into our scene, so SCNView.scene. 47
rootNode.addChildNode, and it's going to be textNode. 48
All right,let's run it and test it. 49
All right. 50
So that was not bad, but you might notice that you have to hunt around a bit for the text and it's a 51
little bit all over the place. 52
So why don't we specify the position of the text, instead of using just a set coordinate which is relative 53
to the camera position 54
when this method gets called? Why don't we use the position of our endpoint so that we can show it just 55
above the endpoint? 56
So to do that, we're going to add another input to our updateText and we're going to call it atPosition, 57
and it's going to be a SCNVector3. 58
And that position is, of course, going to be the end position 59
So, now when we call updateText, not only do we give it what text to show, but we also tell it where we 60
want to show it. 61
And it's just telling me that I'm missing a comma there, 62
Ss that should work just fine. 63
And now, all we have to do is just edit this line of code so that instead of specifying a hardcoded position, 64
we're going to give it our endpoint position. 65
And as you can see, at the moment, both the internal and external parameter names are called atPosition, 66
so I would have to write this line like atPosition.x which is a little bit weird for me, 67
I think. I would rather change that to position as the internal parameter which makes it easier to figure 68
out what's going on here. 69
So position.x, 70
position,y, 71
and maybe just a little bit higher like around a centimeter higher, above the endpoint, so that it's 72
not banged on the same point as the endpoint. 73
And then z is going to be, again, 74
position.z. 75
So, of course, this is personal preference, but to me, this looks better than atPosition.x, but feel free 76
to do whichever one you prefer. 77
All right. 78
So let's give it a spin again and see if that worked. 79
And now, we have our text nicely lined up with our endpoint and raised ever so slightly higher, 80
so that it's really, really easy to see. 81
So in the next lesson, we're going to tidy up our code and also tidy up our logic. Because at the moment, 82
if you try and add a third dot, the user experience might not be what you expected or what you want it 83
to be. 84
So I'll see you on the next lesson where we fix that. 85
So see you there.