Ionic + three.jsで立方体を表示させる
はじめに
個人の覚書です。
なにをしたのか
Ionicとthree.jsをあわせてサンプルを作成してみる。 正確にはこの記事の「やってみた」になる。
前提
やったこと
three.jsのインストール
npm install three --save
でインストールを実行。
下記は実行ログ。
^CMyMacBookAir:VNavi swchrm$ npm install three --save npm WARN @ionic/pro@2.0.4 requires a peer of cordova-plugin-ionic@^5.0.0 but none is installed. You must install peer dependencies yourself. + three@0.99.0 added 1 package from 1 contributor and audited 6152 packages in 21.541s found 0 vulnerabilities
WebBrowserでの動作確認
うまく動いた。 ただし描画にマシンスペックを想像以上に必要とするのか、動作させるとマシンがかなり重くなった。 動画をうまく掲載できない。。
iOS実機での動作検証
うまく動いた。 こちらも動画をうまく掲載できない。。
Android実機での動作確認
Androidの実機ではアプリを起動(ionic serve -c
)するとエラーになってしまい、アプリが落ちてしまった。
AndroidのOSのバージョンが古いことを原因と想定するが、現在ここは重要ではないので解決は特にしない。
下記にログだけ残しておくことにする。
[INFO] Browser window opened to http://localhost:8100! [app-scripts] [06:09:21] console.log: Angular is running in the development mode. Call enableProdMode() to enable the production [app-scripts] mode. [app-scripts] [06:09:21] console.log: THREE.WebGLRenderer 99 [app-scripts] [06:09:22] lint finished in 7.33 s [app-scripts] [06:09:22] console.log: Ionic Native: deviceready event fired after 1518 ms [app-scripts] [06:09:26] console.log: Angular is running in the development mode. Call enableProdMode() to enable the production [app-scripts] mode. [app-scripts] [06:09:26] console.log: THREE.WebGLRenderer 99 [app-scripts] [06:09:26] console.warn: Ionic Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to [app-scripts] a) run in a real device or simulator and b) include cordova.js in your index.html [app-scripts] [06:09:26] console.warn: Ionic Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to a) [app-scripts] run in a real device or simulator and b) include cordova.js in your index.html [app-scripts] [06:10:18] console.log: deviceready has not fired after 5 seconds. [app-scripts] [06:10:18] console.log: Channel not fired: onDOMContentLoaded [app-scripts] [06:10:19] console.log: Channel not fired: onCordovaInfoReady [app-scripts] [06:10:19] console.log: Channel not fired: onFileSystemPathsReady [app-scripts] [06:10:19] console.log: Channel not fired: onCordovaConnectionReady [app-scripts] [06:10:39] console.warn: Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an [app-scripts] inconsistent state. Try removing plugins from plugins/ and reinstalling them. [app-scripts] [06:10:39] console.log: Angular is running in the development mode. Call enableProdMode() to enable the production [app-scripts] mode. [app-scripts] [06:10:40] console.log: THREE.WebGLRenderer 99 [app-scripts] [06:10:40] console.error: THREE.WebGLRenderer: Error creating WebGL context. [app-scripts] [06:10:40] console.error: ERROR [object Object] [app-scripts] [06:10:41] console.log: Ionic Native: deviceready event fired after 17312 ms
まとめ
npmでthree.jsをインストールする。
その後、描画させたいtabのtsファイルとhtmlファイルを変更する。
所感
動くには動く。 ただしパフォーマンスに問題がありそう。