0
1
00:00:00,480 --> 00:00:00,710
All right.
1

2
00:00:00,750 --> 00:00:06,030
So in the last episode, we refreshed ourselves on high school math including how to use the Pythagoras
2

3
00:00:06,030 --> 00:00:12,690
theorem in 3D space and we calculated the distance between our starting and endpoints in our real world
3

4
00:00:12,720 --> 00:00:13,790
3D space.
4

5
00:00:13,800 --> 00:00:20,610
So, now the goal of this lesson is to replace this print statement which is pretty boring you know printing
5

6
00:00:20,610 --> 00:00:23,310
out into a place where no user can see.
6

7
00:00:23,310 --> 00:00:33,550
And instead, we're going to be rendering this distance as a 3D text inside the scene. So let's get started.
7

8
00:00:33,830 --> 00:00:41,030
Now, the first thing to do is delete this print statement and, instead, I'm going to call a method called
8

9
00:00:41,090 --> 00:00:46,670
updateText, and I'm going to pass in the text that we want to show up on screen which is, of course, going
9

10
00:00:46,670 --> 00:00:50,930
to be the absolute value of our distance.
10

11
00:00:50,950 --> 00:00:58,700
So, so now we have to go and actually create this function called updateText and it's going to have
11

12
00:00:58,850 --> 00:01:02,030
a single string as a parameter.
12

13
00:01:02,030 --> 00:01:02,300
All right.
13

14
00:01:02,330 --> 00:01:05,790
So inside here, we're going to create a text Geometry.
14

15
00:01:05,810 --> 00:01:10,520
So, so far you've seen us creating box geometries, sphere geometries,
15

16
00:01:10,580 --> 00:01:12,820
and now we're going to create a textGeometry.
16

17
00:01:12,890 --> 00:01:23,750
So let textGeometry =  SCNText, and we're going to use the overload that accepts a string and
17

18
00:01:23,750 --> 00:01:27,620
as well as allowing us to specify the extrusion depths,
18

19
00:01:27,620 --> 00:01:30,240
so that's the depth of our 3D text.
19

20
00:01:30,320 --> 00:01:31,760
So the string is easy.
20

21
00:01:31,760 --> 00:01:37,730
That's gonna be the text that we pass in from into this method. And the extrusion depth,
21

22
00:01:37,730 --> 00:01:41,390
I'm going to say, maybe, let's say 1.0.
22

23
00:01:41,390 --> 00:01:46,100
You can always run this and check it out and see if you're happy with the results or not.
23

24
00:01:46,400 --> 00:01:48,880
But from my testing, this works quite well.
24

25
00:01:50,210 --> 00:01:56,390
So, now that we've got our textGeometry, we're going to specify its material. So we can go through the
25

26
00:01:56,390 --> 00:02:02,120
whole process of creating material, then setting the material, diffuse.content, setting the materials
26

27
00:02:02,150 --> 00:02:07,310
off the dotGeometry, et cetera, or if we know that we're only going to have one material for our geometry,
27

28
00:02:07,310 --> 00:02:13,940
we can simply say textGeometry.firstMaterial, and this is simply the first material that's attached
28

29
00:02:14,030 --> 00:02:22,900
to the geometry. And first material.diffuse.contents = UIColor.red.
29

30
00:02:22,970 --> 00:02:27,500
I mean, you can make it whatever color you like, but I'm just going to keep with the red theme for now.
30

31
00:02:28,430 --> 00:02:32,350
And then, we're going to create a textNode from this textGeometry.
31

32
00:02:32,420 --> 00:02:37,680
So let textNode = SC NNode,
32

33
00:02:38,660 --> 00:02:47,300
and the geometry is, of course, textGeometry. And then, we're going to give it a position, so textNode
33

34
00:02:47,390 --> 00:02:50,290
.position = SCNVector 3,
34

35
00:02:50,330 --> 00:03:00,400
and let's scroll down to select the CGFloat one and I'm going to specify its position.
35

36
00:03:00,410 --> 00:03:02,200
So I'm going to say zero,
36

37
00:03:02,240 --> 00:03:06,850
so centered on the horizontal x axis, 0.01,
37

38
00:03:06,850 --> 00:03:11,840
so just a little bit higher up on the y axis.
38

39
00:03:12,080 --> 00:03:17,470
And then, for the z, I'm going to say, maybe about 10 centimeters in front of me.
39

40
00:03:17,800 --> 00:03:18,240
All right.
40

41
00:03:18,260 --> 00:03:23,570
And then, one extra thing that I'm going to change is the scale of the textNode. I want to scale it down
41

42
00:03:23,570 --> 00:03:28,760
a bit because I've noticed that it's actually a bit too big from testing.
42

43
00:03:28,760 --> 00:03:33,180
So we're going to make this only 1 percent of its current size.
43

44
00:03:33,290 --> 00:03:40,190
So we're getting to, again, specify a SVNVector3. And on the x, we're going to say 0.01.
44

45
00:03:40,190 --> 00:03:43,520
y is 0.01. z is 0.01.
45

46
00:03:43,520 --> 00:03:53,000
So this just reduces the size of our 3D text down to 1 percent of its original size in all three dimensions.
46

47
00:03:53,210 --> 00:04:01,700
And last but not least, we're going to add our textNode into our scene, so SCNView.scene.
47

48
00:04:01,700 --> 00:04:08,230
rootNode.addChildNode, and it's going to be textNode.
48

49
00:04:08,400 --> 00:04:10,500
All right,let's run it and test it.
49

50
00:04:29,320 --> 00:04:29,570
All right.
50

51
00:04:29,600 --> 00:04:35,450
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

52
00:04:35,450 --> 00:04:37,120
little bit all over the place.
52

53
00:04:37,280 --> 00:04:44,570
So why don't we specify the position of the text, instead of using just a set coordinate which is relative
53

54
00:04:44,810 --> 00:04:46,640
to the camera position
54

55
00:04:46,640 --> 00:04:53,120
when this method gets called? Why don't we use the position of our endpoint so that we can show it just
55

56
00:04:53,120 --> 00:04:54,650
above the endpoint?
56

57
00:04:54,770 --> 00:05:03,140
So to do that, we're going to add another input to our updateText and we're going to call it atPosition,
57

58
00:05:04,190 --> 00:05:07,120
and it's going to be a SCNVector3.
58

59
00:05:07,730 --> 00:05:13,790
And that position is, of course, going to be the end position
59

60
00:05:19,630 --> 00:05:25,330
So, now when we call updateText, not only do we give it what text to show, but we also tell it where we
60

61
00:05:25,330 --> 00:05:26,060
want to show it.
61

62
00:05:26,140 --> 00:05:28,780
And it's just telling me that I'm missing a comma there,
62

63
00:05:28,810 --> 00:05:31,160
Ss that should work just fine.
63

64
00:05:31,390 --> 00:05:37,540
And now, all we have to do is just edit this line of code so that instead of specifying a hardcoded position,
64

65
00:05:37,840 --> 00:05:40,800
we're going to give it our endpoint position.
65

66
00:05:40,840 --> 00:05:46,480
And as you can see, at the moment, both the internal and external parameter names are called atPosition,
66

67
00:05:46,480 --> 00:05:53,370
so I would have to write this line like atPosition.x which is a little bit weird for me,
67

68
00:05:53,380 --> 00:05:59,170
I think. I would rather change that to position as the internal parameter which makes it easier to figure
68

69
00:05:59,170 --> 00:06:00,370
out what's going on here.
69

70
00:06:00,880 --> 00:06:05,280
So position.x, 
70

71
00:06:05,390 --> 00:06:06,280
position,y,
71

72
00:06:06,340 --> 00:06:12,340
and maybe just a little bit higher like around a centimeter higher, above the endpoint, so that it's
72

73
00:06:12,340 --> 00:06:14,680
not banged on the same point as the endpoint.
73

74
00:06:14,980 --> 00:06:17,400
And then z is going to be, again,
74

75
00:06:17,400 --> 00:06:20,320
position.z.
75

76
00:06:20,380 --> 00:06:27,010
So, of course, this is personal preference, but to me, this looks better than atPosition.x, but feel free
76

77
00:06:27,010 --> 00:06:28,530
to do whichever one you prefer.
77

78
00:06:29,920 --> 00:06:30,190
All right.
78

79
00:06:30,220 --> 00:06:33,940
So let's give it a spin again and see if that worked.
79

80
00:06:41,350 --> 00:06:47,290
And now, we have our text nicely lined up with our endpoint and raised ever so slightly higher,
80

81
00:06:47,560 --> 00:06:49,460
so that it's really, really easy to see.
81

82
00:06:49,540 --> 00:06:56,290
So in the next lesson, we're going to tidy up our code and also tidy up our logic. Because at the moment,
82

83
00:06:56,350 --> 00:07:03,880
if you try and add a third dot, the user experience might not be what you expected or what you want it
83

84
00:07:03,880 --> 00:07:04,480
to be.
84

85
00:07:04,480 --> 00:07:07,520
So I'll see you on the next lesson where we fix that.
85

86
00:07:07,540 --> 00:07:08,230
So see you there.