夏休みの自由研究〜React VR編〜

https://gyazo.com/b5d7735e453a6a52da03201c3ed873d9

Pasta-K @ 京都なんか vol3

こんにちは

京都大学工学部情報学科5回生

Nota Incでアルバイトをしています

普段はブラウザ拡張やReactでお絵かき機能を書く話などをしています

https://gyazo.com/422954eb4591d345c7d507cae73748ae

https://gyazo.com/f9978eca58ad6b127f694093bc8e3c39

今日の話のテーマ

夏休みなので自由研究としてReact VRで遊んでみたのでその話をします

チュートリアルをなぞりつつ、Gyazo VieweRを作ったので、その過程などを紹介

🙇触り始めて2週間くらいなので、質問されても答えられるかは怪しい

ドキュメント読んでくれ!!!!!!! https://facebook.github.io/react-vr/docs/

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>

<Text

style={{

fontSize: 0.8,

layoutOrigin: 0.5, 0.5,

transform: [{translate: 0, 0, -3}],

}}>

hello

</Text>

</View>

);

}

};

AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);

via https://facebook.github.io/react-vr/index.html

始め方

% 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>

<View style={{

flex: 1,

flexDirection: 'column',

width: 2,

alignItems: 'stretch',

transform: [{translate: -1, 1, -5}],

}}>

</View>

<Text style={{fontSize: 0.2, textAlign: 'center'}}>Orange</Text>

</View>

<Text style={{fontSize: 0.2, textAlign: 'center'}}>Yellow</Text>

</View>

<Text style={{fontSize: 0.2, textAlign: 'center'}}>Green</Text>

</View>

</View>

);

}

via https://facebook.github.io/react-vr/docs/layout-and-style.html

こんな感じでドキュメントを見つつやっていく

💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪💪

Gyazo VieweR作り方ダイジェスト版

ログイン用にVrButtonを置く

https://facebook.github.io/react-vr/docs/vrbutton.html

クリック音を鳴らしたり、ロングクリックをサポートしているボタン

OAuthを認可して返ってきたらAccess Tokenを取得する

fetch APIで取ってきて、取得したtokenはAsyncStorageに入れる

code:js

requestAccessToken (code) {

const params = new URLSearchParams(code=${code})

fetch('http://localhost:8085/token', {

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: [

{translate: translatesthis.props.index},

{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}}

完成

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

デモ

https://gyazo-vr-demo.herokuapp.com/

https://github.com/pastak/kyoto-nanka-demo

皆さんもお手元のAndroidなどでお試しできます

MacとかのChromeでも見れます

+α

光源とカメラを扱う

カメラは <Scene />

光源は種類ごとにそれぞれComponentがある

今回は<PointLight />

今後の展望

three.jsを使ってなんかやる

BlutoothでGamePadを繋いで操作できるようにしたい

画廊を歩くみたいな体験ができると面白そう

夏休みはまだまだこれからだ

https://gyazo.com/33cdce33d57ffec7607f57cbe891695d

（大学生の夏休みは9月いっぱいまで続く）