Joe Hsu (@jhsu)
https://www.meetup.com/Portland-Virtual-Reality-Meetup/
VRDisplay
Gamepad
Oculus Medium built in WebVR
Import WebVR polyfill
Set up camera
Set up lights
Initialize scene
Declare and pass canvas
Listen to window resize
Install VREffect
Instantiate renderer
Create render loop
A web framework for building virtual reality experiences
Make WebVR with HTML and Entity-Component
Works on Vive, Rift, desktop, mobile platforms
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.
A-Frame
three.js
<a-scene>
<a-sphere position="0 1.25 -5" radius="1.25">
</a-sphere>
<a-box position="-1 0.5 -3" rotation="0 45 0">
</a-box>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5">
</a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4">
</a-plane>
<a-sky color="#ECECEC">
</a-sky>
</a-scene>
AFRAME.registerComponent('hello-world', {
schema: {
target: {type: 'selector'},
speed: {type: 'number'}
},
init: function () {
console.log('Hello, World!');
},
tick() {...},
update() {...},
});
import {Entity, Scene} from 'aframe-react';
class VRScene extends React.Component {
render () {
return (
<Scene>
<Entity geometry={{primitive: 'box'}}
material="color: red"
position={[0, 0, -5]} />
<Entity text={{text: 'HELLO WORLD'}}
position="{[0, 1, -5]}" />
</Scene>
);
}
}
React VR
three.js
class WelcomeToVR extends React.Component {
render() {
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>
);
}
};
github.com/jhsu/potato-hop
r/webvr
aframe blog
https://aframe.io/blog/
slack groups
https://aframevr-slack.herokuapp.com/
https://webvr-slack.herokuapp.com/