React VR is a framework for the creation of VR applications that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing experiences that can be consumed through a variety of devices. Leveraging web technologies and the existing React ecosystem, React VR aims to simplify the construction of 360 experiences and democratize the creation of VR content.
Rendering the scene pictured above can be done using this code snippet:
import React from 'react';
import {AppRegistry, Pano, Text, View} from 'react-vr';
class WelcomeToVR extends React.Component {
render() {
// Displays "hello" text on top of a loaded 360 panorama image.
// Text is 0.8 meters in size and is centered three meters in front of you.
return (
<View>
<Pano source={asset('chess-world.jpg')}/>
<Text
style={{
fontSize: 0.8,
layoutOrigin: [0.5, 0.5],
transform: [{translate: [0, 0, -3]}],
}}>
hello
</Text>
</View>
);
}
};
AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);
If you’re familiar with React, you can now build in VR 🙂
Leave a comment