React VR
What is React VR
Three.js & WebGL
Three.js is a JavaScript library for displaying 3d graphics in the browser.
WebGL - JS Api for rendering 3D graphics in browser without any plugins
WebVR
Experimental JS api on top of WebGL to interact with virtual reality devices
State of WebGl and WebVR
State of WebGl and WebVR
Motivation
Use declarative and functional programming style vs imperative
Reuse React ecosystem
Styling using yoga
Architecture
React Code
Packager
WebVR & ThreeJS
Getting started
npm install -g react-vr-cli
react-vr init WelcomeToVR
cd WelcomeToVR
npm start
AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);
export default class WelcomeToVR extends React.Component {
render() {
return (
<View>
<Pano source={asset('chess-world.jpg')}/>
<Text
style={{
backgroundColor: '#777879',
fontSize: 0.8,
fontWeight: '400',
layoutOrigin: [0.5, 0.5],
paddingLeft: 0.2,
paddingRight: 0.2,
textAlign: 'center',
textAlignVertical: 'center',
transform: [{translate: [0, 0, -3]}],
}}>
hello
</Text>
</View>
);
}
};
360 panoramas
equirectangular
360 panoramas
Cubic skyboxes
Coordinate system
Transforms
style={{
transform: [
{rotateZ : this.state.rotation},
{translate: [0, 2, 0]},
{scale : 0.01 },
],
}}
style={{
transform: [
{matrix : [0.01,0,0,0, 0,0.01,0,0, 0,0,0.01,0, 3,2,0,1]},
],
}}
Models and lights
<Model style={{
transform: [
{ translate: [10, -20, 5 ]},
{scale: 0.2 }
]}} source={{
obj:asset('castle.obj'),
mtl:asset('castle.mtl'),
}} lit={true} />
<AmbientLight intensity={ .5 } />
Lights
Integration with existing apps
After all it's Three.js on steroids
under the hood
Thanks
vladjs.com
React VR - web developer guide
By Vladimir Novick
React VR - web developer guide
- 1,632