夏休みの自由研究 〜React VR編〜
https://gyazo.com/b5d7735e453a6a52da03201c3ed873d9
こんにちは
京都大学工学部情報学科5回生
Nota Incでアルバイトをしています
普段はブラウザ拡張やReactでお絵かき機能を書く話などをしています
https://gyazo.com/422954eb4591d345c7d507cae73748ae
https://gyazo.com/f9978eca58ad6b127f694093bc8e3c39
今日の話のテーマ
チュートリアルをなぞりつつ、Gyazo VieweRを作ったので、その過程などを紹介
🙇触り始めて2週間くらいなので、質問されても答えられるかは怪しい
React VRとは
ReactのComponent指向を利用しつつVRアプリケーションを作るためのライブラリ
React Nativeの上で利用できるthree.jsをラップしたりしたComponentを提供している
ブラウザのWeb VRの仕組みを利用している
実体としてはReact Native + three.jsという雰囲気
こういう感じ
code:js
import React from 'react';
import {AppRegistry, Pano, Text, View} from 'react-vr';
class WelcomeToVR extends React.Component {
render() {
return (
<View>
<Pano source={asset('chess-world.jpg')}/>
<Text
style={{
fontSize: 0.8,
}}>
hello
</Text>
</View>
);
}
};
AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);
始め方
% npm install -g react-vr-cli
% react-vr init WelcomeToVR
さっきのひな形が登場する
% cd WelcomeToVR
% npm start
http://localhost:8081/vr/index.html で見れるようになる
% npm run bundle で公開用のbuild済みのファイルが vr/build に生成される
書き方
基本的にはReactアプリケーションと同じで書ける
Component props / state
React Component Life Cycle
配置は気合いでやっていく
React Nativeと同じくflex
ちょっとコツが要る感じがした
前後左右の位置調整はCSS transformでやる
React Nativeのコンテキストの上で動作するので、localStorageやlocation.hrefや各種DOM関数などのブラウザのコンテキストにあるAPIを利用することが出来ないので注意
互換のあるものがReact Nativeで提供されているのでそれを利用する
例: localStorage -> AsyncStorage(実体はIndexedDB)
配置の例
code:js
render() {
return (
<View>
<Pano source={{uri: 'chess-world.jpg'}} />
<View style={{
flex: 1,
flexDirection: 'column',
width: 2,
alignItems: 'stretch',
}}>
<View style={{ margin: 0.1, height: 0.3, backgroundColor: 'red'}}>
<Text style={{fontSize: 0.2, textAlign: 'center'}}>Red</Text>
</View>
<View style={{ margin: 0.1, height: 0.3, backgroundColor: 'orange'}}>
<Text style={{fontSize: 0.2, textAlign: 'center'}}>Orange</Text>
</View>
<View style={{ margin: 0.1, height: 0.3, backgroundColor: 'yellow'}}>
<Text style={{fontSize: 0.2, textAlign: 'center'}}>Yellow</Text>
</View>
<View style={{ margin: 0.1, height: 0.3, backgroundColor: 'green'}}>
<Text style={{fontSize: 0.2, textAlign: 'center'}}>Green</Text>
</View>
<View style={{ margin: 0.1, height: 0.3, backgroundColor: 'blue'}}>
<Text style={{fontSize: 0.2, textAlign: 'center'}}>Blue</Text>
</View>
</View>
</View>
);
}
こんな感じでドキュメントを見つつやっていく
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪
Gyazo VieweR作り方ダイジェスト版
ログイン用にVrButtonを置く
クリック音を鳴らしたり、ロングクリックをサポートしているボタン
OAuthを認可して返ってきたらAccess Tokenを取得する
fetch APIで取ってきて、取得したtokenはAsyncStorageに入れる
code:js
requestAccessToken (code) {
const params = new URLSearchParams(code=${code})
method: 'POST',
credentials: 'include',
body: querystring.stringify({code: code}),
cors: true
})
.then(res => res.json())
.then((res) => {
const accessToken = res.access_token
AsyncStorage.setItem('accessToken', accessToken)
this.setState({accessToken})
})
}
画像を取ってきて列べる
画像を前後左右にそれぞれ展開する
<View />をそれぞれ用意して、css transformのrotateYで回して、translateで位置を調整
こういう感じにしてる
code:js
const translates = [
// X, Y, Z
]
<View style={{
transform: [
{rotateY: (this.props.index * 90) + 'deg'}
]
}}>
何の工夫もせずにひとまず<Image />で列べる
code:js
images.map((image) => <Image
key={image.image_id}
source={{uri: image.thumb_url}}
style={{width: 1, height: 1}} //画像のサイズを自動で判別はしてくれないので、適当に与える必要がある
/>)
せっかくなので立方体に貼り付ける
<Image />をやめて<Box />を使う
code:js
<Box
dimWidth={1}
dimDepth={1}
dimHeight={1}
key={image.image_id}
texture={{uri: image.thumb_url}}
style={{width: 1, height: 1, margin: 0.1}}
/>
完成
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
デモ
皆さんもお手元のAndroidなどでお試しできます
MacとかのChromeでも見れます
+α
光源とカメラを扱う
カメラは <Scene />
光源は種類ごとにそれぞれComponentがある
今回は<PointLight />
今後の展望
three.jsを使ってなんかやる
BlutoothでGamePadを繋いで操作できるようにしたい
画廊を歩くみたいな体験ができると面白そう
夏休みはまだまだこれからだ
https://gyazo.com/33cdce33d57ffec7607f57cbe891695d
(大学生の夏休みは9月いっぱいまで続く)