経緯
- バイト先ではjqueryでバリバリ書いているので、もっとモダンな開発をしたくなった。
- どうせならおしゃれにwebGLしたい → Three.js
学習に使ったもの
- Vue.js & Nuxt.js超入門
- Three.js examples
- Three.js使ってもアッツアツにならないぐらいのPC
結果
- こんなwebアプリが出来ました。
- 以下、アプリの説明です。
ぼやっとした内部構造
役に立つかわからない技術tips
Vueの中でThree.jsを書くには...
- Three.jsのコアパッケージをnpmとかyarnとかでwork directryにインストール。
- Three.jsのサブパッケージはインストールできるものもあるが、現状githubから必要なものだけ持ってきてファイル内最上部でコアパッケージをimportするのがいいかも。(フルインストール出来たら楽なのに...)
- 使う変数はdata()内でconst宣言しておくのがよい。
- 映像を扱う関係上、バグるとPCがフリーズ&アツアツになり死ぬので、出来るだけ最小のモジュール単位でデバッグする(当たり前)。
- シェーダ書き換える必要がある場合もあるので、vedaでも使って動くコードに直すといいんじゃないかな。
まとめ
- Vueはいいぞ(あまり恩恵を受けていない気はするが)
- Three.jsもいいぞ(むずいけど)
- 雑魚スマホで見ると固まったりするので、Nuxt.js使ってSSRで書き直すのもいいかも。
- UI/UXもっと勉強します。(誰のためのデザイン?読みました。)