Three.jsはWebサイトに「3Dアニメーション」や「立体的な演出」を加えられる、
今注目のJavaScriptライブラリです。
スクロールに合わせて動く立方体・光を反射する3Dロゴ・マウス操作で変化する背景など、
まるで映画のような表現をブラウザ上で再現することができます。
しかし実際には、書籍を読んでも「何をしているのか分からない」
「コードが古くて動かない」といった声が多く、
独学で学ぶのは簡単ではありません。
そこで今回はそんな初心者の方のために、
Three.js初心者の独学におすすめな動画教材を3つご紹介します。
書籍や公式のチュートリアルでは難しくて挫折してしまったという方は、
ぜひ今回紹介する教材で再チャレンジしてみてください。
Three.jsは独学できない？書籍を買うだけではすぐ挫折してしまう理由
書籍だけでは、仕上がりのイメージがつかないからです。
具体的には…
- 立体的な仕組みを理解できない
- 事例が古くて、最新の内容に合わせてサイトが作れない
- 途中でつまづいても解決方法を自分で調べられない
このように、書籍を読むだけでは何も分からず、途中で挫折してしまいがちです。
1.立体的な仕組みを理解できないから
Three.jsは、3D空間上でオブジェクトを配置・回転・照明する技術です。
しかし本では動きが見えないため、どれで「カメラを動かせるのか」や
「光の当て方を変えれば何が変わるのか」を体感できません。
結果「数字をいじっても何が変わったのかわからない…」と感じて手が止まってしまうのです。
2.事例が古くて、最新の内容に合わせてサイトが作れないから
Three.jsはアップデートが非常に早いライブラリです。
数年前の書籍では構文が古く、
現在のバージョンでは動かないコードも多いのが現実。
書籍通りに打ってもエラーばかりで、
「自分が間違っているのか」「本が古いのか」すら分からなくなる…。
結果、動くサイトを作れず、
この分野に適性がないのだと勘違いしてしまう方が後を絶ちません。
3.途中でつまづいても解決方法を自分で調べられないから
Three.jsは日本語の情報が少なく、
バージョンごとの差異も大きいです。
書籍だけでは後継バージョンへの
書き換え方法の知識まではカバーされていません。
なので英語の公式フォーラムやGitHub Issueの中から解決方法を探す力がないと、
エラー解決ができずに理想のサイトを作り上げられないこともあるのです。
もう挫折しない！初心者がThree.jsを独学で効率良く学ぶ方法
ではどうすれば挫折せず、
独学をやりきれるのでしょうか？
結論、以下のステップに沿って進めることで
最後まで学び切ることができます。
- 実際に作るものを1つに絞る
- 作りたいものをピックアップして参考例を手元に置いておく
- 実際にモノを作りながら、分からないところは動画で学ぶ
1.実際に作るものを1つに絞る
Three.jsを学ぶとき、最初から複雑な3Dサイトを
作ろうとすると、必ず途中で挫折します。
最初は手頃なものを作るところから始めましょう。
例えば…
- 回転する立方体
- シンプルな3Dロゴアニメーション
- スクロール連動で動く3D演出
このようにパーツ群の一つを作ることを最初の目標にし、
無理をしすぎないゴール設定を行なって徐々に言語に慣れていきましょう。
2.作りたいものをピックアップして参考例を手元に置いておく
作るものを決めたら、次は目指す完成イメージを視覚化することが大切です。
Three.jsは動きが命なので、静止画ではなく
実際に動くサイトの例を見て学ぶのが効果的です。
例えば公式のクックブック集やCodePenのような
コード事例がたくさん掲載されたなどをチェックして、
気になったものをブックマーク。
このアニメーションはどうやって動いているのか？
どういう仕掛けが施されているのか？
といったところを目で追いながら、
実際に作り方の参考にしてみましょう。
3.実際にモノを作りながら、分からないところは動画で学ぶ
手を動かし始めたら、あとは作り切るだけです。
ただとはいえ、初見の分野ともなると、
どうしても本や自分が調べた知識だと対応にも限界があるはず。
その場合は、動画教材を活用して、
作り方を参考にしてみましょう。
書籍は分からない部分があったら、
その都度調べる必要がありますが、
動画となればやり方を見つつ自分のペースで学習できるので初心者におすすめです。
もし一人での学習に行き詰まったら、
ぜひ関連動画がないかを調べて、制作の参考にしてみてください。
Three.jsの独学に役立つおすすめ動画3選
では実際どういった動画で、
Three.jsの使い方を学べば良いのでしょうか？
Three.jsの独学に役立つおすすめ動画を3つご紹介します。
1.基礎から学べる「【Three.js 入門】初心者から最短で成長」
| 講座名 | 【Three.js 入門】初心者から最短で成長！！ |
| こんな方におすすめ | ・ThreeJSを学びたい方 ・Javascriptの基本を理解している方 |
| 学べること | ・Three.js基礎知識 ・インタラクティブコンテンツ制作 ・パフォーマンス最適化技術 ・3D描画プロセス理解 |
| 学習時間 | 1時間56分 |
| 講師名 | Kueru _Udemy |
・Three.jsを初めて学ぶ初心者で、3D Webの基礎をしっかり理解したい方
・見た目だけでなくパフォーマンスにも優れた3Dコンテンツを作りたいWeb制作者
・JavaScriptの基礎知識を活かして、立体的な表現を自分のサイトに取り入れたい方
2.3Dウェブサイトを作るなら「モダンな3Dフロントエンド技術を習得して周りのエンジニアと差をつけよう」
| 講座名 | 【Three.js入門】モダンな3Dフロントエンド技術を習得して周りのエンジニアと差をつけよう！ |
| こんな方におすすめ | ・Threejsに少しでも興味がある入門者 ・モダンな3Dウェブサイトに興味があるJavascript初心者 ・ThreeJS公式ドキュメントが難しくて挫折経験のある方 |
| 学べること | ・Three.jsの基礎の理解 ・3Dウェブサイトの作成能力 ・数学的知識の習得 ・シーンとカメラの関係性 |
| 学習時間 | 8時間26分 |
| 講師名 | Shin Code |
・2D表現だけのフロントエンドから脱却し、3D技術で周りと差をつけたい方
・英語教材では挫折したけど、日本語で分かりやすくThree.jsを習得したい方
・Three.jsを基礎から学び、モダンな3Dウェブサイトを自作してみたいJavaScript初心者
3.GLSL言語の書き方を正確に学習できる「Three.js発展講座」
| 講座名 | 【Three.js発展講座】シェーダー言語を駆使して複雑な3Dオブジェクトを自在に操りたい人のためのマスター講座 |
| こんな方におすすめ | ・Three.jsシェーダー言語のマスター ・GLSL言語の正確な書き方 ・3Dオブジェクトの複雑な描画 ・シェーダーを使ったモダンな開発環境 |
| 学べること | ・Threejsのシェーダーに興味のある方 ・モダンな3Dウェブサイトに興味があるJavascript初心者 ・ThreeJS公式ドキュメントが難しくて挫折経験のある方 |
| 学習時間 | 4時間20分 |
| 講師名 | Shin Code |
・Three.jsの基礎を終え、GLSLシェーダーを使った高度な3D表現に挑戦したい方
・WebGLやOpenGLの知識を深め、モダンな3Dサイトを構築できるようになりたい方
・シェーダーの難しさで挫折した経験があり、体系的に学び直したいフロントエンドエンジニアの方
Three.jsを使いこなして、見る者を惹きつけるサイトを手に入れよう
Three.jsを使いこなせるようになると、
あなたのWebサイトは静止したページから動きのあるサイトへと進化します。
ボタンを押すと3Dモデルが動いたり、
マウスに合わせて背景が反応したりと、
訪れた方の印象に残るインタラクティブな表現が自在に作れるようになります。
しかも、最新のブラウザでは追加プラグインも不要。
Three.jsの知識さえあれば、
デザインと演出の両方を自分の手でコントロールできるようになります。
最初は小さな立方体からで構いません。
一度「自分のコードで3Dを動かせた」という経験を積めば、
その感動が次のステップへのモチベーションになります。
今日からあなたも、3Dの世界に一歩踏み出してみてください。
