How to create "enter vr button / cardboard" reaction-vr?
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
source to share
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.
source to share
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 .
source to share