Three.jsの勉強の仕方

概要

Three.jsの勉強を始めて半年くらいが経過しました。
現在は、以下のようなアプリケーションを作成できるようになりました。

https://nemutas.github.io/r3f-normal-color/

ここまでに至る過程を少しまとめられたらと思います。

React Three Fiber について

私は主に、React Three Fiber（Three.jsをReact用にラッパーしたライブラリ｜以下、R3F）を使用して開発してます。
バニラのThree.jsを触る前に、つまりThree.jsの知識がゼロの状態のときからR3Fを使い始めました。
とてもよく設計されたライブラリで、ほんの数行でBoxを表示することができます。

ただし、よく設計されているということは、それほど抽象化されているということです。学び始めの頃は自分が作りたいシーンを作るために、どのプロパティをいじればいいのかわからないということが頻発しました。

またR3Fのドキュメントは、（おそらく）Three.jsを知っていること前提で作られているため、Three.jsを知らない状態で読んでもチンプンカンプンになります。

なにが言いたいかというと、
R3Fを使う場合でも結局はThree.jsの知識が必要で、まずThree.jsの学習から始めたほうがいいです。

よーいどん

スタートは、俯瞰的（網羅的）な学習がいいと思います。まずは、Three.jsで何ができるのかを知ることが重要です。
注意したいのが、Three.jsはとても活発なライブラリです。つまり、更新頻度が高く1年前の情報はもう古いというプログラミングあるあるを体現しています。
なので、学習教材もなるべく最新のものを選びましょう。

おすすめ度★★★★★

Bruno Simon氏によるthreejs journeyです。
私は色々な教材で学習をした後に、このコースを知りました。そのため受講はしていませんが、いまからでも受講しようか悩んでいるレベルでよくできたコースです。（目次の内容や、受講されている方のアウトプットを見る限り）
使用言語が英語で「うーん...」と思う方もいると思いますが、英語は慣れていきましょう。Three.jsを学習していく上で英語は避けて通れません。

おすすめ度★★★☆☆

Sean Bradley氏によるThree.js and TypeScriptです。
Udemyのコースで、値引きされいる期間であれば1000～2000円程度で受講できます。（セールは頻繁にしているので、その時に買いましょう）
TypeScriptを使っているので少し人を選びますが、Three.jsを網羅的に学習できます。ただし、Shaderについては扱っていません。

おすすめ度★☆☆☆☆

Jos Dirksen (著), あんどうやすし (翻訳)の初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリです。
あまりお勧めはしません。というのも、出版年数が5年以上前で内容的に古いです。ただし貴重な日本語の参考書なので、第3版が出たら買う価値はあるかもしれません。
内容は、そこそこ網羅的で軽くPostprocessingに触っている程度です。

次のステップ

網羅的に学習した後、「ではなにを作ろうか...」となるかもしれません。また、作りたいものを作ろうとしようにも、うまく表現できないと思います。
それは、コースに従って学習しただけだからです。つまり、知識はあっても何を使えばいいのかがわからない状態です。
次にすることは、基礎に立ち返ることです。例えば、Boxを表示してみたり、ライティングしてみたり、アニメーションさせてみたりしましょう。わからない場合は、Three.jsのドキュメントを読むようにしましょう。

それができたら、次はThree.jsのサンプルで学習するのがおすすめです。

Three.jsのドキュメントの素晴らしいところは、ものすごく多くのサンプルが用意されているところです。
上から舐めてみていき、「これ、作ってみたいな」って思うのがあれば、ソースコードを参考にしつつクローンを作ってみましょう。また、わからないコードは逐一ドキュメントで確認します。

中には、かなり煩雑なことをしているサンプルもあります。まったくわからない場合は、一旦やめたほうが良いです。ほかに色々作っていく内に知識が蓄積されて、2か月後には簡単に実装できることもあります。

Shader

上記の基礎的なことができるようになると、Shaderに手を出したくなります。Shaderを扱えるようになれば、自分でPostprocessingを作成したり、メッシュの頂点を波打たせたり、この記事のgifのようなことが出来たりします。
Three.jsを使った表現力が段違いになります。

Shaderの何が難しいのか、それは資料が少ないところです。
私見ですが、Three.jsがそもそも煩雑なShaderを書かなくて済むように設計されたライブラリだからだと思います。Boxの描画も内部的にはShaderが使われていますが、Three.jsを使う人はそれを意識しないでJavascriptだけで表示することができます。

ただし、まったくないわけではないです。
例えば、Udemyには以下のコースがあります。このコースではShaderのすごく基礎的なことを学習できます。

基礎的なことが理解できたら、簡単なところから色々作ってみる期間が必要です。
Noise、Texture、Matcap、Fresnel、InstancedMesh...など、ひとつにフォーカスしてShaderで遊ぶと理解が深まります。

先進的なインプット

Shaderを学習する上で、すごく参考にさせて頂いている方がいます。
YouTubeのYuri Artiukh氏のチャンネルです。

まず、題材がとても面白いです。そして、ほぼゼロの状態からライブコーディングをしていくので実装過程がわかります。
個人的に、Shaderは可読性が低いと思います。他の方が書いたコードは何をしているのかほぼわからない可能性が高く、コードを読んで理解するよりどういう工程で作られていったのかが重要になります。
また、Yuriさんの動画の素晴らしいところは、参照先も示してくれているところです。その参照先から学べることもたくさんあります。

もう一つ、Three.jsのトップページにあるサンプルサイトから学べます。
これらのサイトは、企業やポートフォリオが多く完成度が非常に高いです。日本の方が作成されたサイトもいくつも掲載されています。
コードはない場合がほとんどですが、Three.jsでどのような表現ができるのか、インスピレーションを受けることができます。
「すげぇ～」と思うサイトは、独自のPostprocessingや、Shaderを使ったMeshを巧みに駆使している場合がほとんどです。Shaderを使っていることには変わりない（材料は揃っている）ので、Shaderをどう使えばこの表現ができるのか？ を考えるきっかけになります。

React Three Fiberのサンプル

R3Fにもものすごくたくさんのサンプルがあります。こちらも参考にしましょう。

例えば、Postprocessingを自分で実装したい方は、以下のCodeSandboxが役に立ちます。

コリジョンを扱いたいなら、これでしょう。

アウトプット

作ったものは動画にして、Twitterで#threejsや#webglタグをつけて投稿しましょう。このタグからも色んな情報を得ることができます。

まとめ

英語、日本語関係なく得られる情報はすべて拾っていきましょう。
後は、手を動かして実験していきましょう。

何か質問があればTwitterで聞いてください。なんでも知ってるわけではないですが。