React VRを使って注視ボタンを作成するにはどうすればいいですか？

Question

私はReact VRを使って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

プロジェクトにいくつか追加する必要があります。 012インサイドnpm simple-raycaster

：

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

^出典：

1. 追加simple raycasterがvr/client.js内部

   npm install --save simple-raycaster 
   

   を使用してこのコードをインストールします。使用このコード：

   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 at GitHub facebook/react-vr}

を