How could I create gaze buttons using React VR? - webvr

Question

I'm writing an VR application using React VR and would make gaze buttons with a progress bar (or something) to show the user how long he must watch to that button. How could I do that?
I'm thinking to use this pseudocode (may be there are some bug's inside this code):
constructor(props) {
super(props);
this.state = {
watchTime: 3,
progress: 0,
watching: true
};
}
render() {
return (
<VrButton onEnter={ () => this.animateProgress() }
onExit={ () => this.stopProgress() }
onClick={ ()=> this.click() }></VrButton>
);
}
animateProgress() {
this.setState({watching: true});
while (this.state.watchTime >== this.state.progress && this.state.watching === true) {
// after a timeout of one second add 1 to `this.state.progress`
}
this.click();
}
stopProgress() {
this.setState({
progress: 0,
watching: false
});
}
click() {
// Handels the click event
}
Is there an easier way to do this?

Answer 1

You need to add some things to your project.
Install a simple raycaster using
npm install --save simple-raycaster
Inside vr/client.js add this code:
import { VRInstance } from "react-vr-web";
import * as SimpleRaycaster from "simple-raycaster";
function init(bundle, parent, options) {
const vr = new VRInstance(bundle, "librarytests", parent, {
raycasters: [
SimpleRaycaster // Add SimpleRaycaster to the options
],
cursorVisibility: "auto", // Add cursorVisibility
...options
});
vr.start();
return vr;
}
window.ReactVR = { init };
Source: npm simple-raycaster
Inside the index.vr.js use this code:
constructor(props) {
super(props);
this.click = this.click.bind(this); // make sure this.click is in the right context when the timeout is called
}
render() {
return (
<VrButton onEnter={ () => this.animateProgress() }
onExit={ () => this.stopProgress() }
onClick={ ()=> this.click() }></VrButton>
);
}
animateProgress() {
this.timeout = this.setTimeout(this.click, 1000); // or however many milliseconds you want to wait
// begin animation
}
stopProgress() {
clearTimeout(this.timeout);
this.timeout = null;
// end animation
}
click() {
// ...
}
Source: andrewimm at GitHub facebook/react-vr