如何创建react-vr“进入vr按钮/纸板”？

Question

我正在使用react-VR框架，但在文档中似乎找不到任何关于在铬/纸板上进入vr模式的内容？任何帮助或指点非常感谢。

Answer 1

以下是我在创建WebVR教程时编写的部分代码

<View>
        <Pano source={asset(this.state.current_scene['scene_image'])} onInput={this.onPanoInput.bind(this)}
          onLoad={this.sceneOnLoad} onLoadEnd={this.sceneOnLoadEnd}
          style={{ transform: [{translate: [0, 0, 0]}] }}/>
        {this.state.current_scene['navigations'].map(function(item,i){
              return  <Mesh  key={i}
                            style={{
                                layoutOrigin: [0.5, 0.5],
                                transform: [{translate: item['translate']},
                                            {rotateX: item['rotation'][0]},
                                            {rotateY: item['rotation'][1]},
                                            {rotateZ: item['rotation'][2]}]
                            }}
                      onInput={ e => that.onNavigationClick(item,e)}>
                              <VrButton 
                                     style={{ width: 0.15,
                                            height:0.15,
                                            borderRadius: 50,
                                            justifyContent: 'center',
                                            alignItems: 'center',
                                            borderStyle: 'solid',
                                            borderColor: '#FFFFFF80',
                                            borderWidth: 0.01
                                     }}>
                                     <VrButton
                                            style={{ width: that.state.animationWidth,
                                                   height:that.state.animationWidth,
                                                   borderRadius: that.state.animationRadius,
                                                   backgroundColor: '#FFFFFFD9'
                                            }}>
                                     </VrButton>
      </VrButton>
    </Mesh>
          })}
      </View>
onNavigationClick(item,e){
     if(e.nativeEvent.inputEvent.eventType === "mousedown" && e.nativeEvent.inputEvent.button === 0){
          var new_scene = this.state.scenes.find(i => i['step'] === item.step);
          this.setState({current_scene: new_scene});
          postMessage({ type: "sceneChanged"})
     }
}
sceneOnLoad(){
    postMessage({ type: "sceneLoadStart"})
  }

  sceneOnLoadEnd(){
    postMessage({ type: "sceneLoadEnd"})
  }
this.sceneOnLoad = this.sceneOnLoad.bind(this);
this.sceneOnLoadEnd = this.sceneOnLoadEnd.bind(this);
this.onNavigationClick = this.onNavigationClick.bind(this);

也许你也会发现一些对你有帮助的东西，here

Answer 2

对于桌面Chrome浏览器，有一个标志: Chrome ://flag/# enable -webvr在你启用它并重新启动Chrome之后，"View in VR“按钮将会出现，但不幸的是，当我点击它时，我没有看到任何变化。我也在Chromium的实验开发人员上尝试过，但还有更多的标志需要启用。这里有很多关于调整浏览器的内容：https://superuser.com/questions/836832/how-can-i-enable-webgl-in-my-browser chrome:// GPU /非常方便地检查你的3D环境，不要忘记在某些情况下(通常是在笔记本电脑上)，你可以在集成显卡而不是强大的GPU上运行浏览器，所以结果可能会截然不同。最后，您可以查看node_modules/ovrui/dist/ovrui.js函数attemptEnterVR()的源代码，以便更好地了解当您尝试切换到VR模式时应该发生什么。

Answer 3

正如Pavel Sokolov所说，默认情况下，WebVR是不启用的，需要在chrome://标志部分进行更新。这将启用在VR中显示按钮。然而，当前版本的Chrome (57)与WebVR有问题，这可能会导致你的黑屏。在这种情况下，可以尝试使用Chrome Canary，我已经成功地使用了它。

我写了一个关于使用React-VR安装和运行我的纸板的指南，你可以在here上读到。