React VR kullanarak bakış düğmelerini nasıl oluşturabilirim?

Question

React VR kullanarak bir VR uygulaması yazıyorum ve kullanıcıya o düğmeyi ne kadar süre izlemesi gerektiğini göstermek için (veya bir şeyler) ilerleme çubuğuyla bakış düğmelerini yapıyorum. Bunu nasıl yapabilirim?

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 
} 

Bunu yapmak için daha kolay bir yolu var mı:

ben (bu kodun içindeki bazı böcek en vardır olabilir) bu pseudocode kullanmayı düşünüyorum?

Answer 1

Projenize bazı şeyler eklemeniz gerekiyor. 012 İçinde 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 }; 

^Kaynak:

1. eklemek simple raycastervr/client.js İçinde

   npm install --save simple-raycaster 
   

   kullanarak bu kodu yükleyin

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

   ^{Kaynak: andrewimm at GitHub facebook/react-vr}

bu kodu kullanabilirsiniz