先日React VRがリリースされました。
以前VR系のベンチャー会社で働いていたので VRと聞くとつい触ってみたくなります。 ( ̄ー ̄)
以下の記事を参考に、Cordovaを使って React VR で作った Webアプリ を スマホアプリ化 してみました。
インストール
プロジェクトの作成
cordovaプロジェクトの作成
$ cordova create path/to/your/dir com.example.hello.reactvr HelloCordovaReactVr
createのパラメータは
corodva create ディレクトリ 識別子 アプリ名
です。識別子でハイフンやアンダースコアを使うとハマるので要注意です。(AppIDとしてiOSではアンダースコア、Androidではハイフンを使えないため)
-
$ cordova platform add ios --save $ cordova platform add android --save
React VRのプロジェクトを作成
corodvaプロジェクトのルートディレクトリでReact VRのプロジェクトを作成します。
$ react-vr init react_vr
initのパラメータは
react-vr init アプリ名
です。
アプリのビルドとコードの修正
React VRアプリのコード (js) の修正
パノラマのテクスチャ画像をデフォルトから変更したいときは static_assetsディレクトリにEquirectangularのパノラマ画像を配置して
index.vr.js
を以下のように修正します。<View> <Pano source={asset('tsujido-house-pano.jpg')} style={{ transform: [ {rotateY : 0} ] }} /> .... </View>
React VRアプリをビルド
$ cd react_vr $ npm run bundle
React VRアプリのコード (html) の修正
vr/index.html
をエディタで編集しますindex.htmlにcordova.jsを追加
<body> ..... <script type="text/javascript" src="cordova.js"></script> </body>
ビルドした js を使うようにパスを修正
2箇所修正します。.jsをつけないとNGのようです
client.bundle.js
<script src="./build/client.bundle.js?platform=vr"></script>
index.bundle.js
'./build/index.bundle.js?platform=vr&dev=true'
static_assets が index.html があるディレクトリから見えるようにする
ln -s ../static_assets .
assetsRootのパラメータを追加
ReactVR.init( // When you're ready to deploy your app, update this line to point to // your compiled index.bundle.js './build/index.bundle.js?platform=vr&dev=true', // Attach it to the body tag document.body, { assetRoot: 'static_assets' } // 追加 );
cordovaのwwwディレクトリがReact VRのコンテンツを参照するようにする
cordovaプロジェクトのルートディレクトリに移動して
$ mv www www.orig $ ln -s react_vr/vr www
cordovaアプリをビルド
$ cordova build [ios/android]
この状態で
$ cordova serve ios
をするとブラウザ上で動作確認できます。
エミュレーターで確認
続いてエミュレーターで動作確認します
-
$ cordova emulate ios
必要に応じて
--target=iPhone-6s
のようにターゲット端末をオプションで指定します。おお、出ました! ただし、シミュレーターではジャイロが使えないため真下向きのままから動きません… (´Д`。)
-
Android は 最初にエミュレーターを起動してから コマンドを打ってください
$ cordova emulate android
実機で確認
手持ちのiPad mini でやってみます。
そのまま、$ cordova run ios
すると
`Code Sign error: No code signing identities found: No valid signing identities (i.e. certificate and private key pair) were found.`
のエラーが出るので Xcodeのプロジェクトを開きます
$ open platforms/ios/HelloCorodvaReactVr.xcodeproj
Fix issueしてXcode上でビルド、実行します。
アプリは起動したもののテクスチャが表示されません..。(ノ゚ο゚)ノ
iPad miniが古いせいでしょうか…
Androidは手持ちのNexus5がいつの間にやら(Android6.0にアップデートしてから?)USBデバッグ接続できなくなっていて実機で確認できませんでした..
iOS、Androidとも最新の実機では動いてくれると信じています。。
実機で確認(続)
iPad mini の OS を10.3 に アップデートしたら見れるようになりました! ヾ(´▽`)ノ
アップデート前は動いてなかったThree.jsのサンプルがOSアップデート後に動くようになったのでそれでWebGL対応を判定できそうです。 https://threejs.org/examples/#webgl_animation_cloth