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

Question

我正在使用react-VR 框架，但似乎在文档中找不到任何关于在 chrome/cardboard 上进入 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://flags/#enable-webvr 启用它并重新启动 Chrome 后，将出现“在 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 函数的源代码

Answer 3

就像 Pavel Sokolov 所说，默认情况下 WebVR 未启用，需要在 chrome://flags 部分进行更新。这将启用“在 VR 中显示”按钮。但是，当前版本的 Chrome (57) 存在 WebVR 问题，这可能会导致您出现黑屏。在这种情况下，请尝试使用 Chrome Canary，我已经成功使用它。

我写了一篇关于使用 React-VR 启动和运行 Cardboard 的指南，您可以阅读它here。