Transcript from the "Using AR Hit Test" Lesson
[00:00:00]
>> By trying to type in copying and pasting, I messed up a bit. So we have the finished version of it I made available. You can find it on my GitHub repo while at the works are finished, so you can clone this version and then. Run NPM install and NPM run Dev.
[00:00:23] I'll just talk about what we have here. One thing that we did is to define vertical and we define a hitter source and it has source requested. up top, you can create it in the render function too. And we initialize while we initialize our module we enable xR and appends the AR button.
[00:00:52] We create a button and Is a required feature we add hit test because we're going to use that. We add the controller and create a on select events add event listener to our controller. In our on select function we are looking to see if the reticle is visible.
[00:01:17] If it's visible, we already defined that there is a surface so we don't have to do anything. If not, then we can create a geometry, which is the reticle itself. Well, sorry, create the geometry of the, whatever we want. In our case, it's the earth. And sets the mashes position from where the reticle is.
[00:01:42] So set from matrix position and reticle that matrix will take the exact position of the reticle and assign it to the mesh. And then finally we add our mesh to our scene. So basically what is going to happen is first we are going to look for the surface.
[00:02:02] And if we can find the surface we are going to create a new mesh and add that to our scene afterwards. So It won't be flying on the air or it won't be created right away. And in our render function what we are doing is checking if we have xR session available by checking to see if our render function has the XR frame available.
[00:02:33] If you are not in a XR session, what will happen is you will have the time stamp, but you won't have the XR frame. So I'm not going to correct the spelling of XR frame seems like it is working correctly. So one thing I'm doing in this specific case, first thing I created was an earth and I want it to be visible before a user gets into any immersive experience.
[00:03:06] The reason is that it's really annoying to not know what you're going to see in an immersive experience before you go into it. So it's a better very way of having a user interface is to show them what they will see first before they go into the immersive experience.
[00:03:26] So since I know that we are in an immersive experience because of the wire frame. I'm going to change the visibility of the earth and to false. I could also dispose this object so that I won't have anything until I find a surface and then creates the object in that surface.
[00:03:57] One thing that we are checking is our reference space. Reference space defines how are experience are going to be used by our user. For example, you one of your option is to have your user sit down and just interact in this small environments. The other one is standing up like this and not moving so much from where we are.
[00:04:28] We also have an option to have infinite amount of space which means that you can go from one room to the other and your experience still will follow you. And then we are checking the session getting the session, which will bring us the XR manager which has some of the methods that we will use.
[00:04:56] And if the hit test source request is equal to false, then we set the request reference base to viewer and then request the hit test source after that with that information. And we add a end event, which is going to be the end of our session. And we have to just clean out our data source.
[00:05:37] Finally, if we have the hitter source, we are getting the results which is going to be an array. And if we have anything in our array, we take the first which will be the first place that we select and put our reticle there and then get the position of the post to put the reticles matrix to the right place.
[00:06:08] Let's see what happens when we run it seems like people are able to run it. That's great. If you're still having an issue please let me know. And we do have the port running. And let's go do this. Okay, good. Click inspect. So this is the earth. It doesn't have [LAUGH] The materials that we had.
[00:06:35] Sorry about that. But this, I want it to be disappear after I go into an immersive experience. So I'm going to do that I have the saturd And I click on the AR session now. I lost that one. Now I'm looking for a surface and if you are not able to see any surfaces keep looking around and finally you will hit it.
[00:07:07] And if you still can't find it, one of the problems could be either you don't have a clean enough surface or you don't have enough light. So when I click it, there will be new objects created in these locations. So now, as you can see, they are stable in their position and they are not moving with the experience.