Three.js と組み合わせるJSフレームワークの選定
概要
Three.jsを使って何か作りたい！となった場合に、どのJavaScriptフレームワークを組み合わせるのが良いか、もしくはVanilla JS（JSフレームワークを使わない状態）が良いか、悩ましいですね。
今回は、我々がVue.jsと組み合わせるに至った理由を書いていきます。
TLDR;
先に結論から。
React.jsのHookに習熟しているならReact.js + react-three-fiberと、そうでないならVue.jsと組み合わせるのが良いです。
Vanilla JS
JSフレームワークを使わない素のJavaScriptのことを言いますが、ここではTypeScriptも含めます。
最近のJavaScriptは一応クラスも使えて、頑張ればスケールするコードも書けるでしょう。JSフレームワークに悩まされたくない、という場合には良いと思います。
"頑張ればスケールするコードも書ける"というところが悩ましいですね。そこを頑張るくらいであれば、素直にJSフレームワーク使った方が早いと考えました。
React.js
言わずと知れた、現在おそらく最も使われているJSフレームワーク（主観）。皆使っているし、スマホアプリをReact Nativeで作る場合にはソースコードも流用できるし、良いこと尽くめに思えるかもしれません。
React.js + Vanilla JS
React.jsを採用する場合、react-three-fiberを使わないで、直接Three.jsを使いたいと思う人もいると思います。私もそうでした。
しかし、react-three-fiber使わない場合、結局同じものを自前で作ることになります（"essentially you will re-create some part of react-three-fiber"）。
このパターンを選ぶメリットはおそらく無いです。
React.js + react-three-fiber
開発速度が速い
このパターンのメリットとして、PoCレベルの開発速度が速かったです。
ただし、ある程度作り込むと、ReactのHookやThree.jsについての深い知識が必要になってきました。
性能が悪くなりがち
何も考えずに作っていると、すぐにfpsが低下していきます。
"There is no overhead. Components render outside of React." とあります。おそらく、時間をかけて各種Hookを最適な使い方で使うように手を入れていけば、素のThree.jsと同程度の性能まで持っていけるのでしょう。
しかし、そうすると今度は開発速度が遅くなるわけで。。。
参照すべきドキュメントが多い
Three.jsとReact.jsとreact-three-fiberの3つのドキュメントを参照する必要がある上、不具合があったときにどれが原因になっているかを調査する際には、各ドキュメントを行ったり来たりしながら開発することになります。
特にreact-three-fiberがThree.jsのラッパーという性質上、この2つはいずれかだけの参照では済まず、1機能の調査でも両方のドキュメントを開く必要があります。
これも開発速度の低下に繋がります。
評価
このパターンについては、Vue+Three.jsと同程度の性能を出すのであれば、同程度の開発時間がかかると評価しました。
弊社開発メンバーのVueとReactの習熟度を考慮して、Vueとの組み合わせを採用しました。
Vue.js
こちらも主観になりますが、React.jsと人気を2分しているJSフレームワークで、ややReactに押されている感があります。
Vue.jsと組み合わせた場合のメリット・デメリットは、React + react-three-fiber の記述の裏返しになります。
メリット
data(){}の書き方 にだけ気を付ければ、fpsが低下しづらい
参照するドキュメントはVue.jsとThree.jsの2つで、参照する際もいずれかだけで済むことが多い
デメリット
React + react-three-fiberと異なり、Vue + Three.jsは専用のチュートリアルが無いため、PoCレベルの開発には手間取る
評価
とりあえずこうすれば動く、というような公式チュートリアルが無く、初期開発には手間取りました。一度動き始めてしまえば、その後はトラブルが少なく素直に開発できる印象です。
弊社ではVueでの開発経験があるメンバーがいたので、こちらを採用しました。
チュートリアルが無いという点については、当ブログの一連のWeb3D記事が助けになれば幸いです。