How to create "enter vr button / cardboard" reaction-vr?
I'm playing with react-VR and can't find anything in the docs about putting vr mode on chrome / cardboard? Any help or pointers is greatly appreciated.
Here is my piece of code when 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);
You might find something useful for you here too
for desktop chrome there is a flag: chrome: // flags / # enable-webvr after you enable it and restart chrome, the "View in VR" button will appear, but unfortunately I don't see any changes when I click on it. I also tried this on experimental Chromium build developers, but there were even more flags to be enabled. a lot of information about setting up your browser is here: https://superuser.com/questions/836832/how-can-i-enable-webgl-in-my-browser chrome: // gpu / is very handy to test your 3D environment and remember that in some cases (usually on laptops) you can run your browser on an integrated graphics card instead of a powerful GPU, so resluts can be extremely different. and finally, you can check the source code of the node_modules / ovrui / dist / ovrui.js tryEnterVR () function to get a better understanding of what should happen when you try to switch to VR mode.
As 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 problems with WebVR, which may result in a black screen for you. In this case try using Chrome Canary, I have used it successfully.
I wrote a guide on how to get your card up and running with React-VR, you can read it here .