Capture User Interaction with React VR
Letting the user interact inside a VR scene is a crucial element for an immersive VR experience.
In this lesson we'll walk through the various interaction handlers that come with almost every React VR component and show why the component <VrButton/> is useful and how to use it.
[00:00] Let's explore interactions in React VR. Here, I already prepared a view component, which allows us to attach a variety of event handlers. Let's start out by adding onEnter. onEnter accepts a function, and we are simply going to log out onEnter to see if the function was invoked.
[00:19] If you enter the view with an interaction method, the function is invoked. When I mention interaction method, I mean all sorts of interaction inputs supported by React VR. For example, with a view, this can be just looking at the view in a VR environment, but also mouse code for hovering over the view, a touch interaction, or a raycast of a controller pointing at it.
[00:43] Next up, we add onExit, which fires whenever an interaction leaves the view. In our case, we wanted to lock the console once it is invoked, and so it does. If you want to trace the raycast movement of an interaction method on this view, we can use onMove.
[00:59] Here, we also log out the event, which contains an offset array containing the X and Y position for each event fired.
[01:18] In addition, view supports onInput. This is useful if you want to capture user input. onInput exposes us to native event. By accessing event.nativeEvent.inputEvent.type, we can identify the event source. Some common examples are mouse input event, keyboard input event, touch input event, or gamepad input event.
[01:42] Since this often is not enough, we can use event.nativeEvent.inputEvent.eventType to identify the interaction. For example, differentiating between mouse move, mouse down, mouse up, click, or when focused, even keyup works.
[02:03] Before we move on, there is one important aspect to know about onEnter, onExit, onMove, and onInput. All of them are available for all 3D primitives and models as well. Pretty cool.
[02:17] While we basically can capture all the relevant input events with onInput, the React VR team decided to create another component called VrButton, to make managing interaction state even easier. Let's import VrButton and add one to our scene.
[02:33] By default, the button won't be visible, since a VrButton has no appearance. It will only act as a wrapper to capture events. Nevertheless, it can be styled in the same way as a view. In our case, let's enter it using the end origin and moving one meter in front of us.
[02:57] Inside, we add some text.
[03:07] As mentioned, VrButton supports some convenient handlers. One of them is onClick, which will fire once the primary interaction is triggered. Some examples are for an Xbox gamepad, the button A is pressed, left click on a mouse, or a touch interaction on a touchscreen.
[03:26] Before we verify it in a browser, let's add a couple more supported event handlers. We add onLongClick, which as the title suggests, only invokes the passed function after long click. In addition, we add onButtonPress and onButtonRelease.
[03:43] When we click on the button now, three events fire. First, onButtonPress, then onClick, then onButtonRelease. Although attached, in our case, onLongClick didn't fire. As previously explained, it only does if we click the button for a longer time.
[04:13] 21, 22, there you go. To completely disable the button, we can set the property disable to true, and then none of the events will fire. I am pressing the button, but no output in the console.
[04:30] Last but not least, if you want to modify the click duration for onLongClick, you can pass in the property longClickDelayMS, and provide a millisecond value. Let's change it to 4,000 and give it a try.
[04:44] A short click still only invokes onClick, but pressing down the mouse button longer -- 21, 22, 23, 24 -- the onLongClick event handler is actually invoked.