我正在使用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
}

有没有更简单的方法可以做到这一点?

最佳答案

您需要在项目中添加一些内容。

  • 使用以下命令安装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
  • 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 at GitHub facebook/react-vr
  • 关于webvr - 如何使用React VR创建凝视按钮?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43589115/

    10-15 20:52