如何使用React VR創建凝視按鈕？

Question

我正在使用React VR編寫一個VR應用程序，並且會使用進度條（或其他）來製作注視按鈕，以向用戶顯示他必須觀看該按鈕的時間。我怎麼能這樣做？

我想利用這個僞（可能有一些bug的代碼裏）：

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. 安裝simple 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. 012內使用此代碼：

   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}