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}

이 코드를 사용