如何使用 React VR 创建凝视按钮？答案

【问题标题】：How could I create gaze buttons using React VR?如何使用 React VR 创建凝视按钮？
【发布时间】：2017-04-24 13:14:53
【问题描述】：

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

有更简单的方法吗？

【问题讨论】：

标签： webvr react-360 gaze-buttons

【解决方案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}

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

【讨论】：