swchrm logs

妄想技術録

Ionic + three.jsで立方体を表示させる

Ionic three.js

はじめに

個人の覚書です。

なにをしたのか

Ionicとthree.jsをあわせてサンプルを作成してみる。 正確にはこの記事の「やってみた」になる。

前提

  • npmでIonicをインストール済み。
  • すでにIonicのプロジェクトを作成済み。
  • iOS 12
  • Android 4

やったこと

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ファイルを変更する。

所感

動くには動く。 ただしパフォーマンスに問題がありそう。