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函数的tryEnterVR（）源代码，以便更好地了解当你尝试切换到VR模式时会发生什么。

Answer 3

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

我写了一篇关于让我的Cardboard启动并运行React-VR的指南，你可以阅读它here。

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

3 个答案: