标签: gaze-buttons

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