How to create react-vr "enter vr button/cardboard"?

Question

I'm playing around with the react-VR framework and can't seem to find anything in the docs about entering vr mode on chrome/cardboard ? Any help or pointers much appreciated.

Answer 1

Here is my part of the code while creating a WebVR tour

<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);

Maybe you will find something helpful for you also here

Answer 2

for desktop Chrome there is flag: chrome://flags/#enable-webvr after you enable it and restart Chrome the button "View in VR" will appear, but unfortunately I didn't see any changes when I click it. I also have tried it on experimental developers build of Chromium, but there was even more flags that should be enabled. a lot of stuff about tuning your browser is here: https://superuser.com/questions/836832/how-can-i-enable-webgl-in-my-browser chrome://gpu/ is very handy to check your 3D environment and don't forget that in some cases (usually on laptops) you can run your browser on integrated videocard instead of powerful GPU, so resluts could be extremly different. and finally you can check source code of node_modules/ovrui/dist/ovrui.js function attemptEnterVR() to understand better what should happens when you try to switch to VR mode.

Answer 3

Like Pavel Sokolov said, by default WebVR is not enabled and requires updating in the chrome://flags section. This will enable the Show in VR button. However, the current version of Chrome (57) has issues with WebVR, which may result in a black screen for you. In that case, try out Chrome Canary instead, I've had success using it.

I wrote a guide about getting my Cardboard up and running with React-VR, you can read it here.