ARCANA Meetup LT Reactを使ったVR環境に関する発表

1. Reactを使ったVR環境
2017/3/23
ARCANA Meetup #23
スタジオアルカナ
遠藤勝也

2. 自己紹介
遠藤勝也
明星大学情報学研究科情報学専攻
HCI, UI, UX
Processing(Java),
openFrameworks, Cinder(C++),
Python
スタジオアルカナ
研究開発, 勉強会
JavaScript, WebVR, ReactJS

3. 経緯

4. 試してみた環境
React VR
aframe-react

5. React VR
CLIが用意されている
VRモードで使うにはOculusRiftかGear VRが必要
https://facebookincubator.github.io/react-vr/

7. サンプル
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>
);
}
};

8. aframe-react
A-FrameのReactコンポーネント
<a-scene>と<a-entity>のみ実装してある
注) rootとなる要素にwidth, heightを指定しないと
VRモードにできない！
https://github.com/ngokevin/aframe-react

9. class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Scene>
<Camera>
<a-cursor
animation__click="property: scale; start
</a-cursor>
</Camera>
<Light/>
<Entity geometry={{primitive: "box"}} material=
<Entity text={{value: "HELLO WORLD", color:
</Scene>
);
}
}
export default App;

10. const Light = (props) => (
<Entity>
<Entity light={{type: "ambient", color: "#888"}}/>
<Entity light={{type: "directional", intensity: 0.5}}
<Entity light={{type: "directional", intensity: 1}}
</Entity>
);
export default Light;

11. デモ
React VR
公式のやつ
aframe-react + Redux
https://github.com/k-endoh/mystic-grave-redux

12. 感想
React VRは良さそうだけど、
iPhone等でもVRモードで使えるようにして欲しい
それなりの規模ならaframe-reactで満足
初めてのReduxは辛かった

13. ありがとうございました