Как я могу создать кнопки взгляда, используя React VR?

Question

Я пишу приложение VR, используя React VR, и делаю кнопки взгляда с индикатором выполнения (или чем-то еще), чтобы показать пользователю, как долго он должен наблюдать за этой кнопкой. Как я мог это сделать?

Я думаю использовать этот псевдокод (может быть, есть некоторые ошибки внутри этого кода):

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
}

Есть ли более простой способ сделать это?

Answer 1

Вам нужно добавить некоторые вещи в ваш проект.

1. Установите простой Raycaster, используя

   npm install --save simple-raycaster
   

   внутри vr/client.js добавить этот код:

   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 }; 
   

   ^{Источник: npm simple-raycaster}

2. Внутри index.vr.js используйте этот код:

   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() {
     // ...
   }
   

   ^{Источник: andrewimm на GitHub facebook/ реагировать-vr}