【Three.js入門】初心者がまず見るべきサイト・書籍まとめ
公開日 : 最終更新日 :
- コーディング
Three.jsを勉強しようと思っても簡単なやり方や概念を説明してくれているサイトはたくさんあるけど、実際案件で使用するためにはどうやって勉強していけばよいのか分からない人は多いと思います。
今回はThree.js初級者が中級者になるために見るべきサイトや書籍をまとめました！
これら全てを行えば、初心者を脱出出来るでしょう！
目次
【サイト】
Three.js入門サイト
WebGLやThree.jsのことを調べるまず最初に出てくる池田 泰延:twitterさんが初心者にも分かりやすくThree.jsのことを説明してくれています。
まずはこちらのサイトから勉強を進めてみるのが良いかと思います。
https://ics.media/tutorial-three/
three.js超入門 第1回 レンダリングまでの流れ
Three.js入門サイトで概要を理解したら、こちらのサイトで改めて復習をしましょう。
実際マウスに応じたインタラクションやクリックするとエフェクトをかける方法などをレクチャーしてくれています。
https://qiita.com/watabo_shi/items/bf9bcd4569b6d480c608
【Three.js】スクロールでぐにゃぐにゃする画像を実装する
Twitterで話題になっていた有料級の超優良記事です！
Three.jsを使ったサイトでよく見かけるスクロールに応じて画像を動かす仕組みを１つずつ丁寧に説明してくれています。
ここで説明してくれている内容を理解出来るとThree.jsが少し楽しくなってきます。
https://zenn.dev/bokoko33/articles/bd6744879af0d5
Threejsを使って3Dのモーフィングアニメーションを実装する
こちらも超優良記事！
Three.jsでスクロールやマウスでアニメーションをつけるときGSAPを使用することが多いのですが、GSAPを上手く使ってスクロールに合わせたアニメーションを実装するやり方を説明してくれています。
【有料サービス】
The ultimate Three.js course
Three.jsを調べるとまずたどり着くBruno Simonさんのサイト。
Three.jsの第一人者がThree.jsの使い方、Blender、負荷を掛けにくくするための方法など実際の案件で使える知識をたくさんシェアしてくれています。
有料ですが、おすすめです！
【書籍】
初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ
書籍はこちらのオライリーの本一択です。
というより、まだまだ書籍が少ないのが現実です。
まずはこちらで大枠を知り、詳しくは公式リファレンスで少しずつ学んで行きましょう。
【Three.jsのための数学】
三角関数
3Dコンテンツの制作において「三角関数は必須」です。
Three.jsやWebGLを勉強していくと三角関数を使う場面にたくさん出くわします。
そのため3Dコンテンツで制作するためにはある程度の三角関数の知識が必要です。
Youtubeなどで三角関数の基礎を学ぶ必要があります。
三角関数の基礎をYoutubeなどで学んだら次は実際にThree.jsのコードを書きながらどのように使っていくのか学びましょう。
https://ics.media/entry/10657/
ベクトル
3Dコンテンツの制作において「ベクトルの知識も必須」です。
三角関数に加えてベクトルもかよ。。
ベクトルなんて高校卒業以来触ってないよ。。むしろ完全に忘れてるよ。。って人がほとんどかと思いますが、頑張って思い出しましょう！
下記サイトが丁寧に教えてくれています。
https://ics.media/entry/15043/
【Three.js（webGL）での表現】
Three.jsがどのようにサイトで使われているか知ることも重要です。
そこで3大デザインアワードを毎日チェックすることをおすすめします。
SOTDのほとんどはwebGLの技術を駆使して作られています。
常に最新の状況を追いましょう。
CSS Design Awards : https://www.cssdesignawards.com/
Awwwards : https://www.awwwards.com/
thefwa : https://thefwa.com/
Three.jsが使えるようになるまではたくさんの勉強が必要です。
ただThree.jsが上手に使えるようになれば表現の幅は段違いに拡大します！
日本でWebGLやThree.jsの実績をアピールしている人はなぜか少ないですが、Twitterなどで英語でつぶやくと外国の方から非常に好感良いリプライが飛んできます！
何か作ることが出来たらSNSでどんどんアピールしていきましょう！
：弊社ではwebGLに力を入れております。
案件のご相談があればお気軽に下記問い合わせフォームからご相談下さいませ。
