0
1
00:00:01,300 --> 00:00:07,210
Now, in the last lesson, we implemented the touchesBegan method to detect when the user has touched a
1

2
00:00:07,210 --> 00:00:14,770
position on the screen. And then we use hitTest to correspond that 2D touch position into a 3D position
2

3
00:00:15,070 --> 00:00:18,280
and check to see if we touched an existingPlane.
3

4
00:00:18,340 --> 00:00:20,980
And if so, then tell us we touched the plane.
4

5
00:00:20,980 --> 00:00:23,200
Otherwise, just say that we touched somewhere else.
5

6
00:00:23,200 --> 00:00:28,370
But now, instead of printing that out, let's instead print out the actual hitTest result.
6

7
00:00:28,420 --> 00:00:29,710
So I'm gonna get rid of this
7

8
00:00:29,800 --> 00:00:35,980
"if else" statement, but I still need to check to see if there actually was a result that came back and
8

9
00:00:35,980 --> 00:00:44,750
that this value isn't nil if there actually was a hit test result that came back. So I'm gonna use
9

10
00:00:45,110 --> 00:00:46,480
if let hitResult
10

11
00:00:46,580 --> 00:00:50,820
= results, array, .first.
11

12
00:00:50,930 --> 00:00:55,490
So if this is not nil, then we are going to print the hitResult.
12

13
00:01:00,350 --> 00:01:00,650
All right.
13

14
00:01:00,660 --> 00:01:07,980
So if we have a look in our console, we can see this ARHitTestResult printed in the console. And you
14

15
00:01:07,980 --> 00:01:10,650
can see it's got a few components associated with it.
15

16
00:01:10,800 --> 00:01:17,700
It's got something called localTransform which seems to have only a 2D position because the y
16

17
00:01:17,700 --> 00:01:24,660
component is zero. But the other thing that it has is this thing called worldTransform and this seems
17

18
00:01:24,660 --> 00:01:28,740
to have x, y, and z associated with it,
18

19
00:01:28,740 --> 00:01:34,470
and this corresponds to that real world position on the plane that I tapped.
19

20
00:01:34,530 --> 00:01:39,150
So we're going to use this position to place our dice.
20

21
00:01:39,150 --> 00:01:45,330
So whereas previously, we created a vector that just position the dice anywhere we liked.
21

22
00:01:45,330 --> 00:01:53,970
In this case, it was vertically in front of us, roughly horizontal to the camera, and then around 10 centimeters
22

23
00:01:53,970 --> 00:01:55,290
in front of us.
23

24
00:01:55,290 --> 00:02:00,880
In this case, we're going to position our diceNode exactly where the user tapped it
24

25
00:02:01,020 --> 00:02:06,510
corresponding to that position in the real world on the plane using our hitTest.
25

26
00:02:06,540 --> 00:02:13,090
So I'm going to cut these lines of code and I'm going to paste it in here and get rid of this
26

27
00:02:13,110 --> 00:02:14,640
hitResult print.
27

28
00:02:15,420 --> 00:02:20,780
And then, I'm going to uncomment all of this by hitting, of course, command forward slash.
28

29
00:02:20,970 --> 00:02:23,130
And I also want to move it back a bit,
29

30
00:02:23,190 --> 00:02:29,190
so I'm just going to hold down command and hit the left square bracket key on my keyboard, and that shifts
30

31
00:02:29,190 --> 00:02:31,650
it left by two tabs.
31

32
00:02:31,650 --> 00:02:31,920
All right.
32

33
00:02:31,950 --> 00:02:38,580
So we are doing as we did before, we're creating a diceScene using our diceCollada.scn file and
33

34
00:02:38,580 --> 00:02:45,990
we are creating a diceNode using that dice object inside the diceScene. And then we're going to give
34

35
00:02:45,990 --> 00:02:47,080
it a position
35

36
00:02:47,130 --> 00:02:52,770
and, of course, in this case, instead of just 0, 0, -0.1, we're going to give it the
36

37
00:02:52,770 --> 00:02:57,590
real world position of the touch that's on the detected plane.
37

38
00:02:57,630 --> 00:03:02,090
So I'm going to extend this out so that you can see it a little bit more clearly.
38

39
00:03:02,170 --> 00:03:13,260
And I'm going to change the x from zero to hitResults.worldTransform.columns.3.x.
39

40
00:03:13,620 --> 00:03:22,290
Now, when we printed hitResult earlier on, we saw what the worldTransform object was.
40

41
00:03:22,410 --> 00:03:26,250
But what is this columns and what is 3, and what is x?
41

42
00:03:26,250 --> 00:03:34,050
Well, worldTransform if you option click on it, is a four by four matrix of floats,
42

43
00:03:34,050 --> 00:03:42,030
so that means four columns and four rows, and these four columns represent various things about the position
43

44
00:03:42,150 --> 00:03:43,280
of the hitResults.
44

45
00:03:43,290 --> 00:03:49,260
One of the columns corresponds to the scale, one of the columns corresponds to rotation, and the fourth
45

46
00:03:49,260 --> 00:03:52,670
column corresponds to the position.
46

47
00:03:52,740 --> 00:03:58,800
And if I just backtrack a little bit, when I say columns dot, you can see that I've got four options, so
47

48
00:03:58,800 --> 00:04:00,220
0 is column one,
48

49
00:04:00,540 --> 00:04:05,340
1 is column 2 because remember, of course, in computing, we always start counting from zero.
49

50
00:04:05,790 --> 00:04:13,170
So in order to get the fourth column, I'm going to type columns.3, and then I'm going to tap into
50

51
00:04:13,170 --> 00:04:21,240
the x component of that column which is the x component of the position of the hitTest result.
51

52
00:04:21,240 --> 00:04:23,800
That is where we are going to place our dice.
52

53
00:04:24,030 --> 00:04:27,300
And then I'm going to do the same for the y and the z.
53

54
00:04:27,540 --> 00:04:36,180
So hitResults.worldTransform.columns.3.y.
54

55
00:04:36,180 --> 00:04:45,010
And finally, hitResult.worldTransform.columns.3.z.
55

56
00:04:45,180 --> 00:04:45,950
Okay.
56

57
00:04:45,990 --> 00:04:52,410
And once we specify the position, finally, we're going to add the diceNode onto our sceneView, and we
57

58
00:04:52,410 --> 00:05:06,280
should, hopefully, be able to see it when we tap onto our plane.
58

59
00:05:06,340 --> 00:05:11,890
Now, you might notice that there's something slightly peculiar about our dice once it's positioned--once
59

60
00:05:11,890 --> 00:05:14,290
it's positioned onto the plane.
60

61
00:05:14,290 --> 00:05:20,700
And that is the fact that half of the dice is below the plane, but half of it is above the plane.
61

62
00:05:20,740 --> 00:05:22,240
And why is that]?
62

63
00:05:22,240 --> 00:05:30,010
Well, in our y position which describes how much elevation to give above the plane, we're using the position
63

64
00:05:30,130 --> 00:05:31,560
of the plane.
64

65
00:05:31,570 --> 00:05:38,790
Now, that means at the center of the dice is going to be placed flush with the plane that was detected,
65

66
00:05:38,830 --> 00:05:42,440
and that's what's creating this half above and half below problem.
66

67
00:05:42,460 --> 00:05:49,060
So all we need to do is just to add half of the height of the dice in order to raise it so that it sits
67

68
00:05:49,150 --> 00:05:54,470
flush on the plane. And we can do that by tapping into the diceNode
68

69
00:05:55,000 --> 00:05:58,280
and it has this property called boundingSphere.
69

70
00:05:58,450 --> 00:06:04,660
And then, we can tap into its radius, which is around half of the width, which as you'll see will bring
70

71
00:06:04,660 --> 00:06:07,300
our dice up onto the plane.
71

72
00:06:07,300 --> 00:06:07,710
All right.
72

73
00:06:07,720 --> 00:06:13,990
And there you have it. We are able to create our dice in 3D using our DiceCollada file and we can
73

74
00:06:13,990 --> 00:06:19,750
place it onto the scene and have it be flushed with our plane, and look as if we're placing a real dice
74

75
00:06:19,810 --> 00:06:22,600
onto the table by using augmented reality.
75

76
00:06:23,050 --> 00:06:28,780
So in the next lesson, we're going to make it even more awesome by giving it some animations. As you can
76

77
00:06:28,780 --> 00:06:32,020
see at the moment, when we place our dice onto the screen,
77

78
00:06:32,020 --> 00:06:37,780
it simply just appears and stays there as it is. In the next lesson, I want to show you how easy it is to
78

79
00:06:37,780 --> 00:06:44,290
add some animations to our diceNode, and make it spin and roll so that they all have different values
79

80
00:06:44,290 --> 00:06:48,520
that are facing up, so we can use it like a real dice.
80

81
00:06:48,550 --> 00:06:49,420
So I'll see you there.